WooCommerce: Full Width Featured Image @ Single Product Page

The standard layout for the WooCommerce single product page features the main/featured product image on the left and the title/add to cart on the right. But what if you need to turn that image into a hero one i.e. a full width featured image, and push the title and add to cart button under it?

Well, for once, we’ll take a look at a CSS-only snippet. Sometimes the easiest things are also the ones that work brilliantly. Enjoy!

CSS Snippet: Full Width Featured Image @ WooCommerce Single Product Page

Please note – once your featured image goes to full width, it might look pixelated. This is because you’ve likely set a featured image width that is lower than the website full width (“WP Dashboard > Appearance > Customize > WooCommerce > Product Images”) and therefore CSS stretches it badly.

/**
 * @snippet       Full Width Product Image @ Single Product
 * @how-to        Get tutoraspire.com FREE
 * @author        Tutor Aspire
 * @testedwith    WooCommerce 3.9
 * @donate $9     https://www.tutoraspire.com
 */

.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images, .woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
float: none;
width: 100%;
max-width: unset;
clear: both;
}

.woocommerce-product-gallery img {
width: 100%;
}