Woocommerce Responsive Product Image

I want to make the product image responsive with class=”img-fluid” but I keep getting an output with inline width and height. I want to remove that but I can’t seem to find the correct hook. The HTML looks like this:

<img width="357" height="252" src="http://localhost:8888/wordpress/wp-content/uploads/2017/05/LCL_WEB-_31.png" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="" srcset="http://localhost:8888/wordpress/wp-content/uploads/2017/05/LCL_WEB-_31.png 357w, http://localhost:8888/wordpress/wp-content/uploads/2017/05/LCL_WEB-_31-300x212.png 300w" sizes="(max-width: 357px) 100vw, 357px">


 .imagewrapper > img{
  max-width: 100% !important;

Here is the code I found and implemented into my functions.php that makes it somewhat responsive but it’s not as clean as using the bootstrap “img-fluid” class. I’m thinking the inline style is messing this up but I can’t figure how to get rid of it.

remove_action( 'woocommerce_before_shop_loop_item_title', ' 
woocommerce_template_loop_product_thumbnail', 10);
add_action( 'woocommerce_before_shop_loop_item_title', 
'woocommerce_template_loop_product_thumbnail', 10);

if ( ! function_exists( 'woocommerce_template_loop_product_thumbnail' ) 
) {
function woocommerce_template_loop_product_thumbnail() {
    echo woocommerce_get_product_thumbnail();
if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) {   
function woocommerce_get_product_thumbnail( $size = 'shop_catalog', $placeholder_width = 0, $placeholder_height = 0  ) {
    global $post, $woocommerce;
    $output = '<div class="imagewrapper">';

    if ( has_post_thumbnail() ) {               
        $output .= get_the_post_thumbnail( $post->ID, $size );              
    $output .= '</div>';
    return $output;

Read more here: Woocommerce Responsive Product Image

Leave a Reply

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