{"id":26569,"date":"2016-06-07T23:01:41","date_gmt":"2016-06-07T15:01:41","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=26569"},"modified":"2024-06-20T20:11:42","modified_gmt":"2024-06-20T12:11:42","slug":"create-converting-popups-woocommerce","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/create-converting-popups-woocommerce\/","title":{"rendered":"How to Create Effective Popups For Your Online Store"},"content":{"rendered":"

Popups may be the most hated thing on websites today, but they are immensely effective when it comes to driving traffic and getting subscriptions<\/strong> to your site. Herein lies another problem: as some popups are so popular, they are overused by website owners and online marketers, but unfortunately, they\u2019re rarely configured properly<\/strong>.<\/p>\n

In this article, we\u2019ll take a look at how to create converting popups for WooCommerce sites using Popups \u2013 WordPress Popup<\/a>, one of the most popular WordPress popup plugins that allow you to target your modals for maximum efficiency<\/strong>.<\/p>\n

What Makes an Effective Popup?<\/h2>\n

If you wish to create effective popups, the best thing you can do is to fire them at the right moment<\/strong>, so you don\u2019t only avoid annoying your audience but can also have them actually take a look at it, and consider your message.<\/p>\n

This is only possible if you set up your popups based on your visitors\u2019 on-site activity<\/strong>. So when you\u2019re choosing a popup plugin for your WordPress site, make sure to find one that allows you to fire modals on selected pages<\/strong>, and after a pre-defined period of time has passed<\/strong>.<\/p>\n

Why Your Popup Doesn\u2019t Work<\/h2>\n

When a popup doesn\u2019t convert, it usually happens because visitors get annoyed with it. This makes them not only avoid performing the action the popup calls them to perform, but sometimes they completely abandon the site.<\/p>\n

A popup is generally considered annoying<\/strong> when:<\/p>\n

    \n
  1. The viewer cannot find any connection<\/strong> between its content and their momentary mindset<\/li>\n
  2. It\u2019s hard to close<\/strong><\/li>\n
  3. It fires at once<\/strong>, before any other content becomes visible<\/li>\n<\/ol>\n

    You don\u2019t have to be a web-based mindreader to guess what your users are thinking about. Just track their actions, and understand what they\u2019re doing or what pages they\u2019re actually looking at.<\/p>\n

    Installing Popups \u2013 WordPress Popup<\/h2>\n

    To start creating your popups, first go to the Plugins > Add new<\/code> admin menu in your WordPress dashboard. Search for Popups \u2013 WordPress Popup<\/strong>, click install, and then activate the plugin.<\/p>\n

    The plugin registers and creates a new post type<\/strong>, and places a completely new menu item into your admin bar called Popups<\/code>. Just as with posts and pages, clicking on the top-level menu item will display a list of your currently created, active or inactive popups.<\/p>\n

    \"plugin-list\"<\/figure>\n

    You can now easily add new popups to your site by selecting the Popups > Add new<\/code> submenu in your admin menu or by choosing New > Popups<\/code> in your admin bar.<\/p>\n

    Configuration Options<\/h2>\n

    When you add a new popup, you\u2019ll be presented with a screen similar to the one you see when writing new posts. On top of this, Popups \u2013 WordPress Popup also provides in-depth configuration options. Let\u2019s look at some of the basic features it has.<\/p>\n

    1. Making Edits with a WYSIWYG Editor<\/h2>\n

    This is your usual WYSIWYG editor<\/a> for any WordPress content, so you\u2019re probably already familiar with it. The popup editor also adds your Popup Appearance<\/strong> options (see below), so you can really see how your final popup will look.<\/p>\n

    \"Popup<\/figure>\n

    2. Display Social Accounts Using Shortcodes<\/h2>\n

    If you want to display a Facebook page box or any other linked social account in your popup, this plugin enables you to do that by providing you with some shortcodes.<\/p>\n

    By clicking on the View options<\/code> link below each shortcode, you\u2019ll see how you can customize these modals. The best way to learn using these shortcodes is to experiment with them.<\/p>\n

    If I wanted to include a Likebox of Hongkiat\u2019s Facebook page in my default popup, I would choose the first shortcode in the list, and following the guidelines, I\u2019d fill in the required data. Here is the shortcode I will end up with:<\/p>\n

    \r\n [spu-facebook-page href=\"https:\/\/www.facebook.com\/hongkiatcom\/\"\r\n name=\"hongkiat.com\" show_faces=\"false\" hide_cover=\"true\"\r\n action=\"like\" width=\"500\"]\r\n <\/pre>\n
    By adding this shortcode to the bottom of my popup, the result would look like this:<\/p>\n
    \"Popup<\/figure>\n
    3. Customize Box Appearance<\/h2>\n
    In the Popup Appearance<\/strong> option box, you can easily customize the appearance of your final popup by setting the appropriate values.<\/p>\n
    For example, if I wanted to have a red-bordered popup with a plain white background, I\u2019d set up Background color<\/code> and Border color<\/code> accordingly.<\/p>\n
    \"Popup<\/figure>\n
    \"Popup<\/figure>\n
    4. Customize Popup Display Rules<\/h2>\n
    This is probably the most important option box, where you can set up successful call-to-actions<\/strong>. In this box, you can set the conditions when the plugin will show your popup<\/strong>. The more precisely targeted and thus relevant your popups are, the better they\u2019ll convert!<\/p>\n
    The easiest way to understand Popup Display Rules is to treat the three components (each marked with its separate input bar, see the screenshot below) of the settings as parts of a compound sentence<\/a>.<\/p>\n
    You can add as many rules as you want<\/strong> by clicking on the and<\/code> button at the end of your rule, or by adding a completely new ruleset<\/strong> by clicking on the Add rule group<\/code> button at the bottom of the box.<\/p>\n
    Rules you add with the and<\/code> button will allow your popup to show up when all the conditions inside the given rule group are met<\/strong>. New rule groups are added as an OR statement, therefore when you have more than one rule group, your popup will fire whenever any of the rule groups<\/strong> is valid.<\/p>\n
    Let\u2019s say I want to show a popup only on my front page for non-smartphone users, and I also want to show it to anyone viewing my products. So for this popup I will use the following conditions:<\/p>\n
    First Rule Group:<\/strong><\/p>\n