Feature Request: Pop up conditions/advanced rules - Custom Triggers #6899
A simple solution to display a popup when you click on the Add To Cart button of your products.
Creating an Elementor popup that appears when a user clicks the “Add to Cart” button on your WooCommerce products involves a few steps. Here’s a general guide:
1. Install and Activate Required Plugins:
- Elementor: A page builder plugin.
- Elementor Pro: The premium version of Elementor that includes the Popup feature.
- WooCommerce: The e-commerce plugin for WordPress.
2. Import the Popup in Elementor:
- In your WordPress dashboard, go to “Templates” under the Elementor menu.
- Download the popup below
- Click on “Import Templates”, Choose the file and hit “Import Now”.
3. Set Popup Display Conditions:
- In the Elementor editor, go to the Popup Settings (gear icon) at the bottom left.
- Under the Save options dropdown select “Display Conditions”.
- Under the “Conditions” window select, Include -> WooCommerce -> Products -> All.
- Save and Close.
4. Add this code snippet in your functions.php:
You’ll need to add the following snippet of code in your active theme’s functions.php file of your WordPress site.
<?php
// Removing WooCommerce Notices from Single Product Page.
remove_action( 'woocommerce_before_single_product', 'woocommerce_output_all_notices', 10 );
add_filter( 'wc_add_to_cart_message_html', '__return_false' );
// Optional - Adding a Class to Body if it contains Cart Items.
add_filter( 'body_class', 'add_body_class_for_cart_items' );
function add_body_class_for_cart_items( $classes ) {
if( ! WC()->cart->is_empty() )
$classes[] = 'has_items_in_cart';
return $classes;
}
// Function for Adding to Cart - Popup
add_action('wp_footer', 'single_added_to_cart_event');
function single_added_to_cart_event()
{
if( isset($_POST['add-to-cart']) && isset($_POST['quantity']) ) {
// Get added to cart product ID (or variation ID) and quantity (if needed)
$quantity = $_POST['quantity'];
$product_id = isset($_POST['variation_id']) ? $_POST['variation_id'] : $_POST['add-to-cart'];
// JS code goes here
?>
<?php
}
}
?>
5. What this code does?
We are customizing the behavior of the WooCommerce plugin. Let’s break down the code into sections to understand its functionality:
1. Removing Default WooCommerce Notices:
remove_action( 'woocommerce_before_single_product', 'woocommerce_output_all_notices', 10 );
add_filter( 'wc_add_to_cart_message_html', '__return_false' );
- The
remove_actionfunction removes the default WooCommerce notices from being displayed on the single product page. - The
add_filterfunction filters the HTML for the add-to-cart message, making it return false. This likely prevents the default message from being displayed.
2. Adding a Class to Body if it contains Cart Items (Optional):
add_filter( 'body_class', 'add_body_class_for_cart_items' );
function add_body_class_for_cart_items( $classes ) {
if( ! WC()->cart->is_empty() )
$classes[] = 'has_items_in_cart';
return $classes;
}
- This code adds a class (
has_items_in_cart) to the body of the page if the WooCommerce cart is not empty. This can be used for styling purposes or to apply specific styles when there are items in the cart.
3. Function for Adding to Cart - Popup:
add_action('wp_footer', 'single_added_to_cart_event');
function single_added_to_cart_event() {
// Check if the add-to-cart form is submitted with quantity
if( isset($_POST['add-to-cart']) && isset($_POST['quantity']) ) {
// Get added to cart product ID (or variation ID) and quantity
$quantity = $_POST['quantity'];
$product_id = isset($_POST['variation_id']) ? $_POST['variation_id'] : $_POST['add-to-cart'];
// JS code for displaying a popup (presumably an Elementor Popup) when a product is added to the cart
?>
<?php
}
}
- This code adds a JavaScript script to the footer of the page.
- The script listens for the addition of a product to the cart (
add-to-cartform submission with a quantity). - When a product is added, it uses jQuery to trigger the display of an Elementor Popup (identified by the document ID
128670). The popup ID can be customized based on your specific Elementor setup.
In summary, this code customizes the WooCommerce behavior by removing default notices, adding a class to the body when the cart is not empty, and triggering a popup when a product is added to the cart, specifically using Elementor Popups.
4 Responses
This looks really promising. Thank you for providing the code. But it does not work for me.
I inserted the code into the hello child theme and updated the 128670 to my popup ID.
Where might I have gone wrong ?
Thank you!
Hi Leon, thank you!
What error are you facing? Please record a video of the issue. Or please provide more details.
This is awesome, worked perfectly. Thank you!
Glad to know that. Cheers!