Looking to open your WooCommerce checkout in a popup using Elementor? In this complete step-by-step tutorial, you’ll learn how to create a custom WooCommerce popup checkout that improves user experience and helps reduce cart abandonment.
This guide includes the full video walkthrough plus the exact custom code you can copy and use on your own WordPress website.
Whether you’re using Elementor Pro or customizing WooCommerce checkout pages, this tutorial will help you optimize your eCommerce store for higher conversions.
Creating a WooCommerce checkout popup with Elementor is a powerful way to streamline the buying process and improve your store’s conversion rate.
Copy the code below, and paste it inside the functions.php file of your child theme.
<script>
(function ($) {
$(document).ready(function ($) {
var POPUP_ID = XXX; // ← Replace with your popup ID
var FLAG = 'wc_open_popup_after_reload';
// When the buy/add-to-cart button is clicked
$(document).on('click', '.single_add_to_cart_button', function() {
sessionStorage.setItem(FLAG, 'true');
});
// After page reload, check if flag exists
if (sessionStorage.getItem(FLAG) === 'true') {
sessionStorage.removeItem(FLAG);
// Small delay ensures Elementor is fully loaded
setTimeout(function(){
if (typeof elementorProFrontend !== 'undefined' &&
elementorProFrontend.modules &&
elementorProFrontend.modules.popup) {
elementorProFrontend.modules.popup.showPopup({
id: POPUP_ID
});
}
}, 400);
}
});
})(jQuery);
</script>Remember to replace XXX with the actual ID of your Elementor popup.
Conclusion
By keeping customers on the same page and removing unnecessary redirects, you create a smoother and more modern shopping experience.
With the step-by-step video and the custom code provided above, you now have everything you need to implement this on your own WordPress website.
Take the time to test the popup on different devices, optimize the design for clarity, and monitor your conversions to see the impact.
If you found this tutorial helpful, feel free to explore more WooCommerce and Elementor guides on the site to continue improving your online store.
