How to Display Popup on Button Click in a WordPress Website
Looking for a simple way to display a popup when someone clicks a button on your WordPress site? Whether you're promoting a special offer, collecting emails, or guiding users through your sales funnel, showing a popup on click is a smart move.
This is a beginner-friendly step-by-step tutorial on how to display popups on button clicks. Learn how to use on click trigger using the WordPress Popup plugin. This is a useful tool for increasing conversion rates. This trigger requires coding skills but with the Popup Box plugin, you will be able to do it with just a few easy steps.
With the right popup setup, you can grab user attention at the exact moment they’re most engaged. Plus, since you’re showing the popup only when someone clicks a button, it feels more intentional. That means better user experience and higher conversions.
This tutorial will guide you through the entire process, from plugin installation to connecting your popup to a specific button. No coding knowledge is required—just follow along and you’ll have your popup ready in no time.
So, if you're ready to boost engagement and drive more action on your site, let’s dive into the steps and get your click-triggered popup up and running today.
Read the article and add a button-click popup to your website within just minutes or even seconds.
Step 1: Crete your Popup
For the first step, you will need to, first of all, go to the Popup plugin and click on the Add new button for creating a new popup. Then choose your preferred popup type and template to match your branding elements and logo design. If you need custom visuals or graphics to enhance your popup, tools like CreateVista AI image generator can help you easily create branded images.
This ensures that your popup blends seamlessly with the rest of your site and maintains a professional appearance.
Most templates are responsive and customizable, so you can easily adapt them to suit your goals—whether you're promoting a product, offering a discount, or collecting emails.
The main structure of the popup is already set. Let’s move on.
Step 2: Choose the trigger
Now as we have already chosen our preferred type and template it’s time to add a button click trigger. For the second step, all we need to do is to go to the General Tab, scroll a little bit down and find the Popup trigger option. From the presented triggers choose the On click trigger. But this trigger works with CSS selector(s) for the trigger click option. You will need to add your preferred CSS selector(s).
Step 3: Find the CSS selector
For the third step, we will need to write the CSS selector. When a user clicks on a certain CSS element on your website, the trigger shows a popup. In the “CSS selector(s)” option, define the CSS element. You must provide the button’s value in the corresponding field (CSS selector). To do so, you must choose a button and enter the class name of the selected button into the CSS selector field. For finding the class name, open the inspect element.
Press on the left click >Inspect > find the needed button “class” > copy everything that is inside the quotation marks.
That’s all. Now the popup is ready to be opened with just a button click.
Why do we need to display popups on button click?
Button-click popups are a well-known way of increasing the conversion rate of the website. The traditional popup openings are somehow known to be an expected way. But how to add more engagement to your popup? Yes, open it at the appropriate but at the same time in the most unexpected way. They have a great advantage over the traditional ones. To promote more visitors to subscribe to your email list, complete a form, register on your website, and do other actions, use clickable popup buttons.
Wrapping Up!
This guide displays all the steps that are needed for creating a popup and opening it with a button click. You do not have to be a good programmer or have coding skills for adding this option to your popup. Even if you were not familiar with CSS selectors and didn’t know how to find them, now you are already a master.
To keep up with the latest news, be sure to subscribe to our YouTube channel and check the Blog.
