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

Display WooCommerce product variation image
Display WooCommerce product variation image upon selection from variation dropdown menu
December 8, 2015
jQuery typeerror invalid - advanced custom fields pro plugin
jQuery typeerror invalid ‘in’ operand a after WordPress upgrade
January 25, 2016
Show all

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 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 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 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 '&lt;div class="products"&gt;'; }

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 '&lt;/div&gt;'; }

 

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

Sher Ali Saafi
Sher Ali Saafi
Sher Ali Saafi is a software engineer, WordPress Rockstar and Envato Elite Author. When he is not found in front of machines then he is most probably somewhere in the mountains to explore new territories. You can find his travel photography at http://sheraliphotography.com/ and read about his travel experiences at http://thesilenttraveler.com/

Leave a Reply

Your email address will not be published. Required fields are marked *