WooCommerce Storefront Add Sidebar Guide

WooCommerce powers many eCommerce websites, the best thing about it is that it is very flexible and can be customized through hooks and filters it comes with a default theme – Storefront WooCommerce theme. Moreover, you can use plugins for extended functionality. You might want to add custom sidebars to your WooCommerce pages but implementing it is a problem. Nevertheless, this brief tutorial tries to help you learn how to add sidebar to storefront theme. I have also previously written extensively on how to remove sidebar in storefront theme or how to add sidebar in WordPress.

Table of Contents

WooCommerce Storefront Add Sidebar

WooCommerce allows you to include different pages like a front-page, blog page, article view, shop page, single product view, and so on. Showing the same widgets across all these pages might affect the user experience as well as the conversion rate of your online store. This is a bad thing because you will not be able to generate revenue.

A perfect example is when a visitor has landed on the blog page, you may want him to subscribe to the blog, view more related articles, or search for useful content on the site. Adding an opt-in form, Related Posts and Search widgets are good contenders for the sidebar on a blog view.

Additionally, if a visitor has landed on the shop page, you might want to convert him to a customer and make a purchase. For this to happen, you would like him to view the products, refine the search, add the products to the cart, and checkout. In this example, the idea of including an opt-in form, related posts, and search widgets to the sidebar simply fails.

However, there is a solution to this. It involves adding custom sidebars to different pages and views on your commerce website and utilizing the following widgets that are offered by WooCommerce:

Products. It displays a list of your store’s products.
Product Search. This is a dedicated search form for the store.
Product Categories. It displays a list or drop down of product categories.
Products by rating. It displays a list of your store’s top-rated products.
Product Tag Cloud. It displays a cloud of your most used product tags.
It displays the customer-shopping cart.
Filter products by attribute. It displays a list of attributes to filter products in your store.
Filter products by price. It displays a slider to filter products in your store by price.
Filter products by rating. It displays a list of star ratings to filter products in your store.
Active product filters. It displays a list of active product filters.
Recent Product Review. It displays a list of recent reviews from your store.
Recent Viewed Products. It displays a list of a customer’s recently viewed products.

For you to enhance the user experience and to optimize the conversion rate of your WooCommerce store, you might experiment on adding custom sidebars for all or each of the views on your online store. WooCommerce powers these views and they include:

Shop Page. It displays all the products.
Product Categories. It displays all the products in a particular product category.
Product Tags. It displays all the products related to the specific product tag.
Products. It represents the singular view of a product.
Cart Page. It displays the products added to the cart.
Checkout Page. It enables the buyers to make the payment for purchasing the products.
Account Pages. It displays customer information related to their account, orders, etc.

Steps to Add a Custom Sidebar to WooCommerce Shop Page.

For this brief guide, I am going to use the WooSidebars plugin.

This plugin enables you to override any widget area on your WordPress website, displaying different widgets for different screens. If you are not too tech-savvy, you can use this plugin, as you will not touch any line of code.

Here are the simple steps that you should follow:

Log into your WordPress site and access the Dashboard as the admin user.
Then, we are going to install the plugin that we have indicated earlier. To download it directly in the Admin Panel, simply navigate to Plugins > Add New. After that, you will need to do a keyword search for the plugin ‘WooSidebars’. You need to install and activate it as shown below:
After the plugin is activated, you will be able to view the “Widget Areas” menu-item under the Appearance menu. Go to Appearance > Widget Areas.
To add a new widget area, click on “Add New”. After the “Add New Widget Area” screen appears, you can define a new widget area (sidebar), set the condition to display the newly defined widget area on specific pages/template/view, and select the sidebar or the widget area that you would like to replace it with.

For this tutorial, I am going to create a widget area and display it on the WooCommerce Shop page only.

Additionally, you might want to create a widget area for a specific blog post. Simply go to Posts > All Posts and click the checkmark next to the desired blog post as shown below:

Conclusion

In this tutorial, I have shown you how you can add a custom sidebar to the WooCommerce page using the WooSidebars plugin. This plugin comes bundled with conditions for pages, which displays by default. If you click the “Advanced” tab inside the “Conditions” box, it opens up a range of extra tabs, for additional conditions like Specific page templates, Post types, Taxonomy archives, Taxonomy terms, WordPress Template Hierarchy, and WooCommerce views.

Additionally, to add support for other post types, please add the following to your theme’s “functions.php” file:

add_post_type_support( 'post_type', 'woosidebars' );

Remember to replace “post_type” with the desired post type.

Moreover, this plugin detects which sidebars are active in the current theme, and notifies you of which of your custom sidebars do not apply to the current theme.

Editorial Staff

How to Add a Sidebar to Storefront WooCommerce

WooCommerce Storefront Add Sidebar

Steps to Add a Custom Sidebar to WooCommerce Shop Page.

Conclusion

Similar Articles

Related