Tuesday, May 23, 2023
The Great Tit
Updated: 23. 5. 2023, Added: 23. 5. 2023

Separate WooCommerce Categories and products

When you use default WooCommerce archives, you may like to display child categories and products on category page. When you do it like that, you will see that flex columns and rows has been created, and products starts right after last category, on same row.

I would like to have my subcategories separated from products > start the products on new row. How can I set this up? I would need to change the display of archive to CSS grid and set grid-column-start to first for first product.

Separate the products from child category rows with CSS

Code has been tested with Shoptimizer theme and WooCommerce set to display 4 columns of products. If you have other number of columns, you need to change it within the code.

@media (min-width: 1100px) {
    .products.columns-4 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    ul.products.columns-4:before {
        display: none;
    }

    .columns-4 ul.products li.product {
        float: none;
        width: 100%;
    }

    body ul.products li.product.product-category + .type-product {
        grid-column-start: 1;
    }
}

After you add this to your custom CSS, it should be fixed:

Did I help you? Support me on Patreon!
Beep this article to your friends!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram