How to Replace WooCommerce Product Loop Structure with a Bootstrap-Friendly Layout

In a recent Business Bloomer Club Slack thread, a user wanted to replace WooCommerce’s default product loop HTML structure with a layout more compatible with Bootstrap’s “container – row – col” classes.

While modifying woocommerce_product_loop_start() to replace <ul> with <div> is straightforward, changing the default <li> markup in content-product.php requires further customization.

Here’s a guide on options for creating a Bootstrap-friendly WooCommerce product grid without entirely overwriting core templates.

Step 1: Modify woocommerce_product_loop_start()

The first step is adjusting woocommerce_product_loop_start() to replace the default <ul> tag with a <div class="container">. This change will set up a Bootstrap-friendly container for your product grid.

In your functions.php file:

add_action( 'woocommerce_before_shop_loop', 'custom_woocommerce_product_loop_start', 5 );
function custom_woocommerce_product_loop_start() {
    remove_action( 'woocommerce_before_shop_loop', 'woocommerce_product_loop_start', 10 );
    add_action( 'woocommerce_before_shop_loop', function() {
        echo '<div class="container"><div class="row">';
    });
}

add_action( 'woocommerce_after_shop_loop', 'custom_woocommerce_product_loop_end', 5 );
function custom_woocommerce_product_loop_end() {
    remove_action( 'woocommerce_after_shop_loop', 'woocommerce_product_loop_end', 10 );
    add_action( 'woocommerce_after_shop_loop', function() {
        echo '</div></div>';
    });
}

Step 2: Adjust content-product.php Template for Bootstrap Columns

The default WooCommerce structure wraps each product in an <li> tag within content-product.php. To switch to a <div class="col"> structure for better Bootstrap compatibility, the best approach is to copy content-product.php into your child theme and replace the <li> tag.

1. Copy the Template:
   Navigate to wp-content/plugins/woocommerce/templates/content-product.php and copy this file to your-child-theme/woocommerce/content-product.php.
2. Modify the Markup:
   Inside the copied content-product.php, replace <li <?php wc_product_class( '', $product ); ?>> with <div class="col-sm-4 <?php echo implode( ' ', wc_get_product_class( '', $product ) ); ?>">. This change aligns each product item with Bootstrap’s column structure.

Alternative Approach: Use WooCommerce Filters to Adjust Classes

If your Bootstrap setup only requires specific classes to handle the layout, consider using WooCommerce’s filters to add or change classes without modifying template files.

add_filter( 'woocommerce_post_class', 'add_bootstrap_product_classes', 10, 2 );
function add_bootstrap_product_classes( $classes, $product ) {
    $classes[] = 'col-sm-4'; // Adjust based on Bootstrap grid size (e.g., col-md-3, col-lg-4)
    return $classes;
}

This filter lets WooCommerce handle each product as a Bootstrap column based on classes, which may work for simpler grid layouts that don’t require HTML element changes.

Conclusion

For full control over your WooCommerce product grid structure, copying content-product.php into your child theme and modifying it is the most reliable approach. However, if classes alone can achieve the desired layout, use WooCommerce’s woocommerce_post_class filter for a simpler solution that avoids template overrides. Either way, you can integrate Bootstrap’s structure into WooCommerce effectively with these steps.