Categories
CMS Development Wordpress

Adding new divs with custom classes to products on WooCommerce shop page

In a custom WordPress theme I need to display product image and product summary side by side on the WooCommerce shop page, so I am trying to add new divs with custom Bootstrap classes;

I used woocommerce_before_shop_loop_item_title hook to add new div with classes as a parent to the product summary and it worked perfectly,
I tried using this code for the image

function wc_add_classes_img () {
    if ( is_shop() ) {
        ?>
            <div class="col-md-5 offset-md-1">
        <?php
    }
}
add_action( 'woocommerce_before_shop_loop_item', 'wc_add_classes_img');

function wc_close_div_after_img () {
    if ( is_shop() ) {
        ?>
            </div>
        <?php
    }
}
add_action( 'woocommerce_before_shop_loop_item_title', 'wc_close_div_after_img' );

but it added new div as a parent of the product thumbnail that is a child of the <a> element, so the html output is

<li>
   <a>
      <div class="col-md-5 offset-md-1">
          <img>       
      </div>
   </a>
   <div class="col-md-6 text-center">
   </div>
</li>

instead of desired

<li>
   <div class="col-md-5 offset-md-1">
      <a><img></a>    
   </div>
   <div class="col-md-6 text-center">
   </div>
</li>

Are there any other hooks I should be using?
Or maybe i am approaching this wrong and there is a better way to achieve the side-by-side image and summary layout?

Leave a Reply

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