Support » Theme: Storefront » Product page image problem

  • Resolved jimblandford


    I have a problem where on the product page the thumbnail does not fill the area it is supposed to, see screen 1. When mouse over, the magnified area of the image fills the thumbnail area, see screen 2.

    This happens for all products.

    I think it happened when I updated to WC 3.3, but not 100% sure on this.

    I have tried the Regenerate Thumbnails plugin and ran it for all attachments, but this did not solve the problem.

    Any help much appreciated. Thank you.

    • This topic was modified 2 years, 9 months ago by jimblandford.
    • This topic was modified 2 years, 9 months ago by jimblandford.
    • This topic was modified 2 years, 9 months ago by jimblandford.

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

Viewing 10 replies - 1 through 10 (of 10 total)
  • Job


    Automattic Happiness Engineer

    Hi @jimblandford – I’ve had a look at your site and it seems that you’ve got quite a bit of custom code running on the Storefront template, how did you implement these changes? I’d suggest first checking if you can temporarily disable the customization to see if it still causes a problem and then reenabling the lines one by one to see if that fixes it.

    Hi @jobthomas How to temporarily disable the customization?



    Automattic Happiness Engineer

    @bogavanda – I’d use the Health Check plugin – under “Troubleshooting”. Make sure to make a good backup first.

    If you’ve used a child theme for the customizations, it’s a matter of switching to Storefront rather than your child theme. So it also depends a bit on how you’ve made the customizations.

    Thank you. Now it seems my problem is more complex.
    Customization does not work (does not load at all), product quick edit does not work at all, price option does not show at all…..

    will try to find other solution.

    • This reply was modified 2 years, 9 months ago by bogavanda.


    Automattic Happiness Engineer

    You mean while using the Health Check plugin @bogavanda? Because that doesn’t sound good. If you’re a paying customer at WooCommerce we could help you at > Tickets.

    @jobthomas thank you for the reply. I have installed Health Checker plugin and enabled Troubleshooting mode. Enabling only the Storefront Theme and WooCommerce, this is what I get.

    Screen 3 (no plugins)

    Screen 4 (no plugins & mouse over zoom)

    And on a product with more than 1 image in the product gallery

    Screen 5 (no plugins)

    Screen 6 (no plugins & mouse over zoom)

    As you can see the problem persists. Looking at screen 3 I thought the magnifying glass was meant to be alongside the image separately, but on mouse over zoom (screen 4) it still fills the area. Furthermore on the product with multiple images (screen 5), the thumbnail gallery extends further right to inline with the magnifying glass?

    I don’t know if this is how things are meant to look since WC 3.3 with the selected image not filling the area?

    It used to fill the area, and the magnifying glass was an overlay on top of the image?



    Automattic Happiness Engineer

    Hey @jimblandford – it seems that you still have some custom CSS active on your site:

    Link to image:

    If you change that and add the width to be 100% at least that part will be sorted. Did you add custom CSS to the img selectort? Because they currently are restricted by that.

    Theme Author Automattic


    Hey – that’s actually coming from Storefront core. It’s still connected to some overrides as well, it’ll be fixed in the next version of Storefront.

    • This reply was modified 2 years, 9 months ago by Automattic.

    Thank you @automattic

    I updated to 2.2.8 a few days ago IIRC, but the “bug” still exists. When do you think the next version of Storefront with the fix will be available please?

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Product page image problem’ is closed to new replies.