1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

[woocommerce] Image deformed on product page

Discussion in 'Web Design' started by Boriss, Mar 26, 2015.

  1. Boriss

    Boriss Elite Member

    Joined:
    Nov 7, 2009
    Messages:
    1,504
    Likes Received:
    597
    Location:
    Inside a Monitor
    Hi guys,

    I'm working on a client's ecommerce site, which uses woocommerce and I stumbled upon a issue on the product page.

    I have to mention the image is a bit large, but I don't think that is the problem.

    The issue is, when I uploaded the image as featured, and went to the product URL, the image is like this:
    asNsEmv.png

    deformed or how should I call it. Tried with different size images but the issue is persistent.

    Any help would be appreciated.
     
  2. WPRipper

    WPRipper Supreme Member

    Joined:
    Mar 24, 2010
    Messages:
    1,404
    Likes Received:
    1,530
    Location:
    Proudly romanian
    Check the image size in woo settings.
     
    • Thanks Thanks x 1
  3. Boriss

    Boriss Elite Member

    Joined:
    Nov 7, 2009
    Messages:
    1,504
    Likes Received:
    597
    Location:
    Inside a Monitor
    Thank you for the fast reply.

    I fixed it thanks to you WPRipper. TY.
     

    Attached Files:

    Last edited: Mar 26, 2015
  4. Gogol

    Gogol Jr. VIP Jr. VIP

    Joined:
    Sep 10, 2010
    Messages:
    3,478
    Likes Received:
    3,108
    Gender:
    Male
    Try placing the following css rule in your stylesheet:

    Code:
    .woocommerce img, .woocommerce-page img {
        height: auto;
        max-width: 100% !important;
    }
    
    Clear site and browser cache and see if this solves the problem.
     
    • Thanks Thanks x 1
  5. WPRipper

    WPRipper Supreme Member

    Joined:
    Mar 24, 2010
    Messages:
    1,404
    Likes Received:
    1,530
    Location:
    Proudly romanian
    Yes and no. Play with settings and see what you need to do. Upload images with that size or multiply by ... The should keep the ratio. Also install regenerate thumbnails plugin.
     
    • Thanks Thanks x 1