WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. Paul de Wouters
    Human Made
    Posted 1 year ago #

    Hi

    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
    http://redace.wpengine.com/buy-now/shop/bike-display-pack/

    how can I fix this?
    thanks

    http://wordpress.org/extend/plugins/woocommerce/

  2. berestored
    Member
    Posted 1 year 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
    https://chrome.google.com/webstore/detail/firebug-lite-for-google-c/bmagokdooijbeehmkpknfglimnifench

    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
    Member
    Posted 1 year ago #

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

    productitem - being whatever your item name is.

  4. Paul de Wouters
    Human Made
    Posted 1 year ago #

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

  5. berestored
    Member
    Posted 1 year ago #

    You are welcome.

  6. Arial Burnz
    Member
    Posted 11 months 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

About this Topic