How to override WooCommerce Frontend Scripts

How WooCommerce deals with frontend scripts

All the WooCommerce frontend scripts are located in the folder:

wp-content/plugins/woocommerce/assets/js/frontend

These scripts are loaded in the file

wp-content/plugins/woocommerce/includes/class-wc-frontend-scripts.php

How to override a specific frontend script in WooCommerce

Say for example you want to use your own frontend script for the checkout page.

Copy the checkout.js file from the folder above.

Paste it in a new folder, eg. themes/my-site/woocommerce/js/checkout.js

Make your custom modifications in the pasted file.

In your functions.php add the following code.

add_action('wp_enqueue_scripts', 'override_woo_frontend_scripts');
function override_woo_frontend_scripts() {
    wp_deregister_script('wc-checkout');
    wp_enqueue_script('wc-checkout', get_template_directory_uri() . '/woocommerce/js/checkout.js', array('jquery', 'woocommerce', 'wc-country-select', 'wc-address-i18n'), null, true);
}

Post A Comment

Anti-Spam Quiz: