Trigger a JQuery click once product is added to cart on WooCommerce single products

Question

I was trying to make a sidebar using mini-cart.php on woocommerce and so far im doing okay, but i wanted to trigger the sidebar after i click on "add to cart" button on page product.

I found Run javascript code after ajax add to cart event in Woocommerce answer and I made some changes to the code:

add_action( 'wp_footer', 'trigger_for_ajax_add_to_cart' );
 function trigger_for_ajax_add_to_cart() {
 ?>
    <script type="text/javascript">
        (function($){
            $('body').on( 'click', '.single_add_to_cart_button', function(){
                $( ".open-side-cart" ).trigger( "click" );
            });
        })(jQuery);
    </script>
 <?php
}

What I want is to trigger the mini-cart.php sidebar when the user clicks on the ".single_add_to_cart_button" class button, and it works. But as woocommerce reloads the page updating the mini-cart.php, so the trigger works before reloading the page.

Is there a way to trigger after reloading the page?

Sorry but Ajax add to cart doesn't reload any page, that's why it uses Ajax, to avoid any page reload. So it seems that you are using Normal add to cart button on single product pages and then the page get reloaded as the data is posted via a form. So you should edit your question, removing "Ajax"… — LoicTheAztec, Nov 19 '20 at 20:11

LoicTheAztec · Accepted Answer · 2020-11-20T11:40:35.973

As you are not using Ajax add to cart, when product is added to cart the page reloads as product data is posted… Then you can check for $_POST['add-to-cart'] to display the active part of your jQuery script, once the page is reloaded as follows:

add_action( 'wp_footer', 'trigger_for_ajax_add_to_cart' );
function trigger_for_ajax_add_to_cart() {
    if ( isset($_POST['add-to-cart']) && $_POST['add-to-cart'] > 0
    && isset($_POST['quantity']) && $_POST['quantity'] > 0 ) :
    ?>
    <script type="text/javascript">
        (function($){
            $( ".open-side-cart" ).trigger( "click" );

            // Display an alert for testing purpose (To be removed)
            alert('".open-side-cart" Click!');
        })(jQuery);
    </script>
    <?php
    endif;
}

Code goes in functions.php file of the active child theme (or active theme). Tested and works.

In some cases you may need to add a delay, so in this case you can replace:

        $( ".open-side-cart" ).trigger( "click" );

by the following code block:

        setTimeout(function(){
            $( ".open-side-cart" ).trigger( "click" );
        }, 500);

Thanks for your reply, it is still not working after many attempts. but I have an idea. Whenever a product is added to the cart woocommerce shows a message "your product has been added to the cart" this msg is wrapped in a div with the class `.woocommerce-message`, I tried using jQuery and did something like this `$(".woocommerce-message").each(function() {if ($(this).css("visibility") == "visible") {$(".open-side-cart").click();} else {//nothing happen;}` but still not working can you tell why? i did something wrong? — IamLearningPHP, Nov 20 '20 at 05:57
It work! in my cases a delay was the solution thank you so much — IamLearningPHP, Nov 20 '20 at 14:43

score 1 · Answer 2 · answered Nov 26 '20 at 23:58

Thanks @LoicTheAztec I found an solution.

In my case I was unable to trigger jQuery using $ _POST ['add-to-cart'].

My solution was to use an alternative method, every time a product is added to the cart a message appears and says "(product name) added to the cart" the text appears inside a div with the class .woocommerce-message.

using this method i created a trigger for every time this message appears will click on the class .open-side-cart and the side cart will appear

The code:

add_action( 'wp_footer', 'trigger_for_ajax_add_to_cart' );

function trigger_for_ajax_add_to_cart() {
    //Only trigger if is single product page
    if ( is_product() )  {
    ?>
            <script type="text/javascript">
                (function($){
                        //If .woocommerce-message is visible
                        $(".woocommerce-message").each(function() {
                                if ($(this).css("visibility") == "visible") {

                                    //Trigger side cart .open-side-cart
                                    setTimeout(function(){
                                        $( ".open-side-cart" ).click();
                                    }, 500);

                                    //Nothing Happen
                                } else {
                                        return false;
                                }
                        });
                })(jQuery);
            </script>
    <?php
    }
}

Trigger a JQuery click once product is added to cart on WooCommerce single products

2 Answers2

Linked