Want to highlight selected products and make them more visible on your WooCommerce store? Featured Products are a simple way to draw attention to products you want shoppers to discover.
WooCommerce lets you mark products as featured, and PowerPack's Woo - Products widget makes it easy to display those products anywhere you use Elementor. Instead of manually adding individual products to a page, you can configure the widget to automatically show products marked as Featured.
In this guide, we'll show you how to mark products as featured in WooCommerce and display them using the Woo - Products widget from PowerPack Addons for Elementor.
Required Plugins#
Before you get started, make sure the following plugins are installed and activated on your website:
Step 1: Mark Products as Featured in WooCommerce#
Before the Woo - Products widget can display featured products, you need to mark the products you want to showcase as Featured in WooCommerce. There are several ways to do this.
Mark a Product as Featured from the Products List#
From your WordPress dashboard, go to: Products >> All Products
Find the product you want to feature. In the product list, look for the Featured column. Click the star icon next to the product. When the star is filled, the product has been marked as featured. You can repeat this process for as many products as you want to showcase.
Mark a Product as Featured Using Quick Edit#
You can also mark a product as featured using WooCommerce's Quick Edit option.
- Go to Products >> All Products.
- Find the product you want to feature.
- Hover over the product title and click Quick Edit.
- Look for the Featured option.
- Enable the Featured option.
- Click Update to save your changes.
Once you've marked your products as featured, WooCommerce will make them available for featured-product queries.
Now, let's display those products on a product page using the Woo - Products widget.
Step 1: Create a Single Product Template#
First, you need a Single Product template where you can add the featured products section. From your WordPress dashboard, go to Elementor >> Editor >> Templates. Click Add New Template
If you already have a Single Product template, you can open that template instead and skip the template creation step.
When creating a new template, choose the appropriate template type (Page) for your WooCommerce product page and give the template a descriptive name. For example, you can name it Single Product Page.
Click Create Template to open the template in the Elementor editor.
Set Up the Page Layout#
Once the Elementor editor opens, you can set up the layout for your Single Product page.
If you want to change the default page layout, click the Settings icon at the bottom-left corner of the Elementor panel. From there, choose the layout that works best for your design.
You can use a canvas-style layout or another layout depending on your theme and website structure.
Step 2: Enable the PowerPack WooCommerce Builder#
PowerPack provides WooCommerce-specific widgets that you can use to build and customize your product pages in Elementor.
Before adding these widgets, make sure the WooCommerce Builder is enabled in PowerPack. In the Elementor editor, open the PowerPack settings and locate the WooCommerce Builder option. Toggle it on to enable the WooCommerce builder features.
Once enabled, additional WooCommerce-related options will become available for your template.
Since we're creating a Single Product page, select the template you created from the Single Page Template option. You can then click Edit under the Single Page Template option to open the template in Elementor and continue customizing it.
Step 3: Design Your Single Product Page#
Now you can create the layout of your Single Product page. You have two options here.
You can either build the page layout from scratch or import a pre-designed template and customize it according to your needs.
Add the product-related sections and widgets you want to include on your page, such as:
- Product image
- Product title
- Product price
- Product description
- Add to Cart button
- Product ratings
- Product meta
- Additional product information
Once the main product content is ready, decide where you want to display the Featured Products section.
For example, you can place it below the product details or near the bottom of the Single Product page.
Step 4: Add the Woo - Products Widget#
Open the page or template where you want to display your featured products with Elementor. You can add the widget to a regular page, post, archive/template, or a WooCommerce template, depending on how you want to use the featured product section.
In the Elementor editor:
- Open the Elements panel.
- Search for Woo - Products.
- Find the widget under the PowerPack widgets.
- Drag and drop the widget onto the page.
Once the widget is added, select it to open its settings.
Step 5: Display Featured Products#
Now that the Woo - Products widget has been added, configure its product query to display only products you've marked as featured. Select the widget and open its Query settings.
Look for the Filter By option and select Featured.
The widget will now automatically fetch products that are marked as featured in WooCommerce. This means you don't have to manually select products each time you update the section.
If you mark another product as featured in WooCommerce, it can automatically become part of the featured product listing based on the widget's query settings.
Step 6: Publish or Update the Page#
Once you're happy with the product query, layout, and styling, click Update or Publish in Elementor.
Your featured products will now be displayed using the Woo – Products widget. Whenever you change the featured status of products in WooCommerce, the product listing can update automatically according to the widget's query settings.