Exit popups can be a great way to capture leads, offer discounts, or keep customers engaged as they are about to leave your website. While many plugins offer this feature, you can create a simple exit popup in WooCommerce without relying on third-party plugins. This approach gives you full control over the design and functionality, without adding extra bloat to your site.
In this guide, we’ll show you how to create an exit popup using custom JavaScript and PHP. Additionally, we’ll show you how to accept shortcodes inside your popup content using the do_shortcode() function.
As always, it’s best practice to add custom code to your child theme so your changes aren’t overwritten by future updates.
Why Create an Exit Popup Without a Plugin?
Creating an exit popup without a plugin offers several advantages:
- Customisation: You have full control over the content, styling, and behaviour of the popup.
- Improved Performance: Without a plugin, there’s less chance of slowing down your site.
- Flexibility: You can include any custom feature you need, such as integrating shortcodes.
Custom Code to Create an Exit Popup
To create an exit popup, we will use a combination of JavaScript for the popup functionality and PHP to manage the popup content. Here’s the basic code that you can add to your theme’s functions.php file or, better yet, to a child theme.
JavaScript for the Exit Popup
/*
* Snippet: How to Create an Exit Popup Without a Plugin in WooCommerce – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=1514
* Tested with WooCommerce 10.7.0
* "This script shows an exit intent popup when the user attempts to leave the page"
*/
function wcsuccess_exit_popup_js() {
?>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
var exitPopupShown = false;
function showExitPopup() {
if (!exitPopupShown) {
var popup = document.getElementById("wcsuccess-exit-popup");
popup.style.display = "block";
exitPopupShown = true;
}
}
document.addEventListener("mouseout", function(event) {
if (event.clientY < 0 && !exitPopupShown) {
showExitPopup();
}
});
});
</script>
<?php
}
add_action( 'wp_footer', 'wcsuccess_exit_popup_js' );
HTML and CSS for the Popup
We also need to add the HTML structure for the popup and some basic CSS to style it. You can place this code in your theme’s footer.php file or include it via the wp_footer hook in your functions.php file.
/*
* Snippet: How to Create an Exit Popup Without a Plugin in WooCommerce – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=1514
* Tested with WooCommerce 10.7.0
* "This adds the HTML structure and CSS for the exit popup"
*/
function wcsuccess_exit_popup_html() {
?>
<div id="wcsuccess-exit-popup" style="display:none; position:fixed; top:20%; left:30%; width:40%; padding:20px; background-color:#fff; border:1px solid #ccc; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); z-index:1000;">
<h2>Wait! Don't leave just yet!</h2>
<p>Before you go, check out this special offer:</p>
<?php echo do_shortcode('[your_custom_shortcode]'); // Insert a shortcode ?>
<button onclick="document.getElementById('wcsuccess-exit-popup').style.display='none'">Close</button>
</div>
<?php
}
add_action( 'wp_footer', 'wcsuccess_exit_popup_html' );
Styling the Popup with CSS
You can also add custom styles to further refine the look of the popup. Add this to your theme’s style.css or load it directly using the wp_enqueue_style() function.
Using Shortcodes Inside the Popup
If you want to display dynamic content in your exit popup, such as a custom form or WooCommerce products, you can include a shortcode using the do_shortcode() function, as demonstrated in the HTML above. For example, to display a form created with Contact Form 7, you could replace [your_custom_shortcode] with the shortcode for the form:
echo do_shortcode('[contact-form-7 id="123" title="Exit Intent Form"]');This will dynamically display the form inside the popup. You can use this method to display any content that supports shortcodes, including WooCommerce products, forms, or special offers.
Instructions for Adding a Shortcode
To add a shortcode to the popup, follow these steps:
- Create your shortcode: For example, if you’re using a WooCommerce product shortcode, create it as needed:
echo do_shortcode('[products limit="3" columns="3" orderby="date" order="DESC"]');- Insert the shortcode in the popup HTML: As shown in the example code, place the shortcode within the
do_shortcode()function in the popup’s HTML content. - Save the changes: Once you’ve added your shortcode, save your changes and refresh the page to test it.
Best Use Cases for an Exit Popup
- Offer Discounts: Give users a last-minute discount to encourage them to stay and complete their purchase.
- Capture Emails: Use a shortcode to embed an email subscription form, such as one from Contact Form 7, to grow your mailing list.
- Showcase Products: Display related or popular products using WooCommerce’s product shortcode to entice users to keep shopping.
Conclusion
Exit popups are an effective way to keep visitors on your WooCommerce store, and creating one without a plugin gives you full control over its design and functionality. By adding the custom JavaScript and PHP snippets provided in this guide, you can easily create an exit popup that displays dynamic content using shortcodes.
Don’t forget to test the popup across devices and browsers to ensure it works smoothly. As always, add any custom code to a child theme to avoid losing your modifications when your theme updates. For more advanced WooCommerce customisations, explore our WooCommerce Visual Hooks Guide and wp-config generator to further optimise your store.
I have been working with WordPress and WooCommerce since 2012 and have developed a deep knowledge of the content management system. Since 2012, I have developed several plugins and designed dozens of websites utilising different frameworks, CMS’s and programming languages. I am proficient in PHP, Python, Java, C, C++, R and JavaScript with limited experience in Go, Kotlin and Swift.
Educationally, I have a Master’s degree in cyber security a Bachelor’s (Hons, First Class) in Applied Research and a Graduate Certificate in Data Science. I’m currently undertaking PhD studies investigating IoT cybersecurity. I recently graduated with First Class Honours and Masters of Information Technology, receiving the Executive Dean’s Award for studies undertaken in the 2021 and 2022 academic years. I have worked in the information technology industry for the past 11 years primarily as a software/web developer specific to design, optimisation, network management and security. My research interests are in the areas of Internet of Things (IoT), 5G and Beyond Networks, information security for wireless networks and software development.
Stay In Touch
