[Resolved] Seperate WooCommerce Categories and Products

[Neil]

Within Reading Settings I have “Blog pages show at most” set to 24, and in the Customiser “Layout => Woocommerce” set to show products in 4 columns, which together gives a nice 4×6 grid on desktop.

Additionally, within the Customiser I have the setting “Woocommerce => Product Catalogue” set “Category display” to “Show subcategories & products” which is great in that is give the website visitor a chance to “refine or buy”.

However when the subcategories are an odd number this throws the product grid off.

Is there a way to have some kind of break after the categories so that the products will always be a 4×6 grid?

I have looked at the css classes, but can only see that the categories are individually targetable, rather than seperating the categories from the products.
Many thanks in advance

[Elvin]

Hi there,

We should be able to change the number of post per page displayed for ALL the product archive pages.

Try this PHP snippet.

function hwl_home_pagesize( $query ) {
    if ( ! is_admin() && $query->is_main_query() && is_post_type_archive( 'product' ) ) {
        // Display # posts for a custom post type called 'product' (WooCommerce)
        $query->set( 'posts_per_page', 24 );
        return;
    }
}
add_action( 'pre_get_posts', 'hwl_home_pagesize', 1 );

I’ve added 24 because 4 x 6 = 24. This is so the post displayed doesn’t exceed 24 posts so there’s no 7th row w/ oddly placed products.

[Neil]

Elvin,
Thanks for the update, which I have tried, but unfortunately this seems to be the same result as setting the “Blog pages show at most” from Settings => Reading Settings

[David]

Hi there,

takes custom development to split the categories into a separate list… but this tutorial shows you how to do it:

https://code.tutsplus.com/tutorials/display-woocommerce-categories-subcategories-and-products-in-separate-lists–cms-25479

I would suggest testing on a staging site to make sure sub-sub categories are working correctly.

[Neil]

David,

That seems to be exactly what I was looking for. Perfect.

Thanks for your help.
Neil

[David]

You’re welcome

[Annamari]

The URL of the tutorial above has changed, this is the correct one: https://code.tutsplus.com/tutorials/display-woocommerce-categories-subcategories-and-products-in-separate-lists–cms-25479

[Leo]

Thanks for sharing!

[sparkle]

oh no! where did it go now?

[Neil]

Why, oh why, do they keep moving it?!

Here you go: https://code.tutsplus.com/tutorials/display-woocommerce-categories-subcategories-and-products-in-separate-lists–cms-25479

[Leo]

Thanks Neil!

[sparkle]

weird. that link 404s for me too.

[Neil]

That is really weird. I checked before posting yesterday and everything was working, but also now giving a 404 for me as well.

The one way that I can find it is searching for the article ID: https://code.tutsplus.com/tutorials/search/25479

Hope that helps.

[David]

Thanks for helping out here, and playing find the post 🙂
Anyone with a blog thats up for some plagerism lol

[Neil]

@david You got me on a train of thought, and then I went a step further to just put it all together in a plugin!

https://github.com/EncodeDotHost/edh-woo-categories

Now to submit to the WP Repository for the first time!

[Author]

Posts