WooCommerce shop page customization using hooks to add new divs with custom classes

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 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?

Read more here:: WooCommerce shop page customization using hooks to add new divs with custom classes

Leave a Reply

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