WooCommerce - excelling eCommerce
[resolved] modify related products thumbnail sizes (6 posts)

  1. Paul de Wouters
    Human Made
    Posted 2 years ago #


    in the settingsm the catalog thumbnail size is 150x150
    the documentation states that the related products use the catalog thumbnail size.
    But you can see here that the related product is using the product thumbnail

    how can I fix this?


  2. berestored
    Posted 2 years ago #

    Hi Paul,

    I am a relatively new woocommerce user, however, I adjusted the percentage at which they were viewed in the woo commerce.css. Be sure to make a backup copy. The file has all the selectors running together but if you have the patience you can break them out so you can actually see each selector individually. Then use Firebug in Chrome to "Inspect Element" and you should be able to find the class or selected that relates to the "related images".

    Link to firebug

    Mine is here:
    .related ul.products li.product img, .upsells.products ul.products li.product img, .related ul li.product img, .upsells.products ul li.product img {
    width: 100%;
    height: auto;

    It gives you the reference (lline number) that it is at in the code. Mine is viewing like this: /shop/productitem/woocommerce.cs:452

    Hope that helps.

  3. berestored
    Posted 2 years ago #

    ** correction: /shop/productitem/woocommerce.css:452

    productitem - being whatever your item name is.

  4. Paul de Wouters
    Human Made
    Posted 2 years ago #

    thanks for your suggestion.
    I chnaged the width to auto instead of 100%

  5. berestored
    Posted 2 years ago #

    You are welcome.

  6. Arial Burnz
    Posted 1 year ago #

    JUST FYI - for those with Mantra Theme
    I was having a similar problem with my shopping cart - related product images too big. A more accurate description of my problem can be found here: http://kaptinlin.com/support/discussion/6234/woocommerce-related-products-size-spacing/p1

    Nutshell: Related product images were HUGE, and though I was able to shrink them down with some code, it wasn't shrinking the clickable area. GAH! However, through hours of trial and error, I used the following code, which I inserted into the Custom CSS area under Miscellaneous Settings in the Mantra Theme

    /* To change the size of the related products thumbnails, which are too large */ 
    .woocommerce .related ul.products li.product, .woocommerce .related ul li.product, .woocommerce .upsells.products ul.products li.product, .woocommerce .upsells.products ul li.product, .woocommerce-page .related ul.products li.product, .woocommerce-page .related ul li.product, .woocommerce-page .upsells.products ul.products li.product, .woocommerce-page .upsells.products ul li.product {
    width: 150px;

    Worked like a charm!! But I was also having problems with only two items displaying in the bottom. However, I used the code mentioned at the end of the post linked above, but made a slight modification. This code below was added to the functions.php file (Appearance > Editor > Mantra Theme > Theme Functions). Be sure to put this PRIOR to the "?>". The question-mark-bracket needs to be the last bit of code on that sheet. ;)

    // Redefine woocommerce_output_related_products()
    function woocommerce_output_related_products() {
    woocommerce_related_products(4,4); // Display 4 products in rows of 4

    I hope that helps anyone who was having the same issue I was.

    Arial Burnz

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • WooCommerce - excelling eCommerce
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic