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

Share on facebook
Share on twitter
Share on linkedin

Related Posts

WordCamp Düsseldorf Orgateam

Best WordCamp Düsseldorf Ever

In 2019 we held our first and therefore guaranteed best WordCamp in Düsseldorf. It was a complete success and lots of fun for all participants.

Groupmail GDPR/DSGVO

GDPR and Generic E-Mail Accounts

How do you deal with topic-related e-mail accounts such as info@website.de in times of the GDPR? How can you ensure that data protection is not violated for incoming e-mail addresses.

GET IN TOUCH

Contact.