Using Elementor Popups And Hotspots For A Featured Product Section

A World Webscapes Tutorial

Get Started Now

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 (Demo Temporarily Offline)

The Process

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.