When displaying products and subcategories on the shop or listings pages, both products and subcategories can appear on the same row. This is a bit strange, as subcategories and products are different and are normally separated.
These solutions will hopefully enable you to display subcategories and products independently from each other.
Approach One (CSS only)
You will need to add the following CSS to Appearance > Customize > Additional CSS, or within the styles.css file of your child theme.
The solution is designed for a 4-column grid on the shop and listings pages. If you are using a 3-column grid, you will need to change all references to 4 in the code below to 3.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
@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; } } |
Approach Two (PHP)
This is an alternative approach which uses just PHP. The PHP should be added via the Code Snippets plugin, or the functions.php file within a child theme.
Because we’re actually moving the markup this approach could be considered more robust.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// Remove subcategories from the product loop remove_filter( 'woocommerce_product_loop_start', 'woocommerce_maybe_show_product_subcategories' ); // Add subcategories before the product loop with priority 5 add_action( 'woocommerce_before_shop_loop', 'cg_show_product_subcategories', 5 ); function cg_show_product_subcategories() { $subcategories = woocommerce_maybe_show_product_subcategories(); if ( $subcategories ) { echo '<ul class="products subcategories">', $subcategories, '</ul>'; } } |
