Changing starting and ending tags of the products loop in main shop page of a WooCommerce theme

Changing the starting and end tags of the products loop in main shop page of a WooCommerce theme

The default starting and ending tags of the loop in main shop page of a WooCommerce theme are <ul class=”products”> and </ul>. Changing starting and ending tags might be needed due to various reasons. Lets say you have customized the content-product.php file of WooCommerce and have added some divs inside the <li> tag which is semantically wrong and wouldn’t validate as a valid html5 structure. This means that you need to change the product <li> tag to div tag hence forced to change the parent ul tag to div tag as well.

There are a couple of ways that you can change the starting and end tags of the products loop in the main shop of a WooCommerce theme. Below I list 2 methods can be useful.

1- Overriding loop-start.php and loop-end.php files from the loop folder:

Using this approach you can change the starting and closing ul tags to div tags. This approach requires copying the loop folder and the two files i.e. loop-start.php and loop-end.php to the WooCommerce folder withing your theme. Since loop-start.php and loop-end.php only contain the starting and the closing ul tags so overriding these files will not be a big deal for future updates of WooCommerce. But still, it is better to avoid override WooCommerce files if there is a better alternate available which leads to the second approach.

2- Plugging our own custom woocommerce_product_loop_start and woocommerce_product_loop_end functions:

Many functions within the WooCommerce framework are pluggable, means that we can override them through our theme functions.php file. If we wanted to change the starting ul tag to div then we would add the following code snippet to our functions.php file:

function woocommerce_product_loop_start() { echo '<div class="products">'; }

Similarly to change the ending ul tag to div we would add the following code snipped to our functions.php file:
function woocommerce_product_loop_end() { echo '</div>'; }

 

The second approach is recommended since it doesn’t require overriding the WooCommerce files hence better protection from future WooCommerce updates.

, ,

2 responses to “Changing starting and ending tags of the products loop in main shop page of a WooCommerce theme”

  1. Wonderful, but i have one question how can I replace to ? I would like to make a bootstrap grid with product list