Add a class to <ul> html tag on Woocommerce shop and archive pages

Question

Somewhere in the html of my Woocommerce shop page I have this line:

<ul class="products columns-3">`

I'd simply like to add the bootstrap class "row" to it like:

<ul class="products columns-3 row"> 

I inserted the bootstrap cdn in my chrome elements tool then added the "row" and I have the result I want it but I can't find in my website files where to change it.

I know the html code is generated by functions.php , I tried to look down in almost every php page on templates and woocommerce. Can someone explain me how this can be done?

Answer 1

To add a custom class to <ul> html tag on WooCommerce shop and archives pages:

1. First read "Overriding templates via a theme" official documentation, that explains you how to override woocommerce templates via a theme.

   Note for "Premium Themes":
   On some premium themes, they can use already some customized WooCommerce templates, so you will have to use them instead. If you are using a child theme with it, copy the related template to your child theme, respecting the same folder hierarchy.

2. Once understood this, the related template to edit is loop/loop-start.php .
   Open/edit it and replace:

    <ul class="products columns-<?php echo esc_attr( wc_get_loop_prop( 'columns' ) ); ?>"> 

   with:

    <ul class="products columns-<?php echo esc_attr( wc_get_loop_prop( 'columns' ) ); ?> row"> 

3. Save… You are done.