Woocommerce Question posted in
The official Woocommerce documentation can be found here.

How do you trigger Elementor Popup via code – Woocommerce

is anybody here using Elementor? How do you trigger the Popup via code? For example.

function popup_call(){
    ...
    if(....){
        //trigger the popup here...
    } 
}
Tags:

5

Answers


  1. Chosen as BEST ANSWER
    0

    Elementor's Popup needs to be register and trigger. This topic might help you.

    Use the wp_footer hook to register your popup.

    add_action( 'wp_footer', 'your_popup_function', 10, 5);
function your_popup_function(){
    
    if(..assuming your condition is true..){
        
        $popup_id = '2409'; //your Popup ID.
        ElementorProModulesPopupModule::add_popup_to_location( $popup_id ); //insert the popup to the current page

        ?><script>
        jQuery( document ).ready( function() { //wait for the page to load
            /* You can do more here, this will just show the popup on refresh of page, but hey this is JQuery so you can do more things here depending on your condition to trigger the popup */
            jQuery( window ).on( 'elementor/frontend/init', function() { //wait for elementor to load
                elementorFrontend.on( 'components:init', function() { //wait for elementor pro to load
                    elementorFrontend.documentsManager.documents[<?php echo $popup_id ;?>].showModal(); //show the popup
                } );
            } );
        } );
         </script>;
         <?php
    }
    
    return; //return nothing by default and do not show the popup.
 }

    Read the comments for more clarification.


  2. 0

    This question has already been answered:

    // accessible on window.elementorProFrontend
elementorProFrontend.modules.popup.showPopup( { id: 123 } );

    https://github.com/elementor/elementor/issues/7077#issuecomment-595570337

    or try to bind your popup to a button, hide the button with css

    .yourbtn {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

    and use click with js (jquery)

     $('.yourbtn').click();

    If the second method helps you, do not forget to hide the button from screen readers
    aria-hidden="true" and tabindex="-1"

    Login or Signup to reply.
  3. 0

    I don’t know why you need code, if you need to open a pop up on click and without showing the url at the buttom of browser (works like an a tag), give "Custom Classes" a try.

    Login or Signup to reply.
  4. 0

    for me, it worked like this with WordPress 5.7.2 and elementor pro 3.2.1

    function popup_call(){
...
if(....){
    //trigger the popup here...
    echo"<script>  window.onload = function() {   
    elementorProFrontend.modules.popup.showPopup( {id:13000}, event);    }  
    </script>";
} 
  }

    Just set the ID

    Login or Signup to reply.
  5. 0

    https://github.com/sukiwp/popup-trigger-url-for-elementor-pro

    You are required to set the Display Conditions settings of your popup to pages where you want the popup to show. Otherwise, your popup won’t show up.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search