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">';} ?>
Thank You!
Excellent
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 🙂
Little Precision : My version of the template is * @version 3.0.0 (content-product.php)
Thanks, works great! Just include the following:
global $product, $woocommerce_loop;
if($woocommerce_loop['loop'] % 4 === 0) { echo '';}
Not Working for me…
Great solution, thanx!
Also, you can use something like this: