“add to cart” trigger?

Hi @alexliii

I hope you are doing well.

Your button class on Add to card is:

.single_add_to_cart_button

https://monosnap.com/file/Mh4T5VbhoOKVhNEe1QDd1j2722hGaV

Best Regards
Patrick Freitas

Hello,

Thanks for reply, and sorry that it does not work https://prnt.sc/MaBey5ixXgiu

I did test it by the following steps:

1# If only set Time Immediately, Popup will show immediately when access the page.

2# If input .single_add_to_cart_button, it does not work.

3# I tried input code in several ways：
.single_add_to_cart_button
or
single_add_to_cart_button (without .)
or
nm-simple-add-to-cart-button single_add_to_cart_button

but all do not work, would you please show a right patterm here? or any online tutorial to show how to trigger by a button in a page?

Hello,

I checked tutorial at https://wpmudev.com/docs/wpmu-dev-plugins/hustle/?utm_source=hustle&utm_medium=plugin&utm_campaign=hustle_pluginlist_docs

and it seems I need input class name of add to cart, since we need trigger the popup for all of “add to cart” button, so I test this class name in several ways, but all do not work:

#nm-simple-add-to-cart-button
#single_add_to_cart_button
#nm-simple-add-to-cart-button single_add_to_cart_button
#nm-simple-add-to-cart-button,#single_add_to_cart_button

so what is the right way or pattern here please?

Thanks

Hi @alexliii

You should add class like this exactly

.single_add_to_cart_button

This works out of the box on default WordPress setup with default WooCommerce configuration (I just tested it to confirm) but it may be affected by other plugin(s) or theme as it’s basically a JS “hooking up” to that element. JS scripts are quite “sensitive” and I see that on your site the “add to cart” button triggers some “side-panel” with additional cart widget. This means there’s also some other JS “hooked” to that button and that is quite likely to conflict here.

If I’m not mistaken you are using Savoy theme and this is a premium theme to which I have no access, so I can’t test it more on my end.

Is there any option to disable that “side panel” (the one that shows up upon clicking “add to cart” button)? If yes, try disabling it temporarily (just for testing) and see if popup works after that.

If not, try temporarily switching theme to Twenty Twenty Two and testing popup again. If it works, it would confirm that the theme is causing conflict.

Would you give it a try and let us know about results, please?

Kind regards,
Adam

Hello @wpmudev-support8,

Thanks for reply.

Yes, you are right, I just test it on a subsite for test purpose.

Please try it at https://tao.ooo/test/product/pendant-lamp/

In this case, the pop up will show up, but the problem is that no item will be added into cart.

So, is there anyway to all items to be added into cart, and then popup will be shown up with a set time delay?

Thanks

Hi @alexliii

Hm… you are actually right!

I’ve tested it and it worked in that sense that clicking on button triggered popup but I didn’t check if product is then added to cart. You are right – it is not, even on a fully default/standard setup.

It seems that this is due to JS used and hooking up popup trigger to this button simply prevents further execution of JS already hooked to it.

I admit I’m not sure if we can solve this and I need to consult it with our developers.

I’ve already asked them if it possible to overcome it but I’d appreciate some patience as they are dealing with a lot of complex tasks on daily basis and it might take them some time to check it and come up with solution (if it’s achievable).

I or one of my collagues will update you here again once we got more information from our developers.

Kind regards,
Adam

Hi @alexliii

I hope you are doing well.

We will need to use some custom scripts here,

You will find an example on:

https://gist.github.com/patrickfreitasdev/84d0ed9b3971202a9edb3c566a2d9fd4

And you can use it as a mu-plugin following this guide https://wpmudev.com/docs/using-wordpress/installing-wordpress-plugins/#installing-mu-plugins

We also need to make some changes to the code depending on how you would like to trigger the PopUp.

In case it is for All products please remove the line 12:

if( $product_id_trigger == $product_id ):

and just the:

endif;

Line 49 keeps the

<?php

Update the line 10:

$module_id = 188;

Adding your PopUp ID, it can be found in the URL while editing the PopUp.

Set a fake CSS class https://monosnap.com/file/rrq37b8CzVocEj6MVf6Q5PyiJRRFc1 it can be anything other than single_add_to_cart_button

This code uses the woocommerce_add_to_cart hook from Woocommerce that triggers when a product is added to the cart:

https://hookr.io/plugins/woocommerce/3.0.3/actions/woocommerce_add_to_cart/

Best Regards
Patrick Freitas

Thanks.

Here is the feedback:

1.# It works perfectly on the product page, please test it at https://tao.ooo/test/product/pendant-lamp/, and please note that I set 5 sec to auto-close.

2# But it might cause cart info does not to refresh after clicking “add to cart” on the shop achieve the page, and please check at https://tao.ooo/test/, and please check the screenshot at https://prnt.sc/j024CKhIgtRD, any way to fix?

3# On the main site, it does not work with the theme if there is a pop layer of the cart, any suggestions here?

Hi @alexliii,

1# Glad to know that the workaround resolved the issue.

2# I checked this at my end but couldn’t replicate the issue. Once I click on the Add to Cart button, the cart info is refreshed. Can you please re-check this at your end?

3# I was able to replicate the issue, and I noticed a lot of javascript errors in the browser console. I believe this is a conflict issue. Can you please bring this to the notice of the theme support and check if they can provide any insights?

Kind Regards,
Nebu John

Hi @alexliii,

Since we haven’t heard from you for a while. I’ll mark this thread as resolved for now. Please feel free to re-open the thread if you need further assistance.

Best Regards
Nithin