How to Remove WooCommerce Sidebar the Right Way

Do you want to remove the WooCommerce sidebar? If you’re looking to tweak your WooCommerce store further, modifying the sidebar options is one of the best things to try. If you’re unsure how to do it properly, continue reading this article.

Here, we will show you the step-by-step process you can use to remove the sidebar from the installation.

Before going further, let’s see what sidebars are.

What are Sidebars?

A sidebar is a narrow column on the side of a web page that often contains additional information or features related to the page’s content. In the context of WooCommerce, the sidebar typically displays product categories, cart information, and other relevant elements associated with the online store.

WooCommerce sidebars are designed to help customers navigate the online store and make their shopping experience more user-friendly. By displaying product categories and other information in the sidebar, customers can quickly find the products they want and add them to their cart.

While sidebars can be helpful for some websites, they can also be distracting or unnecessary for others. Some website owners may prefer a cleaner and minimalist design that does not include a sidebar. In such cases, removing the WooCommerce sidebar can help simplify the website’s design and improve the user experience.

Why Remove WooCommerce Sidebars

There are several reasons why website owners may choose to remove the WooCommerce sidebar from their online store:

• Simplify website design: By removing the sidebar, which can help create a cleaner, more minimalist look for your website. This can improve your website’s overall look and feel, making it more visually appealing and easier to navigate.
• Improve page loading speed: Sidebars can increase the page loading time on your website. Removing the sidebar can improve page loading speed, leading to a better user experience and higher search engine rankings.
• Focus on the product: By removing sidebar distractions, you can direct your customers’ attention to the product. This can help improve your conversion rates and drive more sales.
• Create a more mobile-friendly website: Sidebars can be challenging to navigate on mobile devices with smaller screens. You can make your website more mobile-friendly and easier for customers to use on their devices by removing the WooCommerce sidebar.

Now you know why removing sidebars is a good option. Next, let’s see how to complete the task.

How to Remove WooCommerce Sidebars?

There are several methods to remove the WooCommerce sidebar from various locations within your store. You can remove the WooCommerce sidebar from the following:

• entire store
• individual product pages
• shop page
• static pages

We will explore these options one by one. However, we will deal with a few lines of PHP code in these tasks. We highly recommend taking a complete backup of your WordPress site before performing any of these tasks. Alternatively, you can create a local WordPress installation to test your code.

Without any further ado, let’s get into the tutorial.

1) From the Entire Store

Follow this method to remove the sidebar from your entire store. To begin, log in to your WooCommerce store and open the theme editor.

By default, the page opens the style.css file. Now, from the right-hand side, choose the functions.php file.

Next, add this code to your functions file:

function disable_woo_commerce_sidebar() {
remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10); 
}
add_action('init', 'disable_woo_commerce_sidebar');

Once you have added the snippet, update the file.

This code adds a filter to the WooCommerce product add-to-cart section, removing the sidebar from all WooCommerce pages.

By removing the WooCommerce sidebar from the entire store, you can provide your customers with a streamlined shopping experience, focusing solely on your products.

NOTE: Instead of editing your functions.php file directly, you can also use the Code Snippets plugin. This way, you can ensure the custom code you have added won’t be replaced after a theme update.

2) From Individual Product Pages

Removing sidebars from individual product pages is the next step to consider. To accomplish this, open the functions.php file or the Code Snippets plugin. From now on, we will start using the Code Snippets plugin. Next, copy this code:

add_action( 'wp', 'ql_remove_sidebar_product_pages' );

function ql_remove_sidebar_product_pages() {
if ( is_product() ) {
remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
}
}

Paste the snippet inside the plugin settings and activate it.

Now you are done with it!

If you check the individual product pages you have on your WooCommerce store, you won’t see a sidebar on the left-hand or right-hand side. If you are using the Storefront WordPress theme, you should use this code:

add_action( 'get_header', 'ql_remove_storefront_sidebar' );

function ql_remove_storefront_sidebar() {
if ( is_product() ) {
remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
}
}

Next, let’s move on to the final topic: how to remove the sidebar from your entire shop archive.

3) From the Shop Page

If you want to remove the WooCommerce sidebar from the shop page specifically, follow this guide. Some WordPress themes come with a dedicated settings panel. From there, you can tweak every inch of your WordPress website. In our dummy WordPress installation, we use the popular Astra theme.

It includes dedicated theme options. If you check the customizer, you will see dedicated WooCommerce settings.

There, open the Product Catalog option.

Next, open the sidebar customization options and select “No Sidebar”.

After selecting the no sidebar option, publish the updates.

This way, you can remove the sidebar from your shop page. Since it doesn’t include any coding, the method is feasible for most beginners.

4) From Static Page

The newest WordPress themes include full-width templates without sidebars. You can use one of these templates on your website as a static page. It only takes a few minutes to change the style. Here’s how you can do it.

First, open the page you need to apply a full-width template. Once you have done that, on the right-hand side, you will see an option to Page Attributes > Template.

From the dropdown, choose Full Width Template.

Once you have selected the item, publish (or update) the page.

Now, check your page from the front end to see a sidebar-less custom page. You can do this manually for every page you need to remove the sidebar from.

How to Hide the Sidebar with CSS

If you do not need to remove the sidebar with a custom code snippet completely, you can use CSS to hide the sidebar.

Here is the CSS code you need to use:

.right-sidebar .widget-area {
  display: none;
}
div#primary {
  width: 100%;
  margin-right: 0;
}

Once you have pasted this code into your child theme or additional CSS section, update the file. Now, check the website from the front end, and you will see that the sidebar will be obliterated.

NOTE: If the code above does not work, contact the theme’s customer support. They will be able to help you with the right div class.

How to Remove Sidebar Using Full Site Editing (Block Themes)

For users on block-based (FSE) themes, you can remove the sidebar without touching PHP:

1. Go to Appearance → Editor.
2. Navigate to the Template for Shop/Product.
3. Select the sidebar column and remove the column block.
4. Save changes.

This modern approach works beautifully for users on themes.

Bonus: Best WordPress Sidebar Plugins

If you want to use plugins for dealing with sidebar customization, check out these options.

1) WP Sticky Sidebar

If you need to create a sticky sidebar widget on your website, you should use WP Sticky Sidebar. With this tool, you can create floating sidebars without touching a single line of CSS code. It is a lightweight tool, so the website’s speed and performance won’t be affected.

Another notable feature of the WP Sticky Sidebar is that you can use the plugin with any WordPress theme you would like. The tool is compatible with most themes available on the market. You can add CSS code to your sticky sidebar through the plugin’s settings. This is an excellent option for customizing the sidebar further.

Finally, if you need to disable floating sidebars on any posts, pages, or custom post types, that’s possible too.

Features

• Makes any sidebar or widget area stay visible while scrolling.
• Allows you to set custom top and bottom margins.
• Let’s you disable sticky behavior on mobile or specific screen widths.
• Works with most WordPress themes using simple CSS selectors.
• Lightweight plugin that doesn’t affect site performance.

Pros

• Enhances user experience by keeping important widgets always visible.
• Easy to configure with minimal setup required.
• Responsive design ensures smooth behavior on different devices.
• The free version includes essential sticky functionality without limitations.

Cons

• May require manual CSS selector input for some themes.
• Limited compatibility with specific block-based or custom layout themes.

The plugin is a freemium tool, and if you are interested in the free version, check out the repository.

The premium version will cost you $19 a year and can be downloaded from here.

2) Custom Sidebars

If you need to take your sidebar customization to the next level, you should check out Custom Sidebars. This plugin enables you to create custom sidebars for individual posts and pages. The plugin comes with minimal configuration and doesn’t require any coding knowledge. Thankfully, the plugin also helps you import/export the configuration options between WordPress websites,

So if you have a website and need similar customization options, you can easily use the import/export feature. Based on the user roles, you can also set visibility options.

Features

• Create unlimited custom sidebars for posts, pages, and categories.
• Assign different sidebars to specific post types or taxonomies.
• Clone, sync, or import/export sidebar settings easily.
• Simple drag-and-drop management using the classic Widgets screen.
• Control sidebar visibility based on user roles or conditions.

Pros

• Offers granular control over where each sidebar appears.
• Works seamlessly with most classic WordPress themes.
• Easy to use with a familiar widget-based interface.
• Completely free with plenty of advanced features.

Cons

• Not fully compatible with block themes or the new Site Editor.
• Requires the Classic Widgets plugin for WordPress 5.8+ sites.

Custom Sidebar is a free tool. You can download it from the WordPress plugins repository.

Frequently Asked Questions

Now, let’s take a look at some of the frequently asked questions and answers regarding the topic.

Conclusion

WooCommerce sidebars can be removed. When you need to utilize 100% of the available space for your products, removing the sidebar is a feasible option.

When you use WordPress, you will have total control over the website. As you have seen in this article, there are multiple approaches to removing the sidebar.

You can remove the sidebar from

• from your entire store
• individual pages
• the store pages
• static pages

You only need to use a dedicated plugin or add some custom code. However, we recommend you generate a complete website backup before working with the code. As per your requirements, you can deal with the sidebar and remove it from your website.

We hope you have found this article helpful and enjoyed reading it. If you did, please consider sharing this post with your friends and fellow bloggers on social media.

Similar articles you might like:

• How to Create a Custom Sidebar in WooCommerce
• Best WooCommerce Code Snippets for WordPress
• How to Limit WordPress Post Revisions (with and without Plugins)