Docs

[Rad]

Hi Bill,

There are recent changes with the filter, and the above thumbnail code is no longer applicable. But before we continue, would you mind upgrading to latest X theme and cornerstone? That’s to ensure that the recommendation I’ll provide will match your recent codes.

@Lain , it works, check this screenshot and it shows the size of your image.

Though I guess, you’re referring to old images. Changing your image size will not change your older images (images that are uploaded before you change the size). Hence, you have to install Force Regenerate Thumbnails plugin and regenerate them.

Thanks.

[ptmarketing]

There are recent changes with the filter, and the above thumbnail code is no longer applicable. But before we continue, would you mind upgrading to latest X theme and cornerstone? That’s to ensure that the recommendation I’ll provide will match your recent codes.

Hello, do you have updated thumbnail code that will work with the current version of X?

[Zeshan]

Hi there,

Yes, please try inserting this code:

// =============================================================================
// WooCommerce Shop Thumbnail Size Change to Shop Catalog
// =============================================================================

function x_woocommerce_shop_product_thumbnails_2() {

  GLOBAL $product;
  
  $id     = get_the_ID();
  $thumb  = 'shop_catalog';
  $rating = $product->get_rating_html();

  woocommerce_show_product_sale_flash();
  echo '<div class="entry-featured">';
    echo '<a href="' . get_the_permalink() . '">';
      echo get_the_post_thumbnail( $id, $thumb );
      if ( ! empty( $rating ) ) {
        echo '<div class="star-rating-container aggregate">' . $rating . '</div>';
      }
    echo '</a>';
  echo "</div>";

}

add_filter('init', function() {
  remove_action( 'woocommerce_before_shop_loop_item_title', 'x_woocommerce_shop_product_thumbnails', 10 );
});

add_action( 'woocommerce_before_shop_loop_item_title', 'x_woocommerce_shop_product_thumbnails_2', 10 ); 

Thank you!

[theoutdoorarmory]

Hi,

I am having the same problem with my WooCommerce.

The images’ dimensions here are all over the place: https://theoutdoorarmory.com/brands/gsi-outdoors/

That said, can you please clarify which code should I put on my child theme’s function.php file to:

(1) enable WooCommerce product images dimensions editing
(2) make the thumbsize image processing seamless

Please help. 🙁

[theoutdoorarmory]

Please help 🙁

[Thai]

Hi @theoutdoorarmory,

Please find this CSS under Customizer > Custom > Global CSS:

.woocommerce li.product .entry-featured img {
    max-height: 160px !important;
}

And replace with this:

.woocommerce li.product .entry-featured img {
    max-height: 160px !important;
    width: auto;
    min-width: auto;
    margin: 0 auto;
    display: block;
}

Hope it helps 🙂

[theoutdoorarmory]

Hi,

Still not working here on this url:

https://theoutdoorarmory.com/brands/gsi-outdoors/

I’ve also attached a screen cap showing I already replaced the CSS code.

Hope you could help me do a 4 columns of products in the page.

Thanks

[Lely]

Hi There,

Please also add this custom CSS:

.archive.woocommerce li.product {
    width: 22%;
}

Hope this helps.

[theoutdoorarmory]

Thank you so much!

[Thai]

You’re most welcome 🙂

[Wade S]

Hi,

Ok, so I am having the same problem as the above conversations. I built a test site for our main website in order to change things and test them before going public. I took the time to make a child theme as suggested, added all the code that was suggested to add to editor as well as CSS. The Product Image section of the Woocommerce /Settings/Product/Display is visible, but no matter any changes I input, no of the pictures resize. I am at a complete lost now. I am hoping someone can take a look at the site and give me some wise words of advice as to what to do. I have Force Regenerated numerous times, but to no avail.

The link is http://test.okashiconnection.com/shop-2/

Thanks for any feedback,

Scott

[Darshana]

Hi Scott,

It seems that you’re using different image sizes/resolutions which cause this. Please follow this guide (https://docs.woothemes.com/document/using-the-appropriate-product-image-dimensions/).

Hope that helps.

[theoutdoorarmory]

Just chime in the conversation.

This is weird because I didn’t follow this: https://docs.woothemes.com/document/using-the-appropriate-product-image-dimensions/

I just added this CSS:

.archive.woocommerce li.product {
width: 22%;
}

And everything worked just fine.

How come?

[Rue Nel]

Hello There,

The given solution is just using a custom css code which resized your images and this is why it applies in your site. The one mention on the WooCommerce documentation is a different solution. You can always choose which one is more easier and you feel comfortable with.

Thank you for your understanding.

[theoutdoorarmory]

Perfect thanks!

[Author]

Posts