WooCommerce can be a little tricky when dealing with the WordPress sidebar positioning and display. If you’re looking for a way to disable the WooCommerce sidebar, and make your Woocommerce pages full-width, get ready to do some tweaking! We will cover the right and wrong ways to disable or remove the sidebar from your Woo Pages, and make your shop look awesome! But first, let’s see how you can enable the sidebar, in case you messed something up.

Using one of our Themes?

If you are using one of our Podcast Themes, for example the Tusant WordPress Theme, you can easily change the WooCommerce settings in the page you use as the shop page under the “Page Options” panel. Also, you’ll find a bunch of additional settings in the “Appearance > Customize” screen.

Enabling the Sidebar

The WordPress sidebar should be active by default. If not, you might need to go to Dashboard → Appearance → Widgets, and add some widgets to the sidebar to make it visible. WooCommerce comes with custom widgets that you can select called “Show Overview Page” and “Single Product Page”. Just drag & drop them in your sidebar, and they should appear in your store.
Also, you might need to go to the page in question, and select a template with a sidebar. This can happen when you have a Shop page that’s using a full-width template (without a sidebar).

Disable the WooCommerce Sidebar

There are a couple of different options you could use to disable the WooCommerce sidebar. We’ll go over all the options and show you how to disable the WooCommerce sidebar on your own:

The “Wrong” Way

There’s a good chance you read somewhere that the easiest way to remove the sidebar is to use the following lines of CSS:

.single-product .sidebar {
		display: none !important;
	},

or even something like:

.woocommerce #sidebar {
		display: none;
	}

The first snippet will hide the sidebar from your single product pages, while the second will hide it altogether on every WooCommerce page on your WordPress website. But the trick here, is that even though you won’t see the sidebar, it will still be rendered and take up space in your template. This is because CSS can’t stop an element from being rendered – it can just hide it. Also, this would not necessarily work for all themes, and if you’re using a custom theme it may not work properly so make sure to double check that.

The Right Way to Disable the WooCommerce Sidebar

To properly disable the WooCommerce sidebar, we’ll need to write some PHP code, and manually change what WordPress should render on the front-end. Here are a couple of solutions:

1. Disabling Sidebar Using a WordPress Hook (Recommended Method)

This is the best solution, and it is considered to be the “WordPress way” of doing things. Navigate to your theme’s functions.php file, and write the following code:

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

2. Disabling Sidebar in a Custom Template that Displays WooCommerce Products Alongside Regular WordPress Posts

You can use the is_woocommerce() function to detect whether the current page that’s being accessed is a WooCommerce template or not. The function will return true if it is a Woo page, and false otherwise. So in our theme’s sidebar.php, we could write:

	if ( !is_woocommerce() ) {
		get_sidebar();
	}

Using this logic, we can easily determine what type of page the user is accessing, and based on that, we can call the function that renders the sidebar. So let’s say that you open a product page (which is a WooCommerce template). Then the expression within the if statement will return false, and the sidebar function won’t be called – meaning the sidebar won’t be rendered.
How does the !is_woocommerce() return false? Well, the is_woocommerce() function will return true, and the ! (not) operator will convert the “true” into the opposite value, which is false.

3. Disabling Sidebar in a WooCommerce Template

Navigate to woocommerce/templates/shop, and open up the sidebar.php file. Here, you need to comment out everything in the sidebar.php file using /* at the very top, and */ at the very bottom of the file. Save it, and see if it worked on the front-end.

If you need a savvy WordPress developer to help you out, please consider Hiring an Expert.