How to add Bootstrap columns to WooCommerce Shop Page

If you prefer the Bootstrap Grid System over the default woocommerce column setup then it requires a few lines of code to get going.

This is one of many ways to accomplish our goals.

• Create our grid-based container
• Add our column classes to the products in the container
• Close the container

Open our bootstrap container

First open up a new div with .row to house our products by hooking into woocommerce_product_loop_start.

function gerrg_woocommerce_product_loop_start(){
    /**
     * opens up any category and shop pages as a boostrap row.
     */
    return '<div id="gerrg-archive" class="row">';
}
add_filter('woocommerce_product_loop_start', 'gerrg_woocommerce_product_loop_start', 999);

Add bootstrap .col-* to products

Now we need to add bootstrap colomn classes to woocommerce products by hooking into the woocommerce_post_class filter.

• .col-6 – 1/2 the row on mobile
• .col-sm-3 = 1/4 the row on small displays
• .col-xl-2 = 1/6 the row on large displays

function gerrg_add_bootstrap_cols_to_product( $class ){
    /**
     * adds bootstrap grid classes to all category and shop pages.
     */
    $class[] = 'col-6 col-sm-3 col-xl-2';
    return $class;
}

add_filter('woocommerce_post_class', 'gerrg_add_bootstrap_cols_to_product', 30, 3);

Wrapping things up

Finally we close up our shop row and have a functional bootstrap grid system on all woocommerce shop, category & taxonomy pages.

Just like be began, we adding some html to close our div by hooking into the woocommerce_product_loop_end filter.

function msp_woocommerce_product_loop_end(){
    /**
     * closes up any category and shop pages
     */
    return '</div>';
}
add_filter('woocommerce_product_loop_end', 'msp_woocommerce_product_loop_end', 999);

You did it!

Good job, if you have any questions or concerns or have a better way to succeed than above