In this tutorial we’ll learn how to use Dynamic WooCommerce Tags to display products or services anywhere on your website. Any changes you make to the product’s details will reflect everywhere it’s displayed on your site, making it easier to showcase amazing products and increase your sales!
The tutorial will cover:
✔︎ Draw product details and content dynamically in widgets
✔︎ Create product showcases including Add To Cart widgets for easy purchases
✔︎ Display products in popups to increase sales
✔︎ And much more!
See also: https://elementor.com/blog/introducing-elementor-pro-3-4
Hi All, it’s Ziv from Elementor. Today I’ll show you how to use Dynamic WooCommerce Tags.
They enable you to display products or services.. anywhere on your website, such as on your home page, inside a hero image, on a landing page, or even in a popup!
Dynamic WooCommerce Tags refer to the content that can be drawn from the product.. such as its image, price and sale status, just to name a few.
And the cool thing is that any changes you make to the product’s details will reflect everywhere it’s displayed on your website, making it easier to showcase amazing products and increase your sales!
Let’s dive in and see how it works
I’ll use this pre-built online clothing store as an example. Here.. I’ve placed some regular image widgets..and styled them to fit my design.
Now, instead of choosing a static image, I’ll go ahead and set it to display a specific product I want to promote.
To do that, click on the dynamic tags icon, and under WooCommerce, choose Product Image. Then click the wrench icon and search for the product you want to display. Great! The image widget dynamically draws the Product Image from its WooCommerce settings.
Next, I’ll go ahead and set this heading widget to draw the Product Title. Like before, instead of typing it manually, I’ll click on Dynamic Tags.. And under WooCommerce, select Product Title. Then search for the Product.
Okay great, so now that we know how it works, let’s check out this next example to see how Dynamic WooCommerce Tags can be used to rapidly create product showcases, and make sure visitors can easily purchase them on your site.
As you can see, I’ve already set up the product image, title and description. The only thing missing here.. is the price and an add to cart button.
For the price I’ll drag in a heading widget.
And in Dynamic Tags, choose Product Price. Then search for the product. Great!
Next, I’ll search for the Custom Add To Cart Widget. And drag it under the price. Then search for the same product. Okay, let’s check it out.
Cool! This product is ready to be purchased with just a few clicks!
As you know by now, Dynamic WooCommerce Tags can be used in any widget with this functionality.
In this section, I’ve gone ahead and used the price list widget. Which is a common widget used in many online stores and restaurants for example. Updating prices and other product details is a lot easier, when you set them up with Dynamic WooCommerce Tags.
As you can see, I’ve set the Product Title and Description to display dynamically.
Drawing in the price is done the same way. Select Dynamic Tags, and from the list choose Product Price..
Then, search for the product. Great.
Now, Let’s say you change the price or create a product sale for this item, in its WooCommerce Settings.
These changes will automatically be applied in the price list widget.
By default it’s set to show both the Original as well as the Sales price.. You can change that in the format option.
And last but not least, these changes are also reflected anywhere this product appears on your site.
So, if you added it to a popup for example.. You’ll see it’s on sale as well!
All that’s missing here is a button. I’ll go ahead and set it to link to the product page, so visitors can see more details before making a purchase. Lastly I’ll set this popup to show on the entire site, when visitors intend to leave,
so they’ll see this cool discount popup and might consider checking it out!
Well that’s it! Now you know how to use Dynamic WooCommerce Tags. And set them up to display products or services.. anywhere on your website.. They not only enhance your eCommerce capabilities.. But also enable you to create stunning designs that increase sales!
Free to share your creations and ideas in the comments below.
As always, don’t forget to subscribe to our YouTube channel for more tips and tutorials.
Ciao for now!
