adding products on the checkout page

Resolved bwragg
(@bwragg)

8 years, 7 months ago

Hi,

I’ve customised the checkout templates to run the [sale_products per_page=”4″ columns=”4″] shortcode so that it displays sale item in the body of the checkout page.

I have the woocommerce Ajax cart option turned on and it must remain on for the rest of the site.

Problem I’m having is that if I click the “Add to Cart” button it updates the cart in the header but the Order below it doesn’t get updated.

I’ve been searching for hours for a solution and can’t figure it out so is there a way to trigger an Order refresh on the checkout page?

I’ve thought about the following ways to approach it:
1) disabling the Ajax cart just for that page.
2) add an extra trigger somewhere that notices when an item is added to the cart and then forces an ajax refresh of the order or a refresh of the page.

Thanks,

bwragg

https://wordpress.org/plugins/woocommerce/

Viewing 7 replies - 1 through 7 (of 7 total)

Plugin Support Mike M. a11n
(@mikedmoore)

Automattic Happiness Engineer

8 years, 7 months ago
Hi. I’ve managed to get this working via jQuery.
```
$('.woocommerce-checkout .add_to_cart_button').click(function(){
    setTimeout(function(){
        $( 'body' ).trigger( 'update_checkout' );
    }, 1000);
});
```
This will run the update_checkout function 1 second after the add to cart button has been clicked on the checkout page. I added the timeout because I found that sometimes the cart would refresh before the product was added.
Thread Starter bwragg
(@bwragg)

8 years, 7 months ago

Thanks Mike. Thats awesome! Your a life saver!

I’ve done some customising of woo commerce via hooks/actions/filters but I haven’t done much on the client side. Where do I stick this code? Can I just add it in my themes custom js file?

Plugin Support Mike M. a11n
(@mikedmoore)

Automattic Happiness Engineer

8 years, 7 months ago

Yeah. Any JS file that will be called on that page. Typically your theme will have a scripts.js, or custom.js you can use. Some themes have a panel in the theme options section for custom JS.

I tried a lot of different combinations with hooks to no avail. I have a feeling there is a better solution using hooks. I’d be curious to see it.

Thread Starter bwragg
(@bwragg)

8 years, 7 months ago

Hi Mike,

Just added it and I’m getting this error when I inspect the page:

[Error] TypeError: undefined is not a function (evaluating ‘$(‘.woocommerce-checkout .add_to_cart_button’)’)

any ideas? Sorry for my cluelessness with js.

Thanks
Plugin Support Mike M. a11n
(@mikedmoore)

Automattic Happiness Engineer

8 years, 7 months ago
Without seeing your JS file, I can’t say exactly where to put it. It should be inside of a wrapper like:
```
(function ($) {
    //add the function here
}(jQuery));
```
or you could replace the $ with the word jQuery in both spots in the code I posted earlier. If you can’t work it out, post your JS file and I’ll let you know.
Thread Starter bwragg
(@bwragg)

8 years, 7 months ago
Hi Mike,

Thanks so much. It was just my lack of knowledge of jquery. For future reference if anyone needs this solution below is the code that worked:
```
(function ($) {
  $('.woocommerce-checkout .add_to_cart_button').click(function(){
    setTimeout(function(){
      $( 'body' ).trigger( 'update_checkout' );
    }, 1000);
    });
}(jQuery));
```
Thanks again Mike.
Plugin Support Mike M. a11n
(@mikedmoore)

Automattic Happiness Engineer

8 years, 7 months ago

No problem. You should test, adding multiple products, to make sure this is working on your server. You may need to increase the delay time or may be able to lower/remove it altogether.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘adding products on the checkout page’ is closed to new replies.

Tags