Reactive WooCommerce Checkout Add-Ons

WooCommerce Checkout Add-Ons

Reactive WooCommerce Checkout Add-Ons

WooCommerce Checkout Add-Ons is great. With it, we can give our clients the opportunity to customize their orders. Let’s say we offer to send a gift card with said orders, to add some kind words on a lovely card for your mom with that gift on mothers day maybe, wouldn’t that be great?

Now, if we want to give our client the opportunity to customize address and text of that gift card, but only if a gift card is selected, our theme would need to react on the selection and display or hide additional fields accordingly.

So, we want to display the Text and Text Areadepending on the selected option in the Select. Selected Gift Card **none** (**keine** here) should hide them and any other option should display them.

Checkout Add-Ons Fields

We first need some JavaScript to attach to the change event of our Gift Cards Select.

Find the select field in the DOM and check its ID. Let’s say our select is #wc_checkout_add_ons_1 and the fields we want to hide/show are #wc_checkout_add_ons_2 and #wc_checkout_add_ons_3.

The JaveScript above goes into a toggle_checkout_add_ons.js file placed into the js-folder of our theme. We now need to load that js-file whenever it is needed. That would be on the checkout page.

We enqueue the script to be loaded in the functions.php of our theme, but only if we are on the checkout-page.

And now we have have our inputs shown/hidden depending on the selected option. Did that work out for you?


Share on facebook
Share on twitter
Share on linkedin

Related Posts

WooCommerce SQL

Howto Manipulate WooCommerce Metadata via SQL

With Germanized on board, WooCommerce has several ways to save article numbers. Has the intern spent two days entering the EAN in the wrong field for the 3000 articles in the WooCommerce online shop? Then an SQL superhero has to save the day who can copy content from one field to another in no time.

eCommerce Sales

5 eCommerce Lockdown Tips

eCommerce is booming because since Corona everyone understands the importance of online stores and digitization. We have been supporting online stores since the beginning of the millennium, when you still had to program them yourself, and we would like to tell you here how your eCommerce tools can make good sales and keep you afloat in a crisis.