Woocommerce Custom Sidebar on Shop Page (Without using a plugin)

After working with Woocommerce recently, I discovered that out of the box, Woocommerce displays the main blog sidebar on the shop pages.

Since the main WordPress sidebar contains blog-related widgets by default, this is clearly far from ideal.

I wanted instead for the Woocommerce shop page to have it’s own sidebar, with widgets related to searching and filtering products, not posts.

After digging through the code looking for a clean solution, I found that the solution is easy, and it’s as clean as copying a single template file and making a minor edit.

1. Create your new Widget Area

In your website’s filesystem (using your OS’s file explorer if it’s local to your machine, or via SFTP if it’s a remote webserver), navigate to your theme’s directory (/wp-content/themes/THEMENAME/) and edit the functions.php file.

At the end of the file, add the following code:

function custom_widgets_init() {
	register_sidebar(
		array(
			'name'          => esc_html__( 'Shop Sidebar', 'sirius' ),
			'id'            => 'sidebar-shop',
			'description'   => esc_html__( 'Add widgets here.', 'sirius' ),
			'before_widget' => '<section id="%1$s" class="widget %2$s">',
			'after_widget'  => '</section>',
			'before_title'  => '<h4>',
			'after_title'   => '</h4>',
		)
	);
} 
add_action( 'widgets_init', 'custom_widgets_init' );

If you already have a function attached to the widgets_init action, you can just add the call to register_sidebar into it.

2. Add widgets to your new widget area

Drag some widgets into your new widget area. Here are a few relevant Woocommerce widgets you might find appropriate:

Product Search
Filter Products by Attribute
Product Categories
Product Tag Cloud
Products By Rating
Recent Viewed Products

Adding widgets to the widget area

3. Create a custom shop sidebar template

Now we’re ready to create the template file which will output the new sidebar on the frontend of your website.

Edit the new sidebar-shop.php template using your favourite text editor and change any references to ‘sidebar-1’ to ‘sidebar-shop’

Here is the content from my sidebar-shop.php file.

<?php
/**
 * The sidebar containing the main widget area
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package Sirius
 */
 
if ( ! is_active_sidebar( 'sidebar-shop' ) ) {
	return;
}
?>
 
<aside id="secondary" class="widget-area">
	<?php dynamic_sidebar( 'sidebar-shop' ); ?>
</aside><!-- #secondary -->

And you’re done!

Now when you visit the shop page on the frontend of your website, you should see your shop sidebar instead of the main sidebar which is displayed when visiting the rest of your site.

If that was helpful, I’d really appreciate you taking the time to share this post on social media. You may also like to check out some of my other Woocommerce and WordPress related posts.

Like it? Share it!