Hi @smokingblends,
I understand you want to create a custom shop layout with 4 products per category displayed in horizontal rows. This is definitely a custom development need that goes beyond standard WooCommerce functionality.
We’re unable to provide custom code since it’s outside our Support Policy. However, I can point you to some great resources for this type of customization:
For a less custom approach, you might also consider using the [products] shortcode with category parameters on a custom page instead of modifying the main shop page. You can find details about product shortcodes here: https://woocommerce.com/document/woocommerce-shortcodes/products/.
I hope that helps. Let us know if you need anything else.
Thread Starter
Wild Jim
(@smokingblends)
<?php
/**
* 1. COMPLETELY DISABLING DEFAULT CONTENT
* We use the 'wp' hook to ensure page conditional checks (is_shop) are ready.
*/
add_action( 'wp', function() {
if ( is_shop() ) {
// Stop WooCommerce from showing categories/subcategories
remove_filter( 'woocommerce_product_loop_start', 'woocommerce_maybe_show_product_subcategories' );
// Remove the default WooCommerce product loop
remove_action( 'woocommerce_no_products_found', 'wc_no_products_found', 10 );
// Hide standard product output by forcing the main query to return nothing
add_action( 'pre_get_posts', function( $query ) {
if ( $query->is_main_query() ) {
$query->set( 'post__in', array( 0 ) );
}
});
}
});
/**
* 2. RENDERING CUSTOM CATEGORY ROWS
* We use 'woocommerce_archive_description' which appears BEFORE the main loop
* to ensure our content sits correctly under the title.
*/
add_action( 'woocommerce_archive_description', function() {
if ( ! is_shop() ) return;
$categories = get_terms([
'taxonomy' => 'product_cat',
'hide_empty' => true,
'parent' => 0, // Only get top-level categories
]);
foreach ( $categories as $category ) {
echo '<div class="category-section" style="margin-bottom: 40px; clear: both;">';
echo '<h2 class="category-title">' . esc_html( $category->name ) . '</h2>';
$products = new WP_Query([
'post_type' => 'product',
'posts_per_page' => 4,
'tax_query' => [[
'taxonomy' => 'product_cat',
'field' => 'term_id',
'terms' => $category->term_id,
]],
]);
if ( $products->have_posts() ) {
// Use Storefront's built-in grid classes for 4 columns
echo '<div class="woocommerce columns-4">';
woocommerce_product_loop_start();
while ( $products->have_posts() ) {
$products->the_post();
wc_get_template_part( 'content', 'product' );
}
woocommerce_product_loop_end();
echo '</div>';
}
wp_reset_postdata();
echo '</div>';
}
}, 15 );
We are getting there. This adds our custom content (a row of 4 products from each category) but we have not been able to shut down the original output on the page. It is displaying under the last row of 4 products from the last category. Any help would be greatly appreciated.
Hi there!
Thank you for sharing the code and explaining what you’re trying to achieve.
As my colleague mentioned earlier, this falls under custom development / customization, and we’re unable to provide direct support for implementing or troubleshooting custom code or layout changes. Our support scope is limited to WooCommerce core functionality.
For questions related specifically to customization, we recommend one of the following options: you can also ask your development questions in the WooCommerce Community Slack.
Thank you for your cooperation and your understanding.
Thread Starter
Wild Jim
(@smokingblends)
I was under the impression independent users might be able to offer some information. Thanks for offering the help you are able to provide. I will head over to Slack.
Hi @smokingblends,
Thanks for the update! Anyone else in the forum is still welcome to jump in and share their ideas or approaches as well. The topic remains open for additional input.
If you’ve found WooCommerce helpful, a quick review would be truly appreciated:
https://wordpress.org/support/plugin/woocommerce/reviews/
Thread Starter
Wild Jim
(@smokingblends)
Thanks Frank, we were able to shut down the woo output and set up the page. The issue has been resolved.
Hi there!
Thanks for the update! I’m glad to hear the issue has been resolved.
If possible, could you please share exactly how you were able to shut down the Woo output and set up the page? This will help others achieve similar functionality.
