Problems with WC image display

  • Resolved Robby Barnes

    (@robby-barnes)


    1 day, 16 hours ago

    Recently there have been problems with product image and thumbnail image displays on my site. Images appear as unequal size and/or in vertically compressed form. Both Desktop and Mobile displays are affected.

    I contacted my WP theme’s developers, who were understanding and cooperative. They were able to make changes which improved the display somewhat but it is still far from acceptable.

    For an example, please see the desktop and mobile display for the page linked here.

    Here are some things I have tried that didn’t help:

    • Deactivated all plugins other than WooCommerce
    • Cleared browser and server caches
    • Edited images to 900×900 px size
    • Used Customizer with all possible options under Product Images, including aspect ratio and pixel width

    Looking further for a solution I tried putting m site on the WooCommerce default theme, Storefront.

    That solved the image problem completely.

    I have posted a copy of my Woo system status report at

    https://pastebin.com/femxAWhu

    I can think of two solutions to the problem but am very open to other suggestions…

    My first idea would be to create a new WordPress site on a subdomain, put it on the WC Storefront theme and migrate the current WooCommerce store to it.

    My second idea would be to move my entire site to a child theme of the WC Storefront theme. It would need to be customized to reproduce the customizations of the child theme currently in use.

    I would be grateful for any and all thoughts and suggestions for dealing with this problem.

    Robert Barnes

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support shahzeen(woo-hc)

    (@shahzeenfarooq)

    1 day, 6 hours ago

    Hi @robby-barnes !

    Thank you for providing detailed information about the issue and the troubleshooting steps you’ve already taken.

    I checked the page you shared, and I can see that the product images are being displayed with a width of 200px and a height of 300px. Additionally, the CSS property object-fit is set to fill, which causes the images to be stretched vertically and appear compressed. You can see this in the following screenshot:

    https://go.screenpal.com/watch/cO1b1DnupzX

    Since the issue disappears when using the Storefront theme, this suggests that the image styling is being applied by your current theme rather than WooCommerce itself.

    If you’d like all product images to display at a consistent size without distortion, the image container should use equal dimensions (for example, 200px × 200px), and object-fit should be set to contain instead of fill.

    If this styling is being added through custom code, you can update it accordingly. Alternatively, if your theme provides image sizing options in its settings, you may be able to adjust these values there without modifying code.

    Based on what I’m seeing, this appears to be a theme-related styling issue rather than a WooCommerce issue, so your theme developer may be best positioned to help implement the necessary CSS changes.

    Alternatively you can try to use the following css code.

    .archive.woocommerce ul.products li.product a img{
        width: 200px;
        height:200px;
        object-fit:contain;
    }

    Note: I would like to clarify that in this forum, we only provide support for WooCommerce core features. Issues related to styling or layout control that are handled by the theme or page builder you are using on your site fall outside our support scope. In your case, your theme provider should be able to help resolve this issue.

    Thank you for your cooperation and understanding.

    Thread Starter Robby Barnes

    (@robby-barnes)

    20 hours, 19 minutes ago

    Huge thank you, shahzeen.

    I added the custom CSS you recommended and it fixed the distortion problems. I still need to equalize the original image sizes but that is no problem.

    Appreciatively,

    Robby Barnes

    Plugin Support shahzeen(woo-hc)

    (@shahzeenfarooq)

    6 hours, 34 minutes ago

    Hi @robby-barnes!

    I’m so glad we were able to get that sorted for you! If you’re happy with the support you received today, would you consider leaving us a quick review? It really helps us out: https://wordpress.org/support/plugin/woocommerce/reviews/#new-post

    Thank you

Viewing 3 replies - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.