0

I have created a product page using Woocommerce elementor widgets and I would like to better control the behaviour of the “add to cart” button (class="single_add_to_cart_button button alt wp-element-button").

Since I only have 1 product to sell, I placed the products and the cart widgets on the same page.

What I would like is that when I press on “add to cart” (ajouter au panier, in french), the user gets redirected to the bottom of the page (where the cart is). I have placed an Elementor menu anchor there (with CSS ID #shop) but I can't redirect the button to the anchor.

I believe I will need to write a PHP function but my understanding is way too limited unfortunately.

Thanks for your support,

C.

I tried using the "WooCommerce Add to Cart Custom Redirect" plugin (as suggested in this thread), which works such that the user gets redirected to the cart but by reloading the page. What I want is that the user stays on the same page and pressing on "Add to Cart" just slides down to the bottom of the page.

Corentin Wicht
  • 47
  • 4

1 Answers1

0

My advice would be to use jQuery, and a click handler with scrollIntoView(). The code could be inserted everywhere after the 'add to cart' button and the jQuery link tag, even to the bottom of the page as a simple script tag. It would look something like this:

$(document).ready(function(){
    // binding a click event to the button remotely
    $(".single_add_to_cart_button").click(function(){
        // scrolling to element '#shop'
        $("#shop")[0].scrollIntoView();
    });
});

PS: for adding the script, you can easily add it using Elementor's html- or custom code blocks.

EDIT: If the above solution does not work, then the problem might relates to Woocommerce constantly changing its DOM everytime a JS event runs that has something to do with the said part. Because of this, binding click handlers will not (or rather, not always) work, and setting a handler for the EVENT itself seems to be a better way:

jQuery(document.body).on("added_to_cart", function() {
    jQuery("#shop")[0].scrollIntoView();
});

The Javascript/jQuery events can be found here.

Important disclaimer, when the above code don't work out of the box:

For others who might experience the same issue, by default Woocommerce does a full page reload upon add-to-cart event, hence the JS event never takes place. If you enable add-to-cart with AJAX in WC settings, you'll get the JS event too. (source at the comments)

BorsodiGerii
  • 61
  • 5
  • thanks for your suggestion. I have implemented it as you suggested in an Elementor html block (at the bottom of the page) inside , but it still doesn't work unfortunately... Any idea? – Corentin Wicht Jan 24 '23 at 13:58
  • Does the console (F12 >> Console) gives you any errors? Perhaps you don't have jQuery imported in your website, or it is in isolation mode, in the latter case you have to change the `$` sings everywhere in the code to `jQuery` (case-sensitive); in the sooner case mentioned you have to import it BEFORE inserting the code, using a script tag like this: `` (if this solves the problem, you might want to consider moving the import to the `` of the document). Let me know, if these suggestions help! – BorsodiGerii Jan 25 '23 at 15:07
  • Many thanks, indeed there was an error related to `$`: `Uncaught TypeError: $ is not a function at (index):812:1`. Replacing `$` by `jQuery` led to another error: `Uncaught jQuery type scrollIntoView()... is not a function`. Finally, adding `src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"` fixed the issues, but it's still not working... Is there another way to import `jQuery` to my website in Wordpress (this might help)? – Corentin Wicht Jan 26 '23 at 07:37
  • I have read from this [thread](https://stackoverflow.com/questions/20931368/scrollintoview-is-not-a-function-upon-page-load) that : **scrollIntoView is part of the DOM API, not jQuery. You need to run it on an Element, not a jQuery object**. This may explain the `jQuery(...).scrollIntoView is not a function` error ? – Corentin Wicht Jan 26 '23 at 08:24
  • I forgot that, this case you have to add an index selector after the jQuery element in order for it to return an element, such as: `$(element)[0]` as listed in [this](https://stackoverflow.com/a/4884904/16952466) answer. But I think it isn't a problem related to the code (even though the above said fix is **neccessary**), but to the structure itself. Woocommerce works in a way, where it reloads its DOM everytime some events are happening. thus 'deconnecting' the click handlers from the elements they were previously binded to. In this situation, see my edit. – BorsodiGerii Jan 26 '23 at 12:10
  • thanks for the explanations and the fix (also the thread you provided helped a lot). So I installed the ["Ajax add to cart for WooCommerce"](https://quadlayers.com/woocommerce-ajax-add-to-cart/) plugin and now my [single product page](https://terredesmanants.ch/product/panier/) does not refresh anymore. But still, it doesn't behave as expected: while it effectively slides down when I press on "Add to cart", the the page slides up again to the top. Do you think I should also change the behavior of the cart (e.g. to, `jQuery( document.body ).trigger( 'cart_page_refreshed' );`) ? – Corentin Wicht Jan 27 '23 at 14:37
  • Yes, you can effectively try that. To be honest, thats where my woocommerce knowledge tops out, but you can trigger it yourself after scrolling to top, see if it helps. – BorsodiGerii Jan 28 '23 at 15:15
  • I will try it, thank you very much for your support. One last question, what would be an example code if I wanted to stop the behavior of the `'cart_page_refreshed'` (my knowledge of js is way too low)? – Corentin Wicht Jan 28 '23 at 15:28
  • I'm not sure if you can do that without changing the core js files Woocommerce has (which is highly not recommended, since they will be overwritten every time an update comes). What i would do instead if that really bothers you, is to 'dequeue' the script responsible for the `cart_page_refreshed` script code, and write it yourself. (You have to basically mimic down what it does, like updating the cart **frontend** manually with a trigger etc). [Here](https://stackoverflow.com/a/13576554/16952466) is an answer describing how it can be done :) – BorsodiGerii Jan 28 '23 at 22:38
  • Cont.: a good example would be if you would dequeue the default script, copy the whole script wrote by Woocommerce for that event, and delete from it what you don't want to see, add things you want to, and then enqueue it with the same name. This way you basically swapped the js file that is about to be loaded, but with slight modifications. – BorsodiGerii Jan 28 '23 at 22:40