Full Width Featured Image on Single Product Page

The Default layout for the WooCommerce single product page contains 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 , You can simply add the following CSS snippet.

/**
 * @snippet       Full Width Product Image on Single Product
 * @author        codeithub
 */
 
.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%;
}

Before:

See also  Removing Jetpack CSS to Boost Speed
Default single Product page Layout

After:

Full width feature image

Leave a Reply

Your email address will not be published. Required fields are marked *