Skip to main content

Add Bootstrap rows to the WooCommerce loop

Bootstrap is an awesome grid system and is the one of the most popular choices for web designers worldwide. Mostly because it’s such an easy system to learn.

WooCommerce is a different story, tonight I was almost ripping my hair out trying to “bootstrapify” a custom theme with WooCoommerce, and I ran into a big problem.

On the products category page, I wanted Bootstrap to spit out a row every 4 products so that they are all in line and they don’t play up if one of the product titles are larger. Three hours later after a lot of trial and error, I finally figured it out.

You’re firstly going to need to copy your “templates” folder from your WooCommerce plugin into your theme and re-name that folder to “woocommerce”. Once you’ve done that, you can overwrite the template and it will override the plugin’s template, future proofing your configuration.

Open loop-start.php


<?php
/**
 * Product Loop Start
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/loop/loop-start.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see 	    https://docs.woocommerce.com/document/template-structure/
 * @author 		WooThemes
 * @package 	WooCommerce/Templates
 * @version     2.0.0
 */
?>
<div class="products">
<div class="row">

Open loop-end.php


<?php
/**
 * Product Loop End
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/loop/loop-end.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see 	    https://docs.woocommerce.com/document/template-structure/
 * @author 		WooThemes
 * @package 	WooCommerce/Templates
 * @version     2.0.0
 */
?>



</div>
</div>



Open content-product.php

<?php
/**
 * The template for displaying product content within loops
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/content-product.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @author  WooThemes
 * @package WooCommerce/Templates
 * @version 2.6.1
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}

global $product, $woocommerce_loop;

// Ensure visibility
if ( empty( $product ) || ! $product->is_visible() ) {
	return;
}



?>


<div <?php post_class('col-sm-6 col-md-6 col-lg-3 col-xl-3'); ?>>

	<?php
  

	/**
	 * woocommerce_before_shop_loop_item hook.
	 *
	 * @hooked woocommerce_template_loop_product_link_open - 10
	 */
	do_action( 'woocommerce_before_shop_loop_item' );
  
	/**
	 * woocommerce_before_shop_loop_item_title hook.
	 *
	 * @hooked woocommerce_show_product_loop_sale_flash - 10
	 * @hooked woocommerce_template_loop_product_thumbnail - 10
	 */
	do_action( 'woocommerce_before_shop_loop_item_title' );

	/**
	 * woocommerce_shop_loop_item_title hook.
	 *
	 * @hooked woocommerce_template_loop_product_title - 10
	 */
	do_action( 'woocommerce_shop_loop_item_title' );

	/**
	 * woocommerce_after_shop_loop_item_title hook.
	 *
	 * @hooked woocommerce_template_loop_rating - 5
	 * @hooked woocommerce_template_loop_price - 10
	 */
	do_action( 'woocommerce_after_shop_loop_item_title' );

	/**
	 * woocommerce_after_shop_loop_item hook.
	 *
	 * @hooked woocommerce_template_loop_product_link_close - 5
	 * @hooked woocommerce_template_loop_add_to_cart - 10
	 */
	do_action( 'woocommerce_after_shop_loop_item' );

	?>


</div>

<?php if($woocommerce_loop['loop'] % 4 === 0) {  echo '</div><div class="row">';} ?>
  

As you can see by this code below, every 4 products, it will echo a row. The loop-start and loop-end have opened the main row, so when a new row is added it is opened with the div closing tag first, basically closing off the first row on loop-start.php and starting a new row.

<?php if($woocommerce_loop['loop'] % 4 === 0) {  echo '</div><div class="row">';} ?>

7 thoughts to “Add Bootstrap rows to the WooCommerce loop”

  1. Thank you for this super script. However it does not seem to work at home … I have however followed the instructions to the letter (loop start / end + content-product). The “div row” is added to each pass of the loop …

    <? Php if ($ woocommerce_loop ['loop']% 3 === 0) {echo ' ‘;}?>

    I’m not against a little boost 🙂

  2. Great solution, thanx!

    Also, you can use something like this:

    	if($woocommerce_loop['loop'] % 4 === 0) echo '<div class="clearfix visible-md-block visible-lg-block"></div>';
    	if($woocommerce_loop['loop'] % 2 === 0) echo '<div class="clearfix visible-sm-block"></div>';
    

Leave a Reply