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!!!
Hi Guys, I have tried this and it did not work. I am in need of someone who can help me with this on my site specifically. Can someone please help me out? Willing to pay.
Sure I can try to help 🙂 can you post a link to one of your product pages? or you can email me at agirlandhermac at gmail