woocommerce plugin , add variation to cart via ajax

Im looking for a solution to add a product variation via Ajax.

As i found out all the woocommerce basic functions allow adding a product to the cart only if it is not a variation item.

im using <?php echo woocommerce_template_loop_add_to_cart() ?> to display the add to cart button but this button is a regular submit button.

how can i make a variable item use the ajax add to cart ?

Thanks

WordPress Woocommerce ajax submit through plugin on cart page

Created plugin, which showing form on shopping cart page after submit i am sending value to third party server. jQuery.ajax({ type: ‘POST’, url: ‘http://www.yoursitename.com/wp-content/plugin/my-ajax.

woocommerce add_to_cart

When I program: $woocommerce->cart->add_to_cart( $group_product_id, 1); with $group_product_id being the product post ID (e.g. 300), the shopping cart shows a quantity of 2 not 1. When I direct

woocommerce applying cart coupons

I am currently developing a plugin for woocommerce, and have the following code which adds a discount code if the total of the cart is in between the 2 values: add_action(‘woocommerce_before_cart’, ‘w

Check Woocommerce Variation Before Adding to Cart

I am running a T-Shirt store that offers two attributes which users select Size and Color now what I want is to check the size and color combination which users chooses before adding to cart and r

WooCommerce add_to_cart Shortcode – Product already in Cart

I’ve added the WooCommerce shortcode add_to_cart successfully on a custom post type page. [add_to_cart id=510] If there is nothing in the cart, it redirects to the shopping cart adding the product

Woocommerce add to cart URL

I am trying to work out whether it might be possible to put a straightforward HTML URL link on a button in order to add a product to a woocommerce cart. I am using a wordpress theme to show digital do

WordPress Woocommerce – Add a variable product to cart using the WC_Cart class

I am trying to add a variable product to the cart of the WordPress plugin, Woocommerce. So far I have been able to add single/simple products with: $woocommerce->cart->add_to_cart( [product_id],

add meta to a product on cart WooCommerce

i’m trying to add product to the cart via PHP using this code, $woocommerce->cart->add_to_cart(20); the product is getting into the cart but i would like to add custom meta as shown on the imag

woocommerce custom ajax top cart

HiI’m trying to get the top cart in woocommerce to update the quantity and price automatically. I have got it to work to some extent by using this as a template: http://www.amberweinberg.com/developin

Woocommerce [woocommerce_cart] shortcode not working

So I’m working on this website and I’m using the woocommerce plugin. The plugin is working fine and I can add things to my cart the only problem is that I can’t view my cart. The image I’ve added show

Answers

I created and AJAX add to cart for variable products like this:

Sorry about the delay, here is the expanded answer:

I included a new js file called added-to-cart.js and the file contains the following code. There is some extra code for handling a popup and also increasing the cart counter which you might want to remove.

/* Begin */

jQuery(function($) {

/* event for closing the popup */
$("div.close").hover(
                function() {
                    $('span.ecs_tooltip').show();
                },
                function () {
                    $('span.ecs_tooltip').hide();
                }
            );

$("div.close").click(function() {
    disablePopup();  // function close pop up
})

$("a.close").click(function() {
    disablePopup();  // function close pop up
});

$(this).keyup(function(event) {
    if (event.which == 27) { // 27 is 'Ecs' in the keyboard
        disablePopup();  // function close pop up
    }
});

    $("div#backgroundPopup").click(function() {
    disablePopup();  // function close pop up
});

$('a.livebox').click(function() {
    //alert('Hello World!');
return true;
});

setAjaxButtons(); // add to cart button ajax

function loading() {
    $("div.loader").show();
}
function closeloading() {
    $("div.loader").fadeOut('normal');
}

// AJAX buy button for variable products
function setAjaxButtons() {
   $('.single_add_to_cart_button').click(function(e) {
      var target = e.target;
      loading(); // loading
      e.preventDefault();
      var dataset = $(e.target).closest('form');
      var product_id = $(e.target).closest('form').find("input[name*='product_id']");
      values = dataset.serialize();

        $.ajax({
          type: 'POST',
          url: '?add-to-cart='+product_id.val(),
          data: values,
          success: function(response, textStatus, jqXHR){
                loadPopup(target); // function show popup
                updateCartCounter();
            },
        });    
      return false;
   });    

}

function updateCartCounter() {
    var counter = $('.widget_shopping_cart_content').text().replace(//s/g, '');
    if (counter == '') {
        $('.widget_shopping_cart_content').text("1");
    }
    else {
        $('.widget_shopping_cart_content').text(++counter);
    }
}

var popupStatus = 0; // set value

function loadPopup(target) {

    var currentPopup = $(target).parents(".single_variation_wrap").find("#toPopup");
    var currentBgPopup = $(target).parents(".single_variation_wrap").find("#backgroundPopup");

    if(popupStatus == 0) { // if value is 0, show popup
        closeloading(); // fadeout loading
        currentPopup.fadeIn(0500); // fadein popup div
        currentBgPopup.css("opacity", "0.7"); // css opacity, supports IE7, IE8
        currentBgPopup.fadeIn(0001);
        popupStatus = 1; // and set value to 1
    }
}

function disablePopup() {
    if(popupStatus == 1) { // if value is 1, close popup
        $(".single_variation_wrap > div:nth-child(2)").fadeOut("normal");
        $(".single_variation_wrap > div:nth-child(4)").fadeOut("normal");
        popupStatus = 0;  // and set value to 0
    }
}
}); // jQuery End