Relocate coupon notices on cart page?

@jon-fergus – I tested this on my local install with Storefront and WooCommerce 3.4.2 but the “auto scroll” function does not happen when a coupon is added at checkout. The “auto scroll” function is only supposed to happen when the checkout form is submitted with errors(missing fields).

Does this happen with a default theme(Storefront) and just WooCommerce enabled?

Hi Thomas. So, the issue I’m having is specifically with the Cart page, not “when a coupon is added at checkout”, as you’ve tested for. I’m using the Avada theme, and I have the coupon form included in cart collaterals on the cart page. The functions that are at play here are within cart.js

I’ve been getting some help from two woo experts and it does seem that the “auto-scroll” function is setup in cart.js to always scroll to the notice, not just when there are errors. This has been tested with multiple themes. Maybe you can test this also?

Here’s a work-around solution from one of the woo experts, using a customized cart.js file in a custom plugin: https://wordpress.stackexchange.com/questions/305939/relocate-woocommerce-notices-messages-on-cart-page

Have a look at the two changes he made to affect the auto-scroll.

1. relocation of the notice for coupons: under apply_coupon he’s modified the line show_notice( response ); to show_notice( response, $('.cart-collaterals') );, which relocates the coupon notices from the top of the page. (I’ve changed this from .cart-collaterals to .coupon and also done the same for the remove_coupon_clicked function).

And:

2. under update_cart he’s modified the function to incorporate an if statement related to scroll_to_notices. So auto-scroll now doesn’t happen for coupons.

I’ve tested this by creating a plugin and it works on my site, but I’m not super keen on using my own custom cart.js because it just adds more potential trouble during updates. Anyway, for now you can see his method with my changes in action on our cart page here: https://stage2.fitafvegan.com (there’s a test product you can add)

Based on what I’ve seen here, and from the help from others, I’d suggest it’d be good idea to tweak the native cart.js for a future update, if possible. Either relocate the coupon notices to just above the .coupon div or disable auto-scroll for coupon functions, or both (or distinguish between error notices and regular notices, which doesn’t seem to be the case for the cart page).

Any thoughts?

While Jon’s situation is likely a rare case, adding flexibility to WooCommerce is always useful.

Maybe move ‘.cart-collaterals’ into a wp_localize_script() call. Even better would be to allow ‘.cart-collaterals’ to be filtered before the wp_localize_script() call.

I’d be game for writing a patch for this.

Thanks @daymobrew. Something like that would be a good solution imo. Disabling the auto-scroll is more-or-less a non issue if the notices can be relocated to somewhere near where the customer’s window will be when adding or removing coupons. A solution where we could customize the location of the notices with a simple function instead of needing to deregister and dequeue cart.js file and add our own modified version would be ideal.

@jon-fergus The notice area can be moved, but the problem you are going to run into is the coupon notice uses the generic notice area. This means that all notices on the page would be displayed in this area.

I just viewed your demo site, and I feel as if this is an edge case. The standard WooCommerce cart page has the coupon form directly below the products, which means it’s going to be near the top of the page unless there is a large number of items (10+) in the cart. Your checkout page has many additional items:

Link to image: https://cld.wthms.co/9Jc3v7

It may be better to remove some of the busyness here. Place the coupon code back with the products, remove the numbers for the different boxes, and have the login/registration forms show on click.

Right now you can increase the quantity in the cart, but have to scroll all the way to the bottom to update the cart, which will refresh the cart area and scroll back to the top. Also, the Update Cart button isn’t working.

Thanks for the feedback. About the notices all showing up in the new location, that’s not how it works using the solution given on stackexchange. The only notices that are relocated are apply_coupon and remove_coupon_click from cart.js. For example, here’s a screenshot of what happens if I trigger a different kind of notice:

https://pasteboard.co/Hq2kEZG.jpg

So building in functionality to allow developers to easily relocate specific notices still seems like a good idea to me. Having the add coupon notice pop up right where the customer is seems like a best practice kinda thing to me, while scrolling to the top for major errors seems fine.

About the layout on our test site, this is using avada’s basic cart layout with some modifications (I like your idea of login on click, just need to learn how to do that); this site is still very much a playground of testing. But that said, even if I moved the coupon form up, the notices in standard woo would still be above the cart items, as you say, so if the customer has a few items it still means they will be scrolled up past where they had already scrolled down through and made to scroll down again. I don’t think that’s a good flow.

In any case, I’ve now moved those two coupon notices to within the coupon form, just beneath the add coupon button, and that seems to me to be the perfect setup. Customer window is going to be there anyway, so no need to scroll at all.

Not sure what’s going on with the add to cart button tbh.

Update:

You can find the full solution with some edits here: https://wordpress.stackexchange.com/questions/305939/relocate-woocommerce-notices-messages-on-cart-page

With the addition of a blank div (with class=”cart-coupon-notices”) hooked to the coupon form and then targeting the apply_coupon and remove_coupon_click notices to its class, you get this:

https://pasteboard.co/Hq8pKlq.jpg

I think this is a much better placement for those specific notices. All other notices still appear at the top of the page, so this doesn’t interfere with any other functionality on the cart page (the update cart button not working was some kind of odd glitch that solved itself).

With this better placement of those two notices I now have no need to disable auto-scroll. This means that the only thing needed to relocate those two notices is a simple edit in cart.js (i.e. changing show_notice( response ); to show_notice( response, $('.cart-coupon-notices') );.

I know my specific situation is rather unique, but I still think it would be a good idea to build in allowance for this kind of customization of notice location, so devs don’t need to replace cart.js but can simply use some kind of apply_filter function.

Anyway, thanks everyone for the help and feedback!

@jon-fergus Thank you for letting us know how you did this. It seems like this solution will be mostly theme specific at this time. I am going to set the thread to resolved, if there’s anything else, let us know.