Last Updated on July 3, 2019

Make WooCommerce Product Images Fullwidth

Sep 6, 2018 | Woo | 5 comments

Post Views: 4,911

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

Make WooCommerce Product Images Fullwidth

After

Make WooCommerce Product Images Fullwidth

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.

5 Comments

  1. Francesco
    Francesco on October 17, 2018 at 2:29 pm

    Thanks, with this page you save my life!!!

  2. Quy
    Quy on November 7, 2019 at 9:32 pm

    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.

    • Leslie
      Leslie on November 8, 2019 at 7:50 am

      Thanks Quy, that’s a great tip!

  3. Zarin
    Zarin on December 3, 2019 at 12:25 pm

    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?

    • Leslie
      Leslie on December 5, 2019 at 12:03 pm

      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;
      }
      }