How Do I Make WooCommerce Single Product Page Full Width?

The default WooCommerce product page layout is pretty basic and not very attractive. If you want to dress it up a bit, you can make a few changes to the CSS.

One way to do this is to make the WooCommerce product page full width. This is easily done with a few lines of CSS.

First, you need to add this CSS to your theme’s stylesheet:

#content {
float: none;
width: 100%;
}
#sidebar {
float: none;
width: 100%;
}

This will make the content area and the sidebar area both full width. Next, you need to add some CSS to make sure that the product image and product summary are both centered within the content area. Add this CSS to your theme’s stylesheet:

.woocommerce-product-gallery {
float: none;
margin: 0 auto;
}
.woocommerce-product-gallery__wrapper {
text-align: center;
}
.woocommerce-product-gallery--with-images .woocommerce-product-gallery__wrapper {
display: inline-block;
}
Finally, you need to add some CSS to style the product title and price. Add this CSS to your theme's stylesheet:
h1.product_title { text-align: center; }
div.product_meta { text-align: center; }
span.price { display: block; text-align: center; }

With these changes, your WooCommerce product pages will have a much more professional look.