If you want to list products subcategory-wise in WooCommerce on WordPress, you should override the default WooCommerce product listing.
The listing products in subcategory-wise in WooCommerce uses the archive-products.php file in plugin/woo-commerce/templates in woo-commerce. Now you have to override the archive-products.php file to your theme/woocommerce folder.
If the WooCommerce folder is not present, create a folder named WooCommerce and place your PHP file there. Here you can edit the file. The code between the woocommerce_product_loop_start(); and woocommerce_product_loop_end(); lines can be deleted and your custom code for grouping products can be placed there.
Step-by-Step Guide
1. Create a woocommerce
Folder in Your Theme
First, you need to copy the archive-product.php
file from the WooCommerce plugin to your theme.
- Navigate to
wp-content/plugins/woocommerce/templates/
. - Find the
archive-product.php
file. - Copy this file.
- Paste it into your theme’s directory:
wp-content/themes/your-theme/woocommerce/
. If thewoocommerce
folder doesn’t exist in your theme, create it. - Replace the default product loop with your custom code to list products by subcategory.
<?php
// Start of the product loop
woocommerce_product_loop_start();
// Your custom code for displaying products subcategory-wise
woocommerce_product_loop_end();
// End of the product loop
?>
Sample Code for Subcategory-wise Listing
Here is a basic example of how you can list products by subcategory in WooCommerce:
<?php
// Start of the product loop
woocommerce_product_loop_start();
// Get product categories
$terms = get_terms( 'product_cat', array( 'hide_empty' => true ) );
if ( ! empty( $terms ) && ! is_wp_error( $terms ) ){
foreach ( $terms as $term ) {
echo '<h2>' . $term->name . '</h2>'; // Display the subcategory title
// Query for products in the current subcategory
$args = array(
'post_type' => 'product',
'posts_per_page' => -1,
'tax_query' => array(
array(
'taxonomy' => 'product_cat',
'field' => 'slug',
'terms' => $term->slug,
),
),
);
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) {
while ( $loop->have_posts() ) : $loop->the_post();
wc_get_template_part( 'content', 'product' ); // Display each product
endwhile;
} else {
echo __( 'No products found' );
}
wp_reset_postdata(); // Reset the post data
}
}
woocommerce_product_loop_end();
// End of the product loop
?>
Edit the archive-product.php
File
Now that the archive-product.php
file is in your theme, you can customize it.
- Open the
archive-product.php
file located in your theme’swoocommerce
folder. - Locate the code between
woocommerce_product_loop_start();
andwoocommerce_product_loop_end();
.
If the case archive-product.php file cannot be overridden you should add this line of code to functions.php in your theme.
function mytheme_add_woocommerce_support() {
add_theme_support( 'woocommerce' );
}
add_action( 'after_setup_theme', 'mytheme_add_woocommerce_support' );
By following the steps above, you can customize the WooCommerce product listing to display products subcategory-wise. This enhances the shopping experience by organizing products into relevant categories, making it easier for customers to find what they are looking for.