WooCommerce: Using Widgets Effectively

WooCommerce widgets enhance your store’s functionality by adding dynamic features like product filters, carts, and recent reviews to widgetized areas (e.g., sidebars, footers). These tools make it easy for customers to navigate and engage with your shop. This guide walks you through accessing WooCommerce widgets, adding them to your store, and configuring the versatile WooCommerce Products widget as an example.

Step 1: Access Widgets

1. Visit Your Shop Page:
   • Log in to your WordPress dashboard.
   • Hover over your site name in the top-left corner and click Visit Store to view your shop page on the front end.
   • Alternatively, navigate to your shop page directly (e.g., yoursite.com/shop).
2. Open Customizer:
   • On the shop page, click Customize in the admin bar.
   • In the Customizer, select Widgets.
   • Choose a widgetized area, typically Sidebar (varies by theme; common areas include sidebar, footer, or header).

Step 2: Explore WooCommerce Widgets

1. Filter Widgets:
   • In the Add a Widget panel, type “WooCommerce” in the search field to list only WooCommerce widgets.
   • You’ll see the following WooCommerce widgets:
     • WooCommerce Average Rating Filter: Filter products by customer ratings.
     • WooCommerce Cart: Show cart contents with links to cart and checkout.
     • WooCommerce Layered Nav: Filter products by attributes (e.g., size, color).
     • WooCommerce Layered Nav Filters: Display active filters, allowing users to remove them.
     • WooCommerce Price Filter: Filter products by price range.
     • WooCommerce Product Categories: List product categories.
     • WooCommerce Products: Show all, featured, or on-sale products.
     • WooCommerce Product Search: Search bar for products only.
     • WooCommerce Product Tags: Display tags in a cloud format.
     • WooCommerce Recently Viewed: List products a customer recently viewed.
     • WooCommerce Recent Reviews: Show products with recent reviews and ratings.
     • WooCommerce Top Rated Products: List highest-rated products.
2. Widget Areas:
   • Most themes support a Sidebar, but check your theme for other areas (e.g., Footer Widget Area or Shop Sidebar).
   • Widgets display based on theme compatibility and page context (e.g., some show only on shop or product pages).

Step 3: Add and Configure the WooCommerce Products Widget

The WooCommerce Products widget is highly customizable, making it a great example to explore in depth.

1. Add the Widget:
   • In the Customizer’s Widgets > Sidebar section, click Add a Widget.
   • Select WooCommerce Products.
2. Configure Settings:
   • Title: Enter a header, e.g., “Featured Products.” This appears above the widget.
   • Number of Products: Set how many products to display, e.g., 4.
   • Show: Choose what to display:
     • All Products: Every product in your catalog.
     • Featured Products: Only products marked as featured (set in Products > Edit Product > Featured).
     • On Sale Products: Products with a sale price.
   • Order By: Sort products by:
     • Date: Newest first.
     • Price: Low to high or vice versa.
     • Random: Random order.
     • Sales: Best-selling first.
   • Order: Select ASC (ascending) or DESC (descending).
   • Hide Free Products: Check to exclude free products ($0).
   • Show Hidden Products: Check to include products with Catalog Visibility set to hidden (e.g., grouped product children).
3. Example Setup:
   • Title: “On Sale Now”
   • Number of Products: 3
   • Show: On Sale Products
   • Order By: Price
   • Order: ASC
   • Hide Free Products: Checked
   • Show Hidden Products: Unchecked
   • This displays three discounted products in your sidebar, sorted from cheapest to most expensive.
4. Save and Publish:
   • Click Save in the widget settings, then Publish in the Customizer to make the widget live.

Step 4: Test and Explore

1. Test the Widget:
   • Visit your shop page to confirm the WooCommerce Products widget displays correctly in the sidebar.
   • Verify:
     • The title shows (e.g., “On Sale Now”).
     • The correct number and type of products appear (e.g., three on-sale items).
     • Sorting matches your settings (e.g., price ascending).
     • Clicking products leads to their pages.
   • Test on mobile to ensure responsiveness (some themes collapse sidebars).
2. Try Other Widgets:
   • Add the WooCommerce Layered Nav to filter by attributes (e.g., size), requiring attributes set up in Products > Attributes.
   • Use WooCommerce Cart to keep the cart visible, encouraging checkout.
   • Experiment with WooCommerce Recent Reviews to highlight customer feedback.

Pro Tips

• Theme Compatibility: Ensure your theme supports widget areas (e.g., Storefront has robust sidebar support). Test widgets in all areas your theme offers.
• Strategic Placement: Use Price Filter or Layered Nav on shop pages to improve navigation, and Cart in headers for quick access.
• Performance: Limit the number of products in widgets (e.g., 3–5) to avoid slowing page load times.
• Customer Engagement: Widgets like Recently Viewed or Top Rated Products personalize the shopping experience, boosting conversions.
• Documentation: Explore WooCommerce’s widget documentation for detailed settings on each widget, especially for advanced ones like Layered Nav.

Congratulations!

You’ve mastered WooCommerce widgets! By adding the WooCommerce Products widget to your sidebar, you’ve enhanced your shop page with dynamic content. With widgets like price filters, carts, and recent reviews at your disposal, you can create an engaging and user-friendly store.

For more guidance, check WooCommerce’s resources or experiment with other widgets to perfect your store’s layout.