QuestionsCategory: Technical QuestionOverride woocommerce ajax add to cart in child theme
asked 2 years ago
Woocommerce call assets/js/frontend/add_to_cart.js to perform add to cart functionality with ajax. What I need is to overload that js and put it in my child theme folder. How I can tell woocommerce to call my js instead of the core?.


1 Answers
tech Staff
answered 2 years ago

1/ In the functions.php file of the child theme, include a JavaScript file by using the wp_enqueue_script hook. This is one of the most popular hooks that WordPress offers to customize websites. Let’s have a look at the script that includes the ajax_add_to_cart.js file below:

function ql_woocommerce_ajax_add_to_cart_js() {
    if (function_exists(‘is_product’) && is_product()) {  
       wp_enqueue_script(‘custom_script’, get_bloginfo(‘stylesheet_directory’) . ‘/js/ajax_add_to_cart.js’, array(‘jquery’),’1.0′ );
add_action(‘wp_enqueue_scripts’, ‘ql_woocommerce_ajax_add_to_cart_js’);

2/ Create a JS file in the child theme
3/ The JQuery/JS file

The next step is to work on the JQuery file that you’ve uploaded in your child theme. That file is empty so you need to add scripts. First, prevent the add to cart button from reloading the page with the following script:

$(‘.single_add_to_cart_button’).on(‘click’, function(e) { 

Your Answer