You can make the featured image full width on the product page with a CSS-only snippet that removes the default two-column layout, stacking the image above the title, price, and Add to Cart button instead.
Why Go Full Width With the Featured Image
- Creates a stronger visual hero moment for products where photography does the selling
- No PHP or template changes required, just CSS
- Works well combined with a large, high-resolution product gallery
- Pushes the buying decision (title, price, Add to Cart) below a strong visual first
Step 1: Apply the Full-Width Layout CSS
/** Stack the featured image full-width above the product summary */
.woocommerce div.product div.images,
.woocommerce-page div.product div.images,
.woocommerce 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%;
}
Troubleshooting
The image looks pixelated at full width
Your uploaded catalog image resolution is likely smaller than the space it now fills — increase the catalog image width under Appearance > Customize > WooCommerce > Product Images, then regenerate thumbnails for existing products.
Layout looks correct on desktop but breaks on mobile
Most themes are already single-column on mobile by default, so this CSS shouldn’t conflict — if it does, check for a theme-specific mobile breakpoint rule that needs its own override.
Frequently Asked Questions
Do I need to edit any template files for this?
No, this is a CSS-only change — add it to your theme’s Additional CSS panel or child theme stylesheet without touching any PHP template files.
Will this affect every product, or can I apply it selectively?
As written it applies sitewide. To target specific products, wrap the CSS rule with a body class conditional output only on chosen product pages via a small PHP snippet.
Does this work with gallery zoom and lightbox features?
Yes, since this only changes layout width, not the gallery’s underlying JavaScript — zoom and lightbox functionality should continue working normally.
Conclusion
A short CSS snippet is all it takes to make the featured image full width on the product page for a bolder, photography-first layout. Just remember to increase your catalog image size afterward so the larger display doesn’t look stretched or blurry.
See also How to Change Product Image Sizes in WooCommerce. Then read How to Link the Featured Image to an External Product URL.
Prefer no code? All-in-One Utilities Woo Add-on adds over 50 WooCommerce features, so you can switch them on without code.