WooCommerce: change related products image size

Remi | July 11, 2014 | in Tips

Many of you asked me how to change the size of the related products displayed on the product page in WooCommerce. Most of the time, adding a little CSS snippet does the trick, but in some cases you would need to use a PHP snippet to be sure that your dimensions are taken into account. For some reason adding CSS to style.css isn’t always enough, so in that case using a few lines of PHP to add CSS code within the page source code directly is necessary. To do so, we’ll need to use the wp_footer hook.

All you have to do is to paste the following code in your functions.php file in your theme’s folder:

The author

About the author Remi: Hey! My name is Rémi Corson, i'm a WordPress Expert Developer, i create high level themes and plugins, and i provide free stuff every week on this website!

9 Comments

  1. Pingback: shop fixes | Brunos Test WP

  2. javo

    Hi there. I´m having a problem with my related products. I did what you say for change related products image size but it keeps showing me jus three products. I tough this was because there was no room for more products but once that I made them smaller, there are just 3 in each row. I put in the code that I need 6 products and 1 row but is no working.
    You can check this here: http://www.finessefinejewelry.com/shop/?product=flower-ring-with-diamonds
    Please help…
    Thanks.

  3. sha123

    Hi Remi, May I know how to use this function to change the sizes of videos instead of images ? I’m using the “featured video plus” plugin to upload the featured video, but I cannot change the sizes from there? Kindly assist me to fix this? Thanks a lot in advance

  4. fistukidz

    hi,
    can you have us with the same thing for upsell products?
    the images are too big (if we change the size in appearance then the image size is smaller but the container is still big)
    we also have a problem with single product image size we want to set a maximum height so the image will not pass a specific height and then if needed it will reduce/sharing the width. (hope its clear)

    thanks.

Leave a reply