View my basket

How to fix WP Astra’s WooCommerce featured image bug

We noticed recently that there was a bug with the WP Astra theme. Specifically how it rendered a product’s featured image in Firefox at 80% width.

The issue is that in a Firefox browser, the choice of the decerning developer ;-), the WP Astra theme was setting the image width to 80%, resulting in a goofy-looking product page.

WP Astra WooCommerce image width bug
WP Astra’s WooCommerce/Firefox image bug results in the image being displayed at 80% width, rather than 100%.
WP Astra WooCommerce image bug CSS
WP Astra’s broken CSS

We’ve been pushing for the fix to be released in the next versions of WP Astra, but to date, nothing has been forthcoming.

Thankfully, the fix for this, if you’re facing it, is a simple bit of CSS that you can put into your style.css in your child theme.

Just add the following and you’re good to go!…

@-moz-document url-prefix() {
    .woocommerce-js div.product div.images img{
       width: 100%;
   }
}

Leave a comment