[TUTORIAL] Webflow Ecommerce Coupon workaround

I’m not sure you can switch products in the cart… without the user action.
Webflow stores in a server side cookie the cart “session” of the user. So I think even if you managed to do it, the webflow cookie would prevail when you would switch pages or checkout.

But this is probably worth investigating

1 Like

@pepperclip Thank you for your quick response. Oh so this is more complex than I expected then. Any suggestions on how do you think I can go about applying a discount to the price based on quantity? Any help would be highly appreciated. Thanks!

What I’d do as a quick fix is show discount codes if you have specific quantity of the product in your cart. You’d use mutation observers to count relevant items in cart, and hide or show relative discount codes to the user.
But there probably is a more elegant way…

Will the coupon be applied automatically and calculate the new total or will it have to be applied manually. Where would this coupon go in the cart and would it be a button? I’m a bit confused about the implementation.

It would just be visible to the user in the cart and in the checkout page. Whether the user adds it to get the discount is his own choice in this case. It’s just a div that shows the available discount code for the user to have a bulk discount.

1 Like

What about if the coupon is sort of like the free shipping example you had with the coca cola can where it’s based off quantity. How would I apply it that way instead of free shipping?

You can’t have negative amounts for products… So this would not be possible as you intend it to.
But you could always load with some ajax a clone of the product in quantity x and discounted price for the user to choose from. You would just need a message in the cart list products that show if discounts exist and load in jquery an extra “drawer” to the cart that loads in ajax the products in bulk available. But the user would still need an action I guess.

You could also try to do this :
On quantity edit in cart list, if product matches qty conditions, load in ajax bulk product, add it to cart via jquery (not sure if this works, you’d probably need to emulate a user action), remove the user edited product (so that you don’t get duplicates).
But I’ve never tried it, and not sure it would work…

Good luck

That sounds like a good idea, but how would load in ajax the bulk product, I believe that’s the hard part because I am not sure if it would store it upon checkout.

Hello, @pepperclip I’ll like to create a buy one get one free code,
Can I follow the steps outlined in the workaround?

Hi,
You could do something in that spirit, but this workaround is not really what you need/want.
The buy one / get one free could probably be done one of two ways :

  • Either providing a coupon when you see a user add to cart a specific product (this means listening to the cart list updates and on specific occasions adding to the checkout page a coupon with the amount of 1 unit)
  • Or loading the same product as the user added but as a free item in ajax into another part of the cart for the user to add if he wants to.

In case you’re looking for the second option, most of what you need is in this tutorial, but you’re missing the “listening to the cart to figure out what product to load as a free product”.
To do that you can use mutation observers like the example I’ve described here : How to add a "x until free delivery" gauge [E-commerce]

Good luck !

This tutorial provides a workaround for implementing e-commerce coupon codes in a web flow. It explains the steps needed to set up the coupon codes, including how to create the coupons on the back end, how to set up the checkout process to accept the coupons, and how to track coupon usage. Use Host1Plus Coupon Codes and get upto 80% discount.