add following code to function php
add_action( ‘wp_ajax_woocommerce_add_to_cart_variable_rc’,’woocommerce_add_to_cart_variable_rc_callback’ );
add_action( ‘wp_ajax_nopriv_woocommerce_add_to_cart_variable_rc’,’woocommerce_add_to_cart_variable_rc_callback’ );
function woocommerce_add_to_cart_variable_rc_callback() {
$product_id = apply_filters( ‘woocommerce_add_to_cart_product_id’, absint( $_POST[‘product_id’] ) );
$quantity = empty( $_POST[‘quantity’] ) ? 1 : apply_filters( ‘woocommerce_stock_amount’, $_POST[‘quantity’] );
$variation_id = $_POST[‘variation_id’];
$variation = $_POST[‘variation’];
$passed_validation = apply_filters( ‘woocommerce_add_to_cart_validation’, true, $product_id, $quantity );
if ( $passed_validation && WC()->cart->add_to_cart( $product_id, $quantity, $variation_id, $variation ) ) {
do_action( ‘woocommerce_ajax_added_to_cart’, $product_id );
if ( get_option( ‘woocommerce_cart_redirect_after_add’ ) == ‘yes’ ) {
wc_add_to_cart_message( $product_id );
}
// Return fragments
$this->get_refreshed_fragments();
} else {
$this->json_headers();
// If there was an error adding to the cart, redirect to the product page to show any errors
$data = array(
‘error’ => true,
‘product_url’ => apply_filters( ‘woocommerce_cart_redirect_after_error’, get_permalink( $product_id ), $product_id )
);
echo json_encode( $data );
}
die();
}
change the variable button to – need to add product_type_variable class instead of ajax_add_to_cart class
<button type=”submit” class=”product_type_variable button alt btn-add add_to_cart_button” data-product_id=”<?php echo $product->id;?>” data-product_sku=”<?php echo $product->get_sku();?>” data-quantity=”1″><?php echo $product->single_add_to_cart_text(); ?></button>
add following js to ur theme derectory named: add-to-cart-variable.js and add to link to footer
vjQuery( function( $ ) {
// wc_add_to_cart_params is required to continue, ensure the object exists
if ( typeof wc_add_to_cart_params === ‘undefined’ )
return false;
// Ajax add to cart
$( document ).on( ‘click’, ‘.product_type_variable’, function() {
$variation_form = $( this ).closest( ‘.variations_form’ );
var var_id = $variation_form.find( ‘input[name=variation_id]’ ).val();
var att_type = $variation_form.find( ‘select[name=attribute_weight]’ ).val();
var qty = $variation_form.find( ‘input[name=quantity]’ ).val();
// AJAX add to cart request
var $thisbutton = $( this );
if ( $thisbutton.is( ‘.product_type_variable’ ) ) {
if ( ! $thisbutton.attr( ‘data-product_id’ ) )
return true;
$thisbutton.removeClass( ‘added’ );
//$thisbutton.addClass( ‘loading’ );
$thisbutton.addClass(“loading”).trigger(“loadingEvent”);
var data = {
action: ‘woocommerce_add_to_cart_variable_rc’,
product_id: $thisbutton.attr( ‘data-product_id’ ),
quantity: qty,//$thisbutton.attr( ‘data-quantity’ ),
variation_id: var_id,
variation: { weight: att_type }
};
// Trigger event
$( ‘body’ ).trigger( ‘adding_to_cart’, [ $thisbutton, data ] );
// Ajax action
$.post( wc_add_to_cart_params.ajax_url, data, function( response ) {
if ( ! response )
return;
var this_page = window.location.toString();
this_page = this_page.replace( ‘add-to-cart’, ‘added-to-cart’ );
if ( response.error && response.product_url ) {
window.location = response.product_url;
return;
}
// Redirect to cart option
if ( wc_add_to_cart_params.cart_redirect_after_add === ‘yes’ ) {
window.location = wc_add_to_cart_params.cart_url;
return;
} else {
$thisbutton.removeClass( ‘loading’ );
fragments = response.fragments;
cart_hash = response.cart_hash;
// Block fragments class
if ( fragments ) {
$.each( fragments, function( key, value ) {
$( key ).addClass( ‘updating’ );
});
}
// Block widgets and fragments
$( ‘.shop_table.cart, .updating, .cart_totals’ ).fadeTo( ‘400’, ‘0.6’ ).block({ message: null, overlayCSS: { background: ‘transparent url(‘ + wc_add_to_cart_params.ajax_loader_url + ‘) no-repeat center’, backgroundSize: ’16px 16px’, opacity: 0.6 } } );
// Changes button classes
$thisbutton.addClass( ‘added’ );
// View cart text
if ( ! wc_add_to_cart_params.is_cart && $thisbutton.parent().find( ‘.added_to_cart’ ).size() === 0 ) {
$thisbutton.after( ‘ <a class=”added_to_cart wc-forward” title=”‘ + wc_add_to_cart_params.i18n_view_cart + ‘” href=”‘ + wc_add_to_cart_params.cart_url + ‘”>’ + wc_add_to_cart_params.i18n_view_cart + ‘</a>’ );
}
// Replace fragments
if ( fragments ) {
$.each( fragments, function( key, value ) {
$( key ).replaceWith( value );
});
}
// Unblock
$( ‘.widget_shopping_cart, .updating’ ).stop( true ).css( ‘opacity’, ‘1’ ).unblock();
// Cart page elements
$( ‘.shop_table.cart’ ).load( this_page + ‘ .shop_table.cart:eq(0) > *’, function() {
$( ‘div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)’ ).addClass( ‘buttons_added’ ).append( ‘<input id=”add1″ class=”plus” type=”button” value=”+” />’ ).prepend( ‘<input id=”minus1″ class=”minus” type=”button” value=”-” />’ );
$( ‘.shop_table.cart’ ).stop( true ).css( ‘opacity’, ‘1’ ).unblock();
$( ‘body’ ).trigger( ‘cart_page_refreshed’ );
});
$( ‘.cart_totals’ ).load( this_page + ‘ .cart_totals:eq(0) > *’, function() {
$( ‘.cart_totals’ ).stop( true ).css( ‘opacity’, ‘1’ ).unblock();
});
// Trigger event so themes can refresh other areas
$( ‘body’ ).trigger( ‘added_to_cart’, [ fragments, cart_hash ] );
}
});
return false;
}
return true;
});
});
add following js to footer for single product
jQuery(function($) {
$(“form.cart”).on(“change”, “input.qty”, function() {
$(this.form).find(“button[data-quantity]”).data(“quantity”, this.value);
});
});
$(document.body).on(“added_to_cart”, function() {
window.location.reload();
$(‘html, body’).animate({scrollTop : 0},800);
});
$(‘.product_type_variable’).on(‘loadingEvent’, function () {
$(‘html, body’).animate({scrollTop : 0},800);
alert(window.location.tostring());
});
check these links for more informations
https://teckstack.com/wordpress-woocommerce-ajax-based-add-cart-variables
http://stackoverflow.com/questions/33374869/updating-woocommerce-cart-after-adding-a-variable-product-ajax
Woocommerce Ajax add to cart for variable products