Changing Fonts in Product Categories Menu

  • Resolved douganderson

    (@douganderson)


    10 months, 2 weeks ago

    I’m working on a website for an antiques/collectible store. Tere will eventually be about 1,000 items but there are about 40 there no. I like the Barlow Semi-Condensed font for the product titles etc but I want to use something more compact for the product categories menu in the sidebar so that it takes up less room.

    I was looking at adding some CSS but didn’t know how to address the location. I looked through the Woocommerce CSS files and found the ‘Block.json’ file buried many levels down:

    wp-content >plugins > Woocommerce > assets > client > Blocks > Product Catagories > Block.json

    { “name”: “woocommerce/product-categories”, “title”: “Product Categories List”, “category”: “woocommerce”, “description”: “Show all product categories as a list or dropdown.”, “keywords”: [ “WooCommerce” ], “supports”: { “align”: [ “wide”, “full” ], “html”: false, “color”: { “background”: false, “link”: true }, “typography”: { “fontSize”: true, “lineHeight”: true } },

    There’s more to it but the last line here appears to define the typography of of my sidebar.

    Could I insert a “font family” line into that file and is that advisable? If I were to put it into the Customize >Additional CSS, what would that look like?

    Could I also add lines to adjust the line spacing at the same time?

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi @douganderson,

    Thank you for contacting WordPress.com support. I understand you are looking to change the font family of the product category. This can be done by adding custom CSS code to your site. Please use the following CSS code:

    span.wc-block-product-categories-list-item__name,
span.wc-block-product-categories-list-item-count {
    font-family: 'Barlow Semi Condensed' !important;
}

    To apply this code to your website, you follow the detailed guide here.?Here’s what the result will look like:?

    Let us know if there’s anything else we can help you with.

    Thread Starter douganderson

    (@douganderson)

    Thanks!

    What would I add to that to tighten up the line spacing.

    Hi @douganderson,
    Thanks for getting back to us. I was not able to access your website as it is being reloaded continuously. Please make sure the site is accessible for us to provide you with custom CSS code.

    Once we hear back from you, we’ll be able to help you with this.

    Thread Starter douganderson

    (@douganderson)

    Sorry about that. I’ve been experiencing conflicts around the Spectra plugin and this time I had to remove Spectra, clear the cache, reboot twice, inactivate all the plugins and reactivate them one by one to get rid of the problem. Hopefully it’s all gone now and you can access the site and answer my question about line spacing. I’m now done with Spectra.

    Plugin Support Shameem R. a11n

    (@shameemreza)

    Hi @douganderson

    Since you’re currently using the Product Categories Lists block, you can tweak the line height directly from the block setting. There’s no need to mess around with custom CSS. Here’s how you can do it:

    • Go to the Sidebar and click on the Product Categories Lists block.
    • Click on the Block setting on the right side and switch to the Styles tab.
    • Adjust the line height as required and save it.

    I hope this helps! Please let us know how it goes or if you need further assistance.

    Plugin Support Shameem R. a11n

    (@shameemreza)

    Hi @douganderson

    I’m glad you were able to find a solution to your inquiry here and thanks for sharing it with the community too! ??

    I will mark this thread as resolved. Should you have further inquiries, kindly create a new topic here.

    Thanks!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Changing Fonts in Product Categories Menu’ is closed to new replies.