In this guide, we’ll show you how to customize the WooCommerce sidebar with a few different techniques.
When you have a lot of products in your store, it can be difficult for customers to find the products they actually want to buy. To mitigate this, you can enable the WooCommerce sidebar on your shop page and add various product filtering and browsing tools to help your customers to find products faster and easier.
In this post, we’ll show you how to do this using:
- The default widgets that come with WooCommerce.
- The WooCommerce Attribute Swatches plugin – to add color and image swatches to your WooCommerce sidebar for easier filtering.
First, let’s understand why you should improve the default WooCommerce sidebar.
The WooCommerce sidebar is a useful tool for adding extra content and capabilities to your shop and categories pages. Without having to drastically alter the content on these pages. You can use it to help customers to find products faster while improving customer experience.
The default WooCommerce sidebar accomplishes this but to a limited extent because it’s very word-heavy and could be modernized. Fortunately, You can improve it with the techniques mentioned in this guide. As a result, you’ll increase the conversion rate of your store.
So with this in mind, let’s take a look at some of the specific benefits of improving the default WooCommerce sidebar.
You’ll reduce clicks and help customers find products faster
Reducing the clicks customers have to take to find their preferred products helps them get to the checkout quicker. In fact, by reducing clicks, you’ll increase the likelihood of customers adding more to their cart (improving average order value), and you’ll reduce checkout abandonment too.
You can do this by introducing various filters to the WooCommerce sidebar. Filters work by eliminating the options that are not suitable to the customer. These could be price, attributes, product ratings, and so on. Customers can simply use these filters to find product options that they prefer, without having to spend time manually searching for them.
Having filters can also help in narrowing the search results by specifying parameters such as attributes, price, tags, and so on. This way, broad search terms can yield more focused results and customers can find what they’re looking for in fewer clicks. As a result, customers will spend less time searching for products and more time purchasing.
You’ll improve user experience and keep customers coming back
Since the default WooCommerce sidebar is word-heavy, customers don’t get the best experience when using it. You can mitigate this by introducing attribute swatches to the default WooCommerce sidebar to replace the standard product options. These enable customers to visually sort through these product options to find their preferred product.
They essentially get a preview of what the product options look like, helping them to make a browsing decision faster. Using swatches to sort through product options removes frustration when browsing your WooCommerce store. This will encourage customers to come back.
Now that we know the importance of improving the default WooCommerce sidebar, let’s take a look at the techniques you can use to do this.
WooCommerce has a number of default widgets you can add to your WooCommerce sidebar to improve user experience and help you make sales.
These widgets are in two classes:
- Product search field.
- Product filters.
Product Search Field widget
This is a search widget you can add to the WooCommerce sidebar to enable your customers to manually search for products. By default, the Product Search Field widget displays search results just as they would appear on the category page. Customers can click on products and be taken to the single product page. Or they can add to cart and move onto the checkout page.
As a result, customers can add products to their carts directly from the search results. This reduces the clicks customers have to go through when making a purchase.
This widget has a variety of settings that give you a lot of control over search appearance and behavior. It allows you to choose when a search will be initiated, where the search engine should look, how many results are displayed, and how the results are sorted. It also has a WPML Language filter option to filter the results in the current language.
Product Filter widgets
You can also stock your WooCommerce sidebar with product filter widgets to help customers to narrow down the products displayed on the shop page. The default WooCommerce install has up to 9 of these. Here are just a few:
Product Filter – price
This live filter enables a customer to set a price range that they are comfortable with. By default, it displays two fields where a customer can enter the maximum and minimum fees they’re willing to part with for your products. It also has additional settings for displaying a slider, the title, and a custom heading.
This tool enables customers to find products within their price range a lot faster.
Product Filter – attributes
Some customers tend to prefer certain attributes (such as color/materials) for their products. The Product filter – attributes widget enables them to filter products by these attributes. Customers can complete a set comprising products related to each other via an attribute, for example, red outfits plus shoes.
Just like the Product Filter – price widget it has a few settings you can make to how it’s displayed on the WooCommerce sidebar.
Product Filter – rating
This widget allows customers to exclude products outside a range of product ratings to be displayed on the shop page. For example, they can set it to only display products with an average 4-star rating and above. Generally, customers prefer products with higher ratings.
Including this filter enables them to have an enjoyable experience and build trust with you.
Product Filter – Categories
This is a live filter that displays a categories section on the WooCommerce sidebar. Customers can choose a category and it will find products within this category and display them on the WooCommerce shop page.
You can choose to display the WooCommerce product categories as vertical lists that can be expandable to show sub-categories, dropdowns, or select (similar to dropdowns but simpler). This filter helps customers to focus on products that are relevant to them.
Each of these Product Filters has additional settings where you determine how they’re displayed in the sidebar. WooCommerce also has the Product Filter widgets for search, categories, tags, stock, and reset.
To use these widgets, follow this tutorial:
- From your WordPress dashboard, go to Appearance > Widgets.
- On the widgets area page, scroll down to the WooCommerce sidebar section and click the plus(+) button to add a new section.
- Search for the widget you want to add in the search box and click on it once it appears on the results.
- When you’re done, click on the Update button on the top right.
Adding these filters is not the only way to improve the experience of customers looking for products in your store. You can take it a step further with the technique discussed in the next section.
While the widgets that come with WooCommerce are useful, they could be upgraded to improve user experience. Let’s see how you can further elevate the WooCommerce sidebar below.
Improve attribute filtering with color and image swatches
Having an attribute filter on the WooCommerce sidebar is a great way to help your customers quickly find their preferred products. But, it could be improved. Take this further by adding attribute swatches to this sidebar.
Attribute swatches allow customers to visually sort through product attributes. Allowing them to spend less time browsing your store, and more time finding and buying the products they want.
The default WooCommerce setup doesn’t have this feature though. So to upgrade your product attributes, you’ll need the help of a plugin.
WooCommerce Attribute Swatches allows you to add image, color, and button-like text variation swatches to the WooCommerce sidebar. This plugin is packed with features that will step up the product sorting experience for your customers.
WooCommerce Attribute Swatches
Turn your WooCommerce product options into color, image, or text swatches. Instantly enhance your customers’ online experience.
Using its color picker, customers can easily sort through the color variations of the products in your store. Image swatches, on the other hand, allow your customers to have a preview of things like materials, patterns, and more, right from the sidebar.
With this plugin, you can also upgrade text-based variations with clean text and radio buttons. All of these work to make product browsing enjoyable for your customers which could translate to more sales or customers coming back.
Plus, WooCommerce Attribute Swatches works perfectly with any WordPress website and WordPress theme using WooCommerce. Just add it to your online store, customize and watch as customers filter with ease.
The WooCommerce sidebar is useful in adding more capabilities to the pages of your store without having to drastically alter the content on these pages. The default WooCommerce sidebar is basic but can be improved by adding a few widgets to help customers find their preferred products faster and easier.
You can take this further and add variations swatches to the sidebar of your ecommerce website using the plugin WooCommerce Attribute Swatches. This allows customers to visually sort through product variations making this experience enjoyable.
WooCommerce Attribute Swatches
Turn your WooCommerce product options into color, image, or text swatches. Instantly enhance your customers’ online experience.