The Ultimate Guide to WooCommerce Widgets (Video)

Written by Sean Flannigan

logo

 

In this WooCommerce tutorial, we’ll walk through how to use and setup your WooCommerce widgets. These can be very powerful tools for making the customer experience easy and intuitive.

WooCommerce Widget Menu

From the Dashboard, use the left-side navigation bar and scroll down to Appearance. In just about any WordPress installation, that’s where you’ll find the Widgets sub-menu.

Within the Widgets sub-menu, you’ll see many familiar widgets that come with every WordPress base installation. If you scroll further down, however, you’ll see that WooCommerce also provides several widgets by default. They can be added to any widget area for you to experiment with!

WooCommerce Widgets Menu

They include:

  • Average Rating Filter – allows customers to sort by an average product rating
  • Cart – allows customers to see what is in their cart
  • Composite Products Summary – shows customers dynamically created products lists for composite products
  • Instant Product Search – allows customers to dynamically search for products
  • Layered Nav – additional navigation options
  • Layered Nav Filters – shows active filters
  • Price Filter – allows customers to set min and max price filters
  • Product Categories – a list or drop-down of product categories
  • Products – displays products
  • Product Search – allows customers to search through product listings
  • Product Tags – allows customers to sort using product tags
  • Recently Viewed Products – displays most recently-viewed products
  • Recently Reviewed Products – displays recently reviewed products
  • Top Rated Products – displays products with the best ratings

Note that some widgets only appear when other actions are taken – e.g. the Layered Nav Filters widget will only appear once a filter has been used.

Adding Widgets to Your WooCommerce Store

You can add the widgets to your sidebar one by one. One way to do this is by dragging and dropping each into the sidebar box. Another way is by clicking the item, choosing “Sidebar” and clicking the “Add Widget” button (see below).

WooCommerce Widget Add to Sidebar

Your sidebar then becomes populated with your selected widgets, which you can move up or down by dragging in order to change the order they will show up in the WooCommerce store.

WooCommerce Widgets Sidebar

Each of these widgets in the sidebar can be expanded to show your configurable options. From the simplest option of the widget’s title to the organizational properties within search and product feeds, there is much you can change with your widgets. Make them do exactly what you want.

WooCommerce Widgets Avg Rating Cart Composite Products

WooCommerce Widget Product Categories WooCommerce Widget Products WooCommerce Widget Search Tags Recently Viewed WooCommerce Widgets Recent Reviews Top Rated WooCommerce Widgets Layered Nav Price FiltersWooCommerce Widget Instant Product Search

Widgets on Your WooCommerce Store

The way the widgets look on the live site depends on how you configure them in the admin panel and the order in which you arrange them. With some obvious differences, you can expect the store’s sidebar widgets to look like the below.

Average Rating, Cart, Instant Product Search, and Layered Nav:

WooCommerce Widgets Avg Rating Cart Instant Search Layered Nav

Active Filters (for both price and attribute), Price Filter, and Product Categories:

WooCommerce Widgets Active Filters Price Filter Product Categories

Products, Product Search (not “instant”), and Product Tags:

WooCommerce Widgets Products Product Search Product Tags

Recently Viewed Products and Recent Reviews:

WooCommerce Widgets Recently Viewed Products Recent Reviews

And Top Rated Products:

WooCommerce Widget Top Rated Products

You can have as many or as few of these WooCommerce widgets on your site as you want. It is up to you to determine what will best serve your customers and your business needs. These are very powerful tools in the WooCommerce arsenal and interact with your site seamlessly.

You can find our other WooCommerce video tutorials on our blog, such as our guide to configuring WooCommerce settings.

For larger projects and major site builds, our WooCommerce experts should be top of mind. You can also email us at [email protected].

WooCommerce,Tutorial

   

Let’s Get In Touch

Our team would love to talk with you about your goals for your business and how our experienced developers and designers can help you achieve those goals. Whether you have a simple question or a complex upcoming project, please don’t hesitate to reach out.

  • We'll be in contact soon!
  • This field is for validation purposes and should be left unchanged.