Trying To Hide Categories

Hi! Great theme, but I need to hide the categories from my shop page. I do want them on the front/home page but not the main shop page.

Is there a way to do this in CSS?

Thanks!

Hi,

Please post a link to your website ( to the page where you want to hide the categories ).

Best Regards,
Csaba

I’m so sorry. It’s https://goheyjudy.com/

Thanks, Csaba!

No no… to the page I want to hide the categories is:

https://goheyjudy.com/now-serving/

My apologies again!

Hi,

There is no Categories on that page, was you able to hide the categories already?

Best Regards,
Csaba

Hi Csaba,

No, they’re still there. Here is the correct link: https://goheyjudy.com/now-serving/

Beneath the page title, there are four categories. Top row is boho blooms (2), Hey, Judy (1), Little Hotcakes (6), and Little Stamps (11) in the second row. Those four boxes are my product categories in woocommerce. I want to hide those and show only the individual products.

Hopefully that made sense!

Hi,

Ok, you can hide the product categories with this Custom CSS:

.product-category {
    display: none !important;
}

Add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba

Hi Csaba,

Unfortunately, that does not work as it hides the categories from the home page as well. I tried doing the .post-ADD NUMBER of the category in CSS, but I can’t get that to work either.

Hi,

To hide it only on that page, please replace the above CSS with this one:

.archive.woocommerce-page .product-category {
    display: none !important;
}

Please let me know how it works.

Best Regards,
Csaba

Hi Csaba,

Unfortunately, that code didn’t work. We are, however, making progress. After numerous tweaks, I got the following to hide the categories from the now serving page while leaving them on my home page.

.woocommerce-page ul.products li.product-category {
display: none;
}

The problem now is that the alignment on the first page is awry. I have two products on the first row and then an empty space followed by one product on the second row followed by two empty spaces. The subsequent pages all show three products as it should.

Is there any way to align the first page of now serving to show three spaces in two rows?

Thanks!

Hi,

It’s like that because the CSS you used, it’s not correct, please try this one instead:

.woocommerce-page .product-category {
    display: none !important;
}

Also make sure to add the Custom CSS using this plugin: https://wordpress.org/plugins/simple-custom-css/

Best Regards,
Csaba

Hi Csaba,

Okay. That works with and without the !important bit but it still has the alignment problem.

Any ideas?

Thanks! I appreciate it.

Hi,

Please try to add this CSS too:

.woocommerce-page ul.products li.first {
    clear: none !important;
}

Please let me know how it works.

Best Regards,
Csaba

Hi Csaba,

It worked! Thank you so much! I appreciate all your time and help. Have a great day!

Hi,

Great! You’re most welcome! I’m glad it worked! If you need help with anything else, please, feel free to open a new topic.

Have a nice day!

Best Regards,
Csaba