In this tutorial, we will show you how to add a popup to your WooCommerce shop archive page using Elementor’s Popup Builder.
You will also learn how to design the category archive pages using Elementor’s Theme Builder, as well as using the z-index and more.
heyo its ziz from elemental today I’ll
show you how to create amazing pop-ups
that blend in naturally with your
website and I will also show you how to
assign each pop-up to its corresponding
category and product archive page let’s
dive in and see how it’s done first off
as you can see we created this online
shop site where you can browse through
the products by category we also created
these separate product archive pages
each representing a category for example
accessories we use the WooCommerce
plugin to create the categories so in
dashboard go to the WooCommerce products
menu and click categories as you can see
we have already added them here now the
next step is to link each product
archive page to its corresponding
category you see over here in order to
do that go to templates theme builder
for example let’s go to the accessories
product archive hit the save options
arrow and go to display conditions go
ahead and set the categories over here
now you can do the same for the other
product archives as well now that we are
all sorted let’s move on to the pop ups
our goal is to create pop-ups that don’t
annoy the visitor rather blend in with
the webpage design language giving the
feeling that it’s part of the page first
off hit command + e to open the finder
go ahead and choose add new pop-up let’s
give it a name and create the template
now I have pre-made a pop-up for this
tutorial so let’s go to my templates and
insert it we will focus on the main
design concept of the pop-up and the
settings that make it blend in naturally
with a page let’s start off in the
settings tab in layout I will set the
entrance animation to slide in left this
will give the feeling that the pop-up
appears in a way that seems natural
the pop-up has been designed with the
category image in mind as you can see we
left the area above the button empty so
the image fits nicely let’s move on to
the Advanced tab here we will disable
page scrolling so set it to yes and this
way the pop-up in the
category image form and maintain a
cohesive design while at the same time
highlight the product now that we are
done with the main design settings let’s
move on to the conditions triggers and
advanced rules hit publish now first off
in the conditions section I will set
this specific pop-up to only appear in
the Accessories category archive page so
go ahead include WooCommerce product
categories and search for the category
and selected now that we’ve defined
where the pop-up will appear let’s carry
on and define which user actions will
trigger the pop-up tesha hit next I will
use the on scroll trigger and I want to
pop up to appear at 8% scrolling because
that is exactly the right moment and
position on the page where the webpage
overlay pop-up and category image all
together form the natural blend effect
we’re looking for great now let’s move
on to advanced rules here I will set
show on devices I will set it to only on
desktop because this specific animated
design concept is best for desktop you
can make custom pop-ups for mobile and
tablets as well so let’s hit save and
close and check it out as you can see
the pop-up looks great but the page
category image is behind the pop-up and
we want the image to appear above the
overlay and the pop-up in order to do
this go back to this product archive
template now go to the image widget and
under Advanced tab let’s set the z-index
to 10,000 because the pop-up overlay has
a default z-index setting of 9999 this
way the image is forced to appear above
the overlay and pop up hit the Update
button and let’s see it again
cool now all you need to do is apply the
same settings to the other pop-ups
the design concept remains the same we
just changed the images texts and colors
well that’s it now you know how to
create pop-ups that naturally blend in
with the website design language and set
to appear on specific category and
archive pages on your site don’t forget
to subscribe to our YouTube channel for
more tips and pop-ups tutorials see you
later
