Last Updated on July 3, 2019
Make WooCommerce Product Images Fullwidth
This is a quick CSS snippet that will make the top part of your WooCommerce single product pages into one column instead of two, making the images and pricing info fullwidth.
If you want more focus on your images than the two-column layout allows this may be helpful.
Before
After
css code
The CSS can go in your child stylesheet OR appearance > customize > additional CSS OR Divi theme options > custom CSS box.
/**********************************************************/
/******** REMOVE COLUMNS FROM SINGLE PRODUCT PAGE *********/
/**********************************************************/
#product .woocommerce .clearfix {
display: flex;
flex-direction: column;
}
.woocommerce .product .summary {
background: #f5f5f5; /* background color of the details/pricing area */
padding: 30px;
}
.woocommerce div.product div.images.woocommerce-product-gallery,
.woocommerce div.product div.summary {
width: 100%;
}
.woocommerce div.product div.images .flex-control-thumbs li {
width: 10%;
}
.woocommerce div.product .woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n+1) {
clear: right;
}
.woocommerce div.product div.images .flex-control-thumbs li:nth-of-type(4n) {
margin-right: 6.6666%;
}
Notes:
- Personally I think this works best with landscape-oriented photos rather than portrait (wide over tall) because the longer photos take up quite a bit of space, but totally up to you.
Thanks, with this page you save my life!!!
thanks much… it works in my case…
but add to that above code is if anyone sees their gallery looks blur when using the above, it is b/c you have set the Main image width too small (go to Customize->Woocommerce->Product Image). To fix this, try to increase Main image width to 900 and you will see it display nicer in your product page.
Thanks Quy, that’s a great tip!
Nice work but the Add to cart button and the number of the products added to cart field collasps in mobile view of 320px. Can you please solve that issue?
Hi Zarin! Unfortunately because we added a background color we also have to add some padding to the summary area (the 30px), this is what’s making that space tighter. If you remove that on small phones all the text will be touching the sides and not look right (because of the background color). It’s normal for elements to collapse when the width of the window is too skinny.
I’d suggest leaving it collapsed but you could add a margin above the add to cart button so that the quantity box isn’t touching it, and you could also reduce the padding if you’d like:
@media only screen and (max-width: 320px) {
.woocommerce .product .summary {
padding: 10px;
}
.woocommerce div.product form.cart .button {
margin-top: 10px;
}
}