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.

storefront product page with sidebar

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.

storefront product page without sidebar

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.

storefront product page without sidebar full width

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

How useful was this post?

Click on a smiley to rate it!

Average rating 5 / 5. Vote count: 4

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

1 thought on “Product pages without sidebar and full width with StoreFront Theme”

  1. This is very helpful for individual product pages, if I want to keep the sidebar for the main shop page/product catalog, how to exclude that page from the sidebar being removed?

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top