Customize Woo Product Categories in Shop Catalog

[Henry Bowman]

We would like to make the main and sub product categories listed at the top the store catalog stand out from the individual products.
Namely these three points:
No stock count
No short description
possible change of background color of the category block to stand out among the individual products.

- h.k. Bowman

[David]

Hi there,

can you provide a link to where i can see the shop catalog?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Henry Bowman]

Yes, this is our test domain. What we are trying to do is make the categories at the top stand out from the single product listings.

- h.k. Bowman

[Tom]

Hi there,

Are we talking about this widget?: https://www.screencast.com/t/fkkzY8laxFB

I’m not seeing stock counts or descriptions there, but we should be able to style it with some CSS.

Let us know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Henry Bowman]

Hey thanks for taking a look at this. No, we are not talking about the search widget, we were referring to the actual display of the main categories in the shop page. By default they are always at the top, but we wanted them to look different than the products listed below them.
We want to loose the product count and the short description that gets added to the individual items as well as maybe a different color for the box itself.

Here is a screen capture showing this area:
https://americannunchaku.com/wp-content/uploads/2020/10/Untitled-1.jpg

- h.k. Bowman

[David]

Try this CSS:

.woocommerce ul.products li.product-category mark {
    display: none;
}
.woocommerce ul.products li.product-category {
    padding: 0 !important;
    min-height: 300px;
}
.woocommerce ul.products li.product-category h2 {
    color: #fff;
    position: absolute;
    display: block;
    bottom: 15px;
    left: 20px;
    right: 20px;
    background-color: #000;
    padding: 15px !important;
}
.woocommerce ul.products li.product-category,
.woocommerce ul.products li.product-category a,
.woocommerce ul.products li.product-category .wc-product-image,
.woocommerce ul.products li.product-category .inside-wc-product-image {
    display: flex;
    flex-direction: column;
    height: 100%;
} 
.woocommerce ul.products li.product-category a img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Henry Bowman]

That looks much better, very cool. Thank you so much! Keeping everything so far, is there a way to make those category boxes square instead of the high rectangle? That would make take up less vertical screen real estate.

- h.k. Bowman

[David]

This rule – is where the min-height it set:

.woocommerce ul.products li.product-category {
    padding: 0 !important;
    min-height: 300px;
}

You can reduce that or remove that – i only set is as one of the categories falls to a row with the shop products and that will automatically fill the same height as them.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Henry Bowman]

THank you so much. That gave me enough base line CSS to make the changes we needed to make those categories stand out from the products. That might be a good possible future visual modification to make woocommerce easier to display for customers.

- h.k. Bowman

[David]

Glad to be of help!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts