Woocommerce products list - replace <ul><li> to bootstrap div

Question

I looking for all day, a proper solution for make woocommerce template with bootstrap grid. Always i tried make changes with hooks because i think its the best way.

Woocommerce display products list like this:

<ul class="products">

<li class="post-24 product type-product status-publish has-post-thumbnail product_cat-zupki-z-chin product_tag-test first instock shipping-taxable purchasable product-type-simple"></li>

<li class="post-30 product type-product status-publish has-post-thumbnail product_cat-zupki-z-chin  instock shipping-taxable purchasable product-type-simple"></li>

<li class="post-31 product type-product status-publish has-post-thumbnail product_cat-zupki-z-chin  instock shipping-taxable purchasable product-type-simple"></li>

<li class="post-32 product type-product status-publish has-post-thumbnail product_cat-zupki-z-chin last instock shipping-taxable purchasable product-type-simple"></li>

</ul>

I would like change this to proper bootstrap grid. Something like that:

<div class="row">

<div class="col-md3">product</li>

<div class="col-md3">product</li>

<div class="col-md3">product</li>

<div class="col-md3">product</li>

</ul>

Change ul to div its possible by function woocommerce_product_loop_start(), but how can I change/replace li class=".... to div class="col-md.... ?

Thank you in advance for your help

Answer 1

So you will want to overwrite a woocommerce template file with a template file in your child theme.

FTP into your install, go to wp-content/plugins/woocommerce/templates, copy content-product.php, duplicate that file in your child theme in a new folder called 'woocommerce'.

Then change the <ul <?php post_class(); ?>> to your div and whatever class you want.

If you have questions about overriding woocommerce template files check this out: https://wordpress.stackexchange.com/questions/256088/how-to-override-woocommerce-template-files

Answer 2

You can change <ul> without editing template, just use this in functions.php:

/** 
 * Add Custom WooCommerce Loop Start
 */
function woocommerce_product_loop_start( $echo = true ) {
    ob_start();
    echo '<div class="something">'; 
    if ( $echo )
        echo ob_get_clean();
    else
        return ob_get_clean();
}

Answer 3

The easy way to change it is to overriding woocomerce templates.

The Ul tag is generated by loop-start.php.

You can find it on:

content/plugins/woocommerce/templates/loop/loop-start.php.

if you want to change the loop start and loop end you have to copy the files:

wp-content/plugins/woocommerce/templates/loop/loop-start.php

into your themes folder:

wp-content/themes/mysuperchildtheme/woocommerce/loop/