Woocommerce "Single Product Image" help

  • Hello,

    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 150×150 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 150×150 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!

    https://www.ads-software.com/plugins/woocommerce/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Roy Ho

    (@splashingpixelscom)

    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 150×150.

    Thread Starter hondadude

    (@hondadude)

    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 150×150 or 200×200 so the image isn’t distorting as badly.

    Roy Ho

    (@splashingpixelscom)

    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.

    Thread Starter hondadude

    (@hondadude)

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

    Roy Ho

    (@splashingpixelscom)

    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.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Woocommerce "Single Product Image" help’ is closed to new replies.