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.
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?
