Using the new popups in Elementor Pro to highlight and sell your product in a whole new way is a simple process but does take a few repeated steps for a final result.
TRY THE DEMO NOW
Creating this result takes a few steps in Photoshop or another editor. We will create our large image and the individual parts. We will upload these to the media library.
Create Your Products
Create all your products in WooCommerce. And add the details.
Creating Our First Popup
Create a new popup template with Elementor. We will add our closeup images to the template along with the price. We will link the order now button to the product in our WooCommerce shop. We will set the conditions of the popup to display on entire site but not set any triggers or advanced functions and save our template
Repeat The Popups
Repeat the popup process for the remaining closeups.
Creating Our Feature Section
We create a two column layout and add our product details to the right column. Do not set a link for the large product button yet.
Add Our Hotspot Widget From Ultimate Add Ons For Elementor
Locate this icon from your toolbox. Add it to the right column.
Adding Our Hotspots
Here you can see I have added our primary image and four hotspots over my image.
Linking Our Popups
Use the dynamic options under the Marker Link Area to add your popups
Repeat The Link Process.
Link all four of our popups to the hotspots using the method above.
The popups should now link to the hotspots and fire when called.
We hope this tutorial helps you build amazing featured product sections for your website. Please do not forget to smash the like button on the way out the door.