WooCommerce - excelling eCommerce
Woocommerce "Single Product Image" help (6 posts)

  1. hondadude
    Posted 1 year ago #


    I'm having trouble with my "Single Product Image" for woocommerce. This is the image when you click a product thumb in the catalog it is the largest or "main" image when your viewing a single product.

    The problem is I'm using a .csv importer and the images are 150x150 they look great as "product thumbnails" and "catalog images" however as the "single product image" they are very distorted. I have tried adjusting the settings such as Hard Crop and the dimensions to no avail.

    I have no other images to use for each product and would like to just be able to get the "single product image" to look good and not distorted with the 150x150 images I have available.

    I have tried adjusting the woocommerce.css file for this but couldn't get any change to work. I also have used the regenerate thumbnail after changing my settings to see how things look. Unfortunately nothing has worked like I had hoped. If anyone can help me I'd appreciate it.

    I'm guessing I will just need to change the .css file to make the "Single Product Image" being displayed smaller but I would like some guidance as to what to change before I mess something up.

    In the past I was able to shrink the upsell products by adjusting the % in the .css file and that worked like a charm.

    Using Magazino theme and my site is ZombieHonda.com

    Thanks for anyone that helps me out!


  2. Roy Ho
    Posted 1 year ago #

    That is impossible to do. Browsers will not just magically add pixels to an image that is too small without blurring the entire image. The other way around is possible where you have a larger image to start with and wanting to reduce it via CSS.

    So in short, you can't do this without making the image look horrible. Especially when it is so small like 150x150.

  3. hondadude
    Posted 1 year ago #

    I understand browsers can't magically add pixels I'm asking if in .css I can change the output size that woocommerce tries to display for "Single Product Image" to the 150x150 or 200x200 so the image isn't distorting as badly.

  4. Roy Ho
    Posted 1 year ago #

    Yes you can change it in CSS but it will blur it out...even at 50 pixels more, you will notice it is not as sharp as your original image.

  5. hondadude
    Posted 1 year ago #

    How can I change it to just 150x150 I'm not worried if it is slightly blurry I just need it a little bit better than the current distorted state

  6. Roy Ho
    Posted 1 year ago #

    It depends on the theme...You should use firebug and inspect the element you want to change and it will show you where it is.

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