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

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.

BAND MEMBER BIO
WhAT I DO

Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Pellentesque commodo eros a enim. Ut varius tincidunt libero. Maecenas nec odio et ante tincidunt tempus. Etiam sit amet orci eget eros faucibus tincidunt.

Vivamus aliquet elit ac nisl. Vestibulum eu odio. Quisque id mi. Nullam cursus lacinia erat. Ut a nisl id ante tempus hendrerit.

 

pie-chart
Here's Subtitle

Designed for Visual Storytelling

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Malesuada fames ac turpis egestas sed tempus urna. Sed risus ultricies tristique nulla aliquet enim tortor at. Dictum varius duis at consectetur. Faucibus in ornare quam viverra orci. Sapien pellentesque habitant morbi tristique senectus et netus. Nulla aliquet enim tortor at. Nunc consequat interdum varius sit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Malesuada fames ac turpis egestas sed tempus urna. Sed risus ultricies tristique nulla aliquet enim tortor at. Dictum varius duis at consectetur. Faucibus in ornare quam viverra orci. Sapien pellentesque habitant morbi tristique senectus et netus. Nulla aliquet enim tortor at. Nunc consequat interdum varius sit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Malesuada fames ac turpis egestas sed tempus urna. Sed risus ultricies tristique nulla aliquet enim tortor at. Dictum varius duis at consectetur. Faucibus in ornare quam viverra orci. Sapien pellentesque habitant morbi tristique senectus et netus. Nulla aliquet enim tortor at. Nunc consequat interdum varius sit.

 

The Artist
Lead Vocals

Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Pellentesque commodo eros a enim. Ut varius tincidunt libero. Maecenas nec odio et ante tincidunt tempus. Etiam sit amet orci eget eros faucibus tincidunt.

Morbi nec metus. Nunc nonummy metus. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus ullamcorper ipsum rutrum nunc.

pie-chart.png
photo-1519345182560-3f2917c472ef.jpeg

JON CARELL

Manager

Wolf coloring book tofu sceer polarid bushick crucifix bicycle bespoke leggings quina. Artisan gapub upper.

Schlitz distillery vice wolf coloring book tofu scenester polaroid bushwick crucifix bicycle rights bespoke leggings quinoa. Artisan gastropub biodiesel scenester keffiyeh. 

Floring book tofu sceer polarid bushick crucifix bicycle bespoke leggings quina. Artisan gapub upper. Distillery vice wolf coloring book tofu scenester polaroid bushwick crucifix bicycle rights bespoke leggings quinoa. Artisan gastropub biodiesel scenester keffiyeh.