{"id":2360,"date":"2021-06-21T11:09:50","date_gmt":"2021-06-21T11:09:50","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=2360"},"modified":"2023-04-24T13:15:48","modified_gmt":"2023-04-24T13:15:48","slug":"create-a-popup-for-your-wordpress-shop-archive-page","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/create-a-popup-for-your-wordpress-shop-archive-page\/","title":{"rendered":"Create a Popup For Your WordPress Shop Archive Page"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2360\" class=\"elementor elementor-2360\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4d940dcf elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4d940dcf\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5a8515de\" data-id=\"5a8515de\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7d9b65e6 elementor-widget elementor-widget-video\" data-id=\"7d9b65e6\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=w80NU9kcHIc&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3fc22ffe elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3fc22ffe\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2a82ad8e\" data-id=\"2a82ad8e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-52da8d62 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"52da8d62\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1391\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1391\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1392\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1392\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1391\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1391\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1391\" tabindex=\"0\" hidden=\"false\"><p>In this tutorial, we will show you how to add a popup to your WooCommerce shop archive page using Elementor&#8217;s Popup Builder.<\/p><p>You will also learn how to design the category archive pages using Elementor&#8217;s Theme Builder, as well as using the z-index and more.<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1392\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1392\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1392\" tabindex=\"0\" hidden=\"hidden\"><p>heyo its ziz from elemental today I&#8217;ll<br \/>show you how to create amazing pop-ups<br \/>that blend in naturally with your<br \/>website and I will also show you how to<br \/>assign each pop-up to its corresponding<br \/>category and product archive page let&#8217;s<br \/>dive in and see how it&#8217;s done first off<br \/>as you can see we created this online<br \/>shop site where you can browse through<br \/>the products by category we also created<br \/>these separate product archive pages<br \/>each representing a category for example<br \/>accessories we use the WooCommerce<br \/>plugin to create the categories so in<br \/>dashboard go to the WooCommerce products<br \/>menu and click categories as you can see<br \/>we have already added them here now the<br \/>next step is to link each product<br \/>archive page to its corresponding<br \/>category you see over here in order to<br \/>do that go to templates theme builder<br \/>for example let&#8217;s go to the accessories<br \/>product archive hit the save options<br \/>arrow and go to display conditions go<br \/>ahead and set the categories over here<br \/>now you can do the same for the other<br \/>product archives as well now that we are<br \/>all sorted let&#8217;s move on to the pop ups<br \/>our goal is to create pop-ups that don&#8217;t<br \/>annoy the visitor rather blend in with<br \/>the webpage design language giving the<br \/>feeling that it&#8217;s part of the page first<br \/>off hit command + e to open the finder<br \/>go ahead and choose add new pop-up let&#8217;s<br \/>give it a name and create the template<br \/>now I have pre-made a pop-up for this<br \/>tutorial so let&#8217;s go to my templates and<br \/>insert it we will focus on the main<br \/>design concept of the pop-up and the<br \/>settings that make it blend in naturally<br \/>with a page let&#8217;s start off in the<br \/>settings tab in layout I will set the<br \/>entrance animation to slide in left this<br \/>will give the feeling that the pop-up<br \/>appears in a way that seems natural<br \/>the pop-up has been designed with the<br \/>category image in mind as you can see we<br \/>left the area above the button empty so<br \/>the image fits nicely let&#8217;s move on to<br \/>the Advanced tab here we will disable<br \/>page scrolling so set it to yes and this<br \/>way the pop-up in the<br \/>category image form and maintain a<br \/>cohesive design while at the same time<br \/>highlight the product now that we are<br \/>done with the main design settings let&#8217;s<br \/>move on to the conditions triggers and<br \/>advanced rules hit publish now first off<br \/>in the conditions section I will set<br \/>this specific pop-up to only appear in<br \/>the Accessories category archive page so<br \/>go ahead include WooCommerce product<br \/>categories and search for the category<br \/>and selected now that we&#8217;ve defined<br \/>where the pop-up will appear let&#8217;s carry<br \/>on and define which user actions will<br \/>trigger the pop-up tesha hit next I will<br \/>use the on scroll trigger and I want to<br \/>pop up to appear at 8% scrolling because<br \/>that is exactly the right moment and<br \/>position on the page where the webpage<br \/>overlay pop-up and category image all<br \/>together form the natural blend effect<br \/>we&#8217;re looking for great now let&#8217;s move<br \/>on to advanced rules here I will set<br \/>show on devices I will set it to only on<br \/>desktop because this specific animated<br \/>design concept is best for desktop you<br \/>can make custom pop-ups for mobile and<br \/>tablets as well so let&#8217;s hit save and<br \/>close and check it out as you can see<br \/>the pop-up looks great but the page<br \/>category image is behind the pop-up and<br \/>we want the image to appear above the<br \/>overlay and the pop-up in order to do<br \/>this go back to this product archive<br \/>template now go to the image widget and<br \/>under Advanced tab let&#8217;s set the z-index<br \/>to 10,000 because the pop-up overlay has<br \/>a default z-index setting of 9999 this<br \/>way the image is forced to appear above<br \/>the overlay and pop up hit the Update<br \/>button and let&#8217;s see it again<br \/>cool now all you need to do is apply the<br \/>same settings to the other pop-ups<br \/>the design concept remains the same we<br \/>just changed the images texts and colors<br \/>well that&#8217;s it now you know how to<br \/>create pop-ups that naturally blend in<br \/>with the website design language and set<br \/>to appear on specific category and<br \/>archive pages on your site don&#8217;t forget<br \/>to subscribe to our YouTube channel for<br \/>more tips and pop-ups tutorials see you<br \/>later<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview In this tutorial, we will show you how to add a popup to your WooCommerce shop archive page using Elementor\u2019s Popup Builder. You will also learn how to design the category archive pages using Elementor\u2019s Theme Builder, as well as using the z-index and more. Transcript heyo its ziz from elemental today [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":9717,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4,14],"tags":[41],"class_list":["post-2360","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","category-pop-up","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Create a Popup For Your WordPress Shop Archive Page - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/create-a-popup-for-your-wordpress-shop-archive-page\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a Popup For Your WordPress Shop Archive Page - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this tutorial, we will show you how to add a popup to your WooCommerce shop archive page using Elementor\u2019s Popup Builder. You will also learn how to design the category archive pages using Elementor\u2019s Theme Builder, as well as using the z-index and more. Transcript heyo its ziz from elemental today [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/create-a-popup-for-your-wordpress-shop-archive-page\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-21T11:09:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-24T13:15:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Popup-For-Your-WooCommerce-Archive-Page.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create a Popup For Your WordPress Shop Archive Page - Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/create-a-popup-for-your-wordpress-shop-archive-page\/","og_locale":"en_US","og_type":"article","og_title":"Create a Popup For Your WordPress Shop Archive Page - Academy","og_description":"Overview Transcript Overview In this tutorial, we will show you how to add a popup to your WooCommerce shop archive page using Elementor\u2019s Popup Builder. You will also learn how to design the category archive pages using Elementor\u2019s Theme Builder, as well as using the z-index and more. Transcript heyo its ziz from elemental today [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/create-a-popup-for-your-wordpress-shop-archive-page\/","og_site_name":"Academy","article_published_time":"2021-06-21T11:09:50+00:00","article_modified_time":"2023-04-24T13:15:48+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Popup-For-Your-WooCommerce-Archive-Page.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/create-a-popup-for-your-wordpress-shop-archive-page\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/create-a-popup-for-your-wordpress-shop-archive-page\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"Create a Popup For Your WordPress Shop Archive Page","datePublished":"2021-06-21T11:09:50+00:00","dateModified":"2023-04-24T13:15:48+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/create-a-popup-for-your-wordpress-shop-archive-page\/"},"wordCount":836,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/create-a-popup-for-your-wordpress-shop-archive-page\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Popup-For-Your-WooCommerce-Archive-Page.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout","Pop Up"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/create-a-popup-for-your-wordpress-shop-archive-page\/","url":"https:\/\/elementor.com\/academy\/create-a-popup-for-your-wordpress-shop-archive-page\/","name":"Create a Popup For Your WordPress Shop Archive Page - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/create-a-popup-for-your-wordpress-shop-archive-page\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/create-a-popup-for-your-wordpress-shop-archive-page\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Popup-For-Your-WooCommerce-Archive-Page.jpg","datePublished":"2021-06-21T11:09:50+00:00","dateModified":"2023-04-24T13:15:48+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/create-a-popup-for-your-wordpress-shop-archive-page\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/create-a-popup-for-your-wordpress-shop-archive-page\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/create-a-popup-for-your-wordpress-shop-archive-page\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Popup-For-Your-WooCommerce-Archive-Page.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Popup-For-Your-WooCommerce-Archive-Page.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/create-a-popup-for-your-wordpress-shop-archive-page\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"Create a Popup For Your WordPress Shop Archive Page"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2360","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=2360"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2360\/revisions"}],"predecessor-version":[{"id":9483,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2360\/revisions\/9483"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/9717"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=2360"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=2360"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=2360"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}