I have a JavaScript code snippet that I'd like to add to my WordPress + WooCommerce website:
$(document).ready(function() {
$('.input-text').on('input', function() {
var valueLength = $(this).val().length;
if (valueLength > 0) {
$(this).closest('.form-row').addClass('display-floating-label');
} else {
$(this).closest('.form-row').removeClass('display-floating-label');
}
});
});
This JS adds a custom class to WooCommerce checkout fields if the field's text input is not empty.
How do I add this JS to my website?
My theme, OceanWP, provides a place to add custom JS at Appearance > Customize > Custom CSS/JS but adding it in the Custom JS text box didn't work.
I've also tried downloading a Header/Footer scripts plugin and adding it in the header but that didn't work either.
I've also tried adding it to the functions.php
file a bunch of different kind of ways but I had no luck there either.
Here's a fully functioning example with the exact same HTML code as the WooCommerce checkout fields have: JSFiddle. It works fine in the Fiddle so the classes in the JS are correct and adding it to my website should work, but it doesn't.
The only part I do not understand is the <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
in the HTML code. Do I need to add this anywhere in my website?
I'm stuck, any help would be greatly appreciated.