Every time you want to display your WooCommerce featured product using Elementor, you may find it hard! In case you don’t know, you can’t simply figure it out on your own. It is indeed a very simple task using Elementor. In this blog, let me show you how you can do it!
Featured product option generally highlights specific products to the visitors. You can use WooCommerce products/WooCommerce Slider widget to make a featured product showcase easily. But, you need to know how to use the featured option correctly.
From the perspective of the Elementor page builder, setting up WooCommerce featured product is an easy task. But, for someone who is new or isn’t knowledgable enough, it is troublesome. However, let’s get to the main point of this blog.
Methods of Setting Up WooCommerce Featured Product
You can easily set up the featured product in 3 different ways. Not difficult at all.
- Icon Tag method
- Quick Edit method
- Long Edit method
As long as you have the featured option activated, it will show up. To do that you need to go to Dashboard> Products> All Products.
From there, click on the Screen Option. This will show you the hidden settings above. Next, check the Featured box and hit Apply. There you have it! With this, your WooCommerce featured product option is enabled.
Now let’s see the 3 methods step-by-step.
1. Icon Tag method
Like the image above, you can see these Star symbol on each of your products. However, you can see the star after enabling the featured option from the screen option. These stars are the featured option. In other words, clicking a start will fill its color and mark that product as a WooCommerce featured product. Simple and easy!
2. Quick Edit method
Each of your products has Quick edit option. You can see it when you hover on them. This method is to mark the products as featured through the quick edit menu. In short, as the image above, click on Quick edit on the WooCommerce product you want to feature. Then, check the Featured box. Finally, hit the Update button and you are done!
3. Long Edit method
The last method requires you to go to the product editor. From there, click on Edit (marked with arrowhead).
Now, you will see the hidden options. Next, click on the checkbox ‘This is a featured product’ and your product is marked as a WooCommerce featured product. Finally, hit the OK button!
All done! With these very easy methods, you can setup your WooCommerce featured product in no time. Wait! There is one more thing left to do. Let’s see the featured products in Elementor.
How to Use Iframe Widget in Elementor by Element Pack
<div class="bdt-ep-button-text">
<span class="avdbtn-text">
Read now </span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="elementor-section elementor-top-section elementor-element elementor-element-9c483ee elementor-section-boxed elementor-section-height-default elementor-section-height-default magic-button-disabled-no" data-id="9c483ee" data-element_type="section" data-e-type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7d4fb14" data-id="7d4fb14" data-element_type="column" data-e-type="column">
<div class="elementor-widget-wrap elementor-element-populated">
<div class="elementor-element elementor-element-2a9f5b9 elementor-widget elementor-widget-text-editor" data-id="2a9f5b9" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
<h2 id="h-creat-woocommerce-featured-product-page-using-elementor">Creat WooCommerce Featured Product Page Using Elementor</h2>
Without delay, let’s put the featured products into display. Open up your page with Elementor Page editor and directly insert WooCommerce products/WooCommerce Slider widgets.
Here is the WooCommerce Products widget. Using this tool, you can display your products in a table format. However, from Content tab> Query, select Featured from the Show Product option.
Once again, you can use WooCommerce Slider widget to create a full width WooCommerce featured product display. The settings for query is same as before.
Thanks for reading this blog. Learn to make awesome WooCommerce Custom Product Page using Elementor and Element Pack here.
Enjoy!
Read more WordPress blogs
<div class="bdt-image bdt-flex">
<a href="/track-wordpress-website-visibility" title="How to Track and Improve Your WordPress Website Visibility in Search Engines">
<img width="150" height="150" src="/blog-media/how-to-display-woocommerce-featured-product-using-elementor/how-to-track-if-your-wordpress-site-is-visible-in-search-engines-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="How to Track and Improve Your WordPress Website Visibility in Search Engines" title="How to Track and Improve Your WordPress Website Visibility in Search Engines"/> </a>
</div>
<div class="bdt-content">
<h4 class="bdt-title">
<a href="/track-wordpress-website-visibility" class="bdt-link" title="How to Track and Improve Your WordPress Website Visibility in Search Engines">
How to Track and Improve Your WordPress Website Visibility in Search Engines </a>
</h4>
<div class="bdt-meta bdt-subnav bdt-flex-middle">
<span>May 12, 2026</span> <span><a href="/category/tutorials">Tutorials</a>, <a href="/category/wordpress">WordPress</a></span> </div>
</div>
</div>
</div>
<div class="bdt-item-wrap bdt-flex">
<div class="bdt-item bdt-flex bdt-flex-middle">
<div class="bdt-image bdt-flex">
<a href="/best-website-layouts-examples" title="20 Website Layout Examples to Inspire Your Next Design">
<img width="150" height="150" src="/blog-media/how-to-display-woocommerce-featured-product-using-elementor/website-layouts-examples-to-inspire-your-next-design-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="20 Website Layout Examples to Inspire Your Next Design" title="20 Website Layout Examples to Inspire Your Next Design"/> </a>
</div>
<div class="bdt-content">
<h4 class="bdt-title">
<a href="/best-website-layouts-examples" class="bdt-link" title="20 Website Layout Examples to Inspire Your Next Design">
20 Website Layout Examples to Inspire Your Next Design </a>
</h4>
<div class="bdt-meta bdt-subnav bdt-flex-middle">
<span>May 2, 2026</span> <span><a href="/category/tips-and-tricks">Tips and Tricks</a></span> </div>
</div>
</div>
</div>
<div class="bdt-item-wrap bdt-flex">
<div class="bdt-item bdt-flex bdt-flex-middle">
<div class="bdt-image bdt-flex">
<a href="/wordpress-7-0-release-updates-features" title="WordPress 7.0 is Coming: The Essential Guide to the 2026 Release, Collaboration Features and AI Infrastructure">
<img width="150" height="150" src="/blog-media/how-to-display-woocommerce-featured-product-using-elementor/WordPress-7-0-release-whats-new-1-150x150.png" class="attachment-thumbnail size-thumbnail" alt="WordPress 7.0 is Coming: The Essential Guide to the 2026 Release, Collaboration Features and AI Infrastructure" title="WordPress 7.0 is Coming: The Essential Guide to the 2026 Release, Collaboration Features and AI Infrastructure"/> </a>
</div>
<div class="bdt-content">
<h4 class="bdt-title">
<a href="/wordpress-7-0-release-updates-features" class="bdt-link" title="WordPress 7.0 is Coming: The Essential Guide to the 2026 Release, Collaboration Features and AI Infrastructure">
WordPress 7.0 is Coming: The Essential Guide to the 2026 Release, Collaboration Features and AI Infrastructure </a>
</h4>
<div class="bdt-meta bdt-subnav bdt-flex-middle">
<span>April 26, 2026</span> <span><a href="/category/tips-and-tricks">Tips and Tricks</a>, <a href="/category/wordpress">WordPress</a></span> </div>
</div>
</div>
</div>
<div class="bdt-item-wrap bdt-flex">
<div class="bdt-item bdt-flex bdt-flex-middle">
<div class="bdt-image bdt-flex">
<a href="/how-can-i-make-a-business-website" title="How Can I Make a Business Website (Complete Step-by-Step Guide)">
<img width="150" height="150" src="/blog-media/how-to-display-woocommerce-featured-product-using-elementor/how-can-i-make-a-business-website-150x150.webp" class="attachment-thumbnail size-thumbnail" alt="How Can I Make a Business Website (Complete Step-by-Step Guide)" title="How Can I Make a Business Website (Complete Step-by-Step Guide)"/> </a>
</div>
<div class="bdt-content">
<h4 class="bdt-title">
<a href="/how-can-i-make-a-business-website" class="bdt-link" title="How Can I Make a Business Website (Complete Step-by-Step Guide)">
How Can I Make a Business Website (Complete Step-by-Step Guide) </a>
</h4>
<div class="bdt-meta bdt-subnav bdt-flex-middle">
<span>April 25, 2026</span> <span><a href="/category/element-pack-tips">Element Pack Tips</a>, <a href="/category/elementor">Elementor</a>, <a href="/category/tutorials">Tutorials</a>, <a href="/category/wordpress">WordPress</a></span> </div>
</div>
</div>
</div>
<div class="bdt-item-wrap bdt-flex">
<div class="bdt-item bdt-flex bdt-flex-middle">
<div class="bdt-image bdt-flex">
<a href="/how-to-make-a-website-for-my-business" title="How to Make a Website for My Business with WordPress in 2026">
<img width="150" height="150" src="/blog-media/how-to-display-woocommerce-featured-product-using-elementor/how-to-make-a-website-for-my-business-with-wordpress-in-2026-150x150.webp" class="attachment-thumbnail size-thumbnail" alt="How to Make a Website for My Business with WordPress in 2026" title="How to Make a Website for My Business with WordPress in 2026"/> </a>
</div>
<div class="bdt-content">
<h4 class="bdt-title">
<a href="/how-to-make-a-website-for-my-business" class="bdt-link" title="How to Make a Website for My Business with WordPress in 2026">
How to Make a Website for My Business with WordPress in 2026 </a>
</h4>
<div class="bdt-meta bdt-subnav bdt-flex-middle">
<span>April 24, 2026</span> <span><a href="/category/element-pack-tips">Element Pack Tips</a>, <a href="/category/tutorials">Tutorials</a>, <a href="/category/wordpress">WordPress</a></span> </div>
</div>
</div>
</div>
<div class="bdt-item-wrap bdt-flex">
<div class="bdt-item bdt-flex bdt-flex-middle">
<div class="bdt-image bdt-flex">
<a href="/how-to-edit-woocommerce-shop-page-with-elementor" title="How to Edit WooCommerce Shop Page with Elementor">
<img width="150" height="150" src="/blog-media/how-to-display-woocommerce-featured-product-using-elementor/how-to-edit-woocommerce-shop-page-with-elementor-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="How to Edit WooCommerce Shop Page with Elementor" title="How to Edit WooCommerce Shop Page with Elementor"/> </a>
</div>
<div class="bdt-content">
<h4 class="bdt-title">
<a href="/how-to-edit-woocommerce-shop-page-with-elementor" class="bdt-link" title="How to Edit WooCommerce Shop Page with Elementor">
How to Edit WooCommerce Shop Page with Elementor </a>
</h4>
<div class="bdt-meta bdt-subnav bdt-flex-middle">
<span>April 23, 2026</span> <span><a href="/category/elementor">Elementor</a>, <a href="/category/tutorials">Tutorials</a>, <a href="/category/woocommerce">WooCommerce</a></span> </div>
</div>
</div>
</div>
<!-- GRADIENT SPINNER -->
<div id="bdt-loading-image" style="display: none;">
<div class="bdt-spinner-box">
<div class="bdt-circle-border">
<div class="bdt-circle-core"></div>
</div>
</div>
</div>
<!-- GRADIENT SPINNER -->
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Selim Rana
The BdThemes team builds WordPress plugins trusted by 3M+ users worldwide. We write about web accessibility, WCAG compliance, and inclusive design.