fbpx
Real Time Solutions for Wordpress and Web Design in Knoxville Tennessee

Using Elementor Popups And Hotspots For A Featured Product Section

image

Using the new popups in Elementor 2.4 Pro to highlight and sell your product in a whole new way is a simple process but does take a few steps and repeated steps for a final result.

The Demo

Test drive the demo now.

Simply Stunning

FARHAD OUTFIT

$399

Sold Individually Or As A Complete Outfit Click On Outfit For Details

Details

Curabitur nec cursus lacus. Morbi ut lobortis purus, ut ultricies dui. Curabitur ultrices porttitor purus sed vestibulum. Nunc at libero convallis, sagittis sapien ut, eleifend ex. Aliquam porta vulputate eleifend. Duis nisl tortor, cursus et nisi luctus, dignissim mattis elit. Vivamus eu neque eu erat dictum finibus nec ut nisi.

Etiam vitae placerat velit. Duis maximus sodales eros vitae ultricies. Mauris vitae ipsum nunc. Suspendisse ornare maximus velit eu aliquet. Quisque eleifend tortor sed urna luctus hendrerit. Pellentesque sit amet erat metus. Curabitur congue dui a quam faucibus congue. Nam varius diam non magna molestie, nec viverra felis tempus. Ut gravida interdum sollicitudin. Vivamus tristique vestibulum diam, quis aliquam erat auctor ut. Cras mollis facilisis magna blandit bibendum.

Customer Rating

5/5

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 Jet Elements

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

Edit our button. From the dynamic options, choose popup. Then find our scarf popup and apply it to the button. Minimize your editor so you can preview the page. Right click on our button and copy the link address. Paste the link into our hotspot link but remove the URL and just leave the anchor tag starting with something like this “#elementor-action%3Aaction%3Dpopup%3Aopen%20settings%3DeyJpZCI6IjYyNTYiLCJ0b2dnbGUiOmZhbHNlfQ%3D%3D”

Repeat The Link Process.

Link all four of our popups to the hotspots using the method above.

Test Our Popups

The popups should now link to the hotspots and fire when called.

Fix Our Main Product Button.

We can now go back to our main product button and link it properly.

TADA!

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.

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest
ChrisAyers

ChrisAyers

Main Menu

Share on facebook
Share on twitter
Share on linkedin

While this site uses a minimal amount of cookies, we want to let you know, in case you are on a diet. Our privacy policy if you read these things.

Don't worry, we also hate Spammers.

E- Berry Ingredients

  • Base Template
  • Ingredient Template
  • Dynamic Buttons

THIS PRODUCT IS NOT ENDORSED BY ELEMENTOR PAGEBUILDER AND ONLY A POPUP DEMO

ELEMENTOR ENERGY WHEN YOU NEED IT!

WHEN YOUR POPUP IS JUST NOT ENOUGH TRY NEW E-BERRY  FLAVOR

CUSTOMER RATINGS

5/5
Share on facebook
Share on google
Share on twitter
Share on linkedin

Farhad Black Suede Heels

$129
99 $
  •  

Fabulous items for fabulous prices.
You deserve it.

Farhad Black Leather Purse

$159
99 $
  •  

Fabulous items for fabulous prices.
You deserve it.

Farhad Black Printed Trench

$199
159 $
  •  

Fabulous items for fabulous prices.
You deserve it.

Farhad Black Silk Scarf

$59
49 $
  •  

Fabulous items for fabulous prices.
You deserve it.