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 Supreme Member

    Joined:
    Nov 7, 2009
    Messages:
    1,427
    Likes Received:
    562
    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,399
    Likes Received:
    1,524
    Location:
    Proudly romanian
    Check the image size in woo settings.
     
    • Thanks Thanks x 1
  3. Boriss

    Boriss Supreme Member

    Joined:
    Nov 7, 2009
    Messages:
    1,427
    Likes Received:
    562
    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,408
    Likes Received:
    3,056
    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,399
    Likes Received:
    1,524
    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