Product pages without sidebar and full width with StoreFront Theme

In this new WooCommerce customization guide we are going to solve a common problem in online stores with the StoreFront theme, the default theme for WooCommerce.

I really like the StoreFront theme, it is one of the best without a doubt, but it lacks customization options that other themes do offer.

One of the things I find most annoying is not having a setting in the customizer or anywhere to configure the product pages to be full width, without sidebar.

This, which is very easy to achieve in the store page, shopping cart or finish shopping, changing the page attributes, is not easily done with any option for the product pages, as they are not pages, but a type of content: product.

But everything has a solution in WordPress.

If you want your product pages to have no sidebar and display at full width, you’ll need a couple of steps to make them perfect.

Remove the sidebar

To start, add this code at the end of the functions.php file of the StoreFront child theme.

// Storefront product pages without sidebar 
add_action( 'get_header', 'remove_storefront_sidebar' ); function remove_storefront_sidebar() { if ( is_product() ) { remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 ); } }Code language: JavaScript (javascript)

When you save your changes you will have removed the sidebar from the product page, but there is still a small adjustment to make it full width.

Because, yes, the sidebar disappears, but it leaves a blank space on the right, and it looks awful.

Force the full width

So the second and final step is to add some CSS in the WordPress customizer (Appearance > Customize), this one:

/* Storefront product pages full width */ 
body.woocommerce #primary { width: 100%; } body.woocommerce.single-product #primary { width: 100 %; }Code language: CSS (css)

Now it’s perfect, without a sidebar and at full width.

Read this post in Spanish: Páginas de producto sin barra lateral y de ancho completo en StoreFront #SemanaWooCommerce