How to Display Popup on Button Click in a WordPress Website

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. 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. The main structure of the popup is already set. Let’s move on.

Popup on Button Click in WordPress


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).

Display Popup on Button Click

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. 


Add Custom Content


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.

Get Started

50% OFF

Mega bundle offer for you!

It consists of 3 different powerful plugins, each one allowing you to make your WordPress experience the best that could be.
Quiz + Poll + Survey