1

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.

Improve this question

1 Answer 1

Reset to default
1

Using this link, you will find helpful notes as to how to add a script to your WordPress website.

The main idea is to use inbuilt WordPress functions to load your scripts. This is done via the wp_enqueue_script function. Following examples provided in the aforementioned link, you will be able to learn how to enqueue your scripts the safe and secure way!

NOTE: Don't get confused with the different functions - wp_enqueue_style is used for loading custom CSS stylesheets, NOT JavaScript code.

function load_your_scripts() {

    wp_enqueue_style( 'style-name', get_stylesheet_uri() ); // Used for loading stylesheets

    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/WHEREVER/YOUR/FILE/IS/example.js', array(), '1.0.0', true ); // Used for loading scripts

}
add_action( 'wp_enqueue_scripts', 'load_your_scripts' );

Please let me know if you run in to any issues with your code and I will be sure to help you along the way :)

Improve this answer
8
  • So from what I understand, I must 1st upload the .js file to a location in order to reference it in the code?
    – JOKKER
    Apr 20, 2021 at 13:50
  • Yes, that is correct. Once that is uploaded, reference the location and you are set!
    – Anake.me
    Apr 21, 2021 at 7:43
  • The get_template_directory_uri() function gets your currently active themes directory URL. The . 'WHEREVER/YOUR/FILE/IS/example.js' is appending the exact location and file inside the active theme directory.
    – Anake.me
    Apr 21, 2021 at 7:46
  • Do I need a child theme for this? Will the .js file get removed after any kind of update if I do not use a child theme? Does it have a difference where I store all of the .js files? Where would you recommend I store them?
    – JOKKER
    Apr 21, 2021 at 9:20
  • Yes, best practice is to create a child theme. And yes, you will lose changes if those changes are not placed in a child theme. Generally plugin suggestions are not allowed, however if you are not too savvy with WordPress at the moment, and would like to ease in to learning, I'd suggest using a plugin called 'Code Snippets'. It allows you to add custom code to your website without the need to edit your functions.php file.
    – Anake.me
    Apr 21, 2021 at 11:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.