How to remove the WooCommerce sidebar

In this tutorial we are showing you how to remove the sidebar from the WooCommerce shop pages.

Your WooCommerce shop pages contain a sidebar that is used to display a number of different elements. The sidebar is a vital part of your WooCommerce store and customers often use this area to locate the categories and products they may be looking for, so you will need to think carefully before removing it. However, there are some situations when you might prefer to remove the WooCommerce sidebar. A product page is a good example of a page where the sidebar doesn’t need to be displayed. Removing the sidebar from your WooCommerce shop pages can be useful if you are trying to reduce the amount of space taken up by this element. Also, visitors have a tendencies to ignore sidebars most of the time, so they don’t always help the user navigate through the website.

Removing the sidebar via the theme settings

WooCommerce allows you to customize the layout of your shop page is several ways. One of the methods is to remove the sidebar using the WordPress theme settings option. If you are using a dedicated WooCommerce theme its possible that the theme developers have already created an option to change the layout for either all pages or specific WooCommerce shop page with the remove sidebar option. This will be labeled something like “full width page” or “no sidebar single product page”. The option should be somewhere in the themes’ settings panels or the WordPress customiser panel. It is best to refer to the themes’ documentation and user guide.

Removing the WooCommerce sidebar with code

Now let’s see how to remove the sidebar form the WooCommerce product page using CSS and PHP code. WooCommerce has hooks that allow you to add or remove blocks of code from the templates (API Docs). To remove the sidebar menu using PHP code we are going to use the remove_action action like this:

remove_action( ‘woocommerce_sidebar’, ‘woocommerce_get_sidebar’, 10 );

If you want to remove the sidebar from the single product page only you will need to first check if the page is single product page and then apply the remove action. Like in the following code snippet:

add_action( 'wp', 'my_remove_sidebar_product_pages' );

function my_remove_sidebar_product_pages() {

  if ( is_product() ) {

    remove_action( 'woocommerce_sidebar','woocommerce_get_sidebar', 10 );

  }

}

To remove the sidebar, you can place the above code snippet it into your functions.php file of your WooCommerce child theme, or alternatively via a dedicated WordPress code snippets plugin. Whichever method works best for you, just make sure that the code won’t be deleted the next time you update your theme or plugins.

For the WooCommerce Storefront theme the code is almost identical as above, you just need to apply the action to the get header instead:

add_action( ‘get_header’, 'my_remove_sidebar_product_pages');

This should remove the sidebar from the single product shop page.

Alternatively if you are not comfortable with adding PHP code to your WordPress theme, you might consider removing the sidebar with CSS code. The basic approach is to set display: none; to the sidebar and to make the content area width to full width e.g. 100%. However this method is not recommended as this is not actually removing the sidebar but just hiding it from the shop page.

Conclusion

Generally, sidebars are important part of any ecommerce website. But as always there are some exceptions. For shops that have few products with long and descriptive single product pages, having a sidebar can make the page somewhat overwhelming and cluttered. The shops with this type of products can be easily improved by removing the sidebar or creating a custom sidebar. We hope you find this tutorial useful.