WooCommerce includes several legacy widgets that display products in your theme’s widgetized areas. For a more versatile approach, you can add WooCommerce Blocks to widget areas instead. This guide covers the default widgets, where to find them, and how to transform legacy widgets into blocks.
Included widgets
↑ Back to topThe default widgets listed below are referred to as legacy widgets and are still available in your theme’s widget areas. The widget icon helps you distinguish widgets from similarly named blocks.
WooCommerce includes the following four default widgets:
- Cart — Displays a summary of items in the cart. Use this widget to place a mini cart in your sidebar so shoppers can review their selections without navigating away from the current page.
- Products list — Shows a limited list of all, featured, or on-sale products. This is useful for highlighting specific product collections in a sidebar or footer area, such as current promotions or featured items.
- Products by Rating list — Shows a list of your store’s top-rated products. Place this widget in a prominent area to showcase social proof and encourage purchases based on customer reviews.
- Recently Viewed Products list — Shows a list of products a customer has recently viewed. This widget helps shoppers return to items they were considering and works well in a sidebar on product or shop pages.
Legacy widget block equivalents
↑ Back to topSome legacy widgets have equivalent blocks that offer more customization options. The following table shows each legacy widget and its block equivalent, if one exists:
| Legacy widget | Block equivalent |
|---|---|
| Cart | Mini-Cart block |
| Products list | Products by Attribute, On Sale Products, or Best Sellers block (depending on configuration) |
| Products by Rating list | Top Rated Products block |
| Recently Viewed Products list | No block equivalent currently available |
WooCommerce Blocks in widget areas
↑ Back to topWooCommerce also offers a growing list of blocks that provide more flexibility and customization than the legacy widgets above. You can add these blocks in addition to or instead of the default widgets. See WooCommerce Blocks for details on available blocks and their capabilities.
Widget location
↑ Back to topTo find available widget areas, go to Appearance > Widgets. The areas available to you depend on the active theme on your site. For example, the Storefront theme provides the widget areas shown below. Select a location, and then click the plus sign (+) to find and add a widget or block.
Note: If your site uses a block theme with Full Site Editing, the Appearance > Widgets screen is not available. Instead, use the Site Editor at Appearance > Editor to manage widget areas and add blocks. See the WordPress Site Editor documentation for details on editing template parts such as sidebars and footers in block themes.
Transform legacy widgets into blocks
↑ Back to topSeveral legacy widgets have equivalent blocks that offer more customization options and a better experience for shoppers. You can convert existing widgets to blocks directly in the editor.
To transform a legacy widget into a block:
- Select the legacy widget in the editor, then click the block icon in the toolbar that appears above it.
- Select Transform to from the menu that appears.
- Choose the equivalent block from the available options.
Questions and support
↑ Back to topDo you still have questions and need assistance?
This documentation is about the free, core WooCommerce plugin, for which support is provided in our community forums on WordPress.org. By searching this forum, you’ll often find that your question has been asked and answered before.
If you haven’t created a WordPress.org account to use the forums, here’s how.
- If you’re looking to extend the core functionality shown here, we recommend reviewing available extensions in the WooCommerce Marketplace.
- Need ongoing advanced support or a customization built for WooCommerce? Hire a Woo Agency Partner.
- Are you a developer building your own WooCommerce integration or extension? Check our Developer Resources.
If you weren’t able to find the information you need, please use the feedback thumbs below to let us know.