[Resolved] Customize Woo Product Categories in Shop Catalog

Home Forums Support Customize Woo Product Categories in Shop Catalog

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1503283
    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

    #1503618
    David
    Staff
    Customer Support

    Hi there,

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

    #1503628
    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

    #1503816
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1503856
    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

    #1504207
    David
    Staff
    Customer Support

    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;
    }
    #1505113
    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

    #1505274
    David
    Staff
    Customer Support

    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.

    #1510952
    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

    #1511217
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.