How to separate store products by categories in WooCommerce

If you look in the WooCommerce store page customization options of the product catalog, you will see that you can display the products, the categories with their subcategories, even the list of categories and products, but you will not find an option to display products organized by categories.

One code to rule them all … products

Actually, the codes are 3, because you need to give a series of instructions to WooCommerce to display what you want.

The complete code is this:

/* Separate products by category */
//1. Hide products from store
add_action( 'pre_get_posts', 'wphelp_hide_woo_products' );
function wphelp_hide_woo_products( $q ) {
if ( ! $q->is_main_query() ) return;
if ( ! $q->is_post_type_archive() ) return;
if ( ! is_admin() && is_shop() ) {
$q->set( 'post__in', array(0) );
}
remove_action( 'pre_get_posts', 'wphelp_hide_woo_products' );
}
//2. Hide the error message of "no products found"
remove_action( 'woocommerce_no_products_found', 'wc_no_products_found' );
//3. We add the display of products by category
add_action( 'woocommerce_no_products_found', 'wphelp_4_products_cat_woo' );
function wphelp_4_products_cat_woo() {
$args = array(
'parent' => 0,
'hide_empty' => true,
'taxonomy' => 'product_cat',
'fields' => 'slugs',
);
$categories = get_categories( $args );
foreach ( $categories as $category_slug ) {
$term_object = get_term_by( 'slug', $category_slug , 'product_cat' );
echo '<hr><h2>' . $term_object->name . '</h2>';
echo do_shortcode( '[products limit="4" columns="4" category="' . $category_slug . '"]' );
echo '<p><a href="' . get_term_link( $category_slug, 'product_cat' ) . '">See the products in ' . $term_object->name . '&rarr;</a>';
}
}Code language: PHP (php)

The explanation of the complete code, by steps, is as follows:

1. First you have to hide the default products display, so that they do not appear “in addition” to our shortcode, which we add at the end.
2. Next we have to hide the error message that WooCommerce would give by not displaying the products by default.
3. Finally we configure our visualization, which consists of 3 main parts:
   1. We separate with horizontal lines each category (hr) and put the category name with a H2.
   2. We launch a shortcode that displays 4 products, 4 columns of each category with products.
   3. We finish with a link to the complete list of products in each category.

In short, we get this…

Where do I add the code?

In this case, being a display issue I would bet on putting it at the end of the functions.php file of the active (child) theme, but here are some other possibilities on how to do it…