WordPress WooCommerce

WordPress Woocommerce – AJAX based Add to Cart for Variables

If you are familiar with WordPress CMS then you might know about WooCommerce plugin. Well, WooCommerce is an eCommerce plugin that converts your WordPress CMS into dynamic shopping cart. It provides easy to use interface to play with products that you want to sell and earn money online.

I am using WooCommerce from 2 years. In my earlier article – I have written about setting up PayPal for INR in WooCommerce. You should have used WooCommerce to understand this article. Recently one of my project stuck and I will explain the solution that might help other developers too.

 

The Requirement

Most of eCommerce website has variable products to make an easy buy. But WordPress WooCommerce does not give variable product with AJAX.

The project I was working was having all variable products and client wanted add to cart functionality on a single page. Also there should not be a separate product page instead everything should work on shopping page, category page or archive page. It means all variations of products should visible on archive page and we should able to add them to cart using AJAX.

 

Google Didn’t Help

It was easy to show variables on archive page and I had done it within 15-20 minutes. After that real challenge started. I googled for “AJAX based Add to Cart for Variable Products” for couple of days and I found no solution but many tickets need solution for the same. That pushed me to find the solution by my own.

I took 2 hours for adding AJAX based Add to Cart Variable Products functionality.

Solution needs to change WooCommerce default core file, I would not suggest to do so if you are not a developer. Instead you should contact me for better solution.

 

The Solution

Might below video will guide you on adding variable products to WooCommerce.

First of all we need variable product option selection on archive page. you can add below code in your theme function file.

Above code will get option to select variable option on your archive or category page. Means select option button will change with your selected variable drop-down.

 

Now if you try to add product in cart – current page will reload and you will also get it done successfully (as per WooCommerce default functionality). But with AJAX WooCommerce has not implemented yet.

AJAX means no more page reload in very simple term.

  • You need a JavaScript file to write custom code which manipulate AJAX request
  • I have created a JavaScript file - add-to-cart-variable.js

 

jQuery Changes

Now create a new JavaScript file with below code and save it in your theme’s JS directory and include file in your theme footer.

Now in above code there is lots of thing you need to change according to your template and your product variations.

  1. Make sure your variable products’ add to cart button have a class product_type_variable .
  2. If you check into code there is a var  declaration. In that list you need to declare your own products’ variables name like in my example variation name is grind and size. you can add or change so.
  3. In data array, you need to update your “variation” values according to your variations. It will be same as below. Just replace grind and size with your variation.

That’s it you are done with jQuery changes. Now if you try to add variable product in cart, AJAX will work and loading icon will come.

Also it will show product added to cart text and view cart button but it’s not all! If you check shopping cart after above code change, product will not be added in and you will find empty cart.

WooCommerce Core File Changes

Now it’s time when you need to make change in WooCommerce’s file which handles AJAX request.

Go to WordPress – WooCommerce plugin directory -> Includes and open file named class-wc-ajax.php. Open the file in some code-editor. Go to line no 29. it’s having code below code.

Add below code in between this 2 line. so it will be below code

Basically we declare new ajax function for variable product. Now we need to add code of that function in same file. To do so go to line no – 273. At this line Add to Cart AJAX function is being completed. We will add – add to cart AJAX code for variable product now.

Please start adding below code from line no 274.

Above code will take request of our jQuery add_to_cart_variable.js  and post it to default add to cart function of WooCommerce. Now we have to see that how our custom JavaScript will send data to our function. So if you look into our JS, the action is declared in Data array. It is a function name which we declare in our class-wc-ajax.php  file.

I am done with everything. Please try to implement this code in your WooCommerce project and tel me your experience. If you have something in addition to – you can put a comment.

  • Thomas

    Huh, I try fix this problem but no luck.

    <form
    class="variations_form cart" method="post"
    enctype='multipart/form-data' data-product_id="ID; ?>” data-product_variations=””>

    $options ) : $loop++; ?>

    <label for="”>

    <select id="” name=”attribute_”>


    ‘name’, ‘hide_empty’ => false, ‘menu_order’ => false );
    break;
    case ‘id’ :

    $args = array( ‘orderby’
    => ‘id’, ‘order’ => ‘ASC’, ‘menu_order’ => false, ‘hide_empty’
    => false );
    break;
    case ‘menu_order’ :
    $args = array( ‘menu_order’ => ‘ASC’, ‘hide_empty’ => false );
    break;
    }

    $terms = get_terms( $name, $args );

    foreach ( $terms as $term ) {
    if ( ! in_array( $term->slug, $options ) )
    continue;

    echo ‘slug ) . ‘” ‘ . selected( sanitize_title(
    $selected_value ), sanitize_title( $term->slug ), false ) . ‘>’ .
    apply_filters( ‘woocommerce_variation_option_name’, $term->name ) .
    ”;
    }
    } else {

    foreach ( $options as $option ) {

    echo ” .
    esc_html( apply_filters( ‘woocommerce_variation_option_name’, $option ) )
    . ”;
    }

    }
    }
    ?>
    <?php
    //if ( sizeof( $attributes ) == $loop )

    //echo '‘ . __( ‘Clear selection’, ‘woocommerce’ ) .
    ‘;
    ?>

    single_add_to_cart_text(); ?>

    <input type="hidden" name="add-to-cart" value="id; ?>” />
    <input type="hidden" name="product_id" value="ID ); ?>” />

    Could you please check where the missing file in variable.php that still reload page.

    • http://rcreators.com/ Rishi Mehta

      Hi Thomas,

      I am not sure with Variation.php file in template. I just use default one with my own classes. also I check your code its missing all add_action code from default variation.php file. Please check on that. also did you included add-to-cart-variable.js file as per steps. you need to add this js file in your template footer.

      Let me know if it helps.

  • zero

    Hi, this may be out of topic but i am in need of help. Do you know how do we call the ajax to work in the checkout page order_review?

    I have created some radio button for my users to select such that with each option selected they will be given a additional gift (another product) at a minimal fee. Have somehow managed to create a button that allow the adding of the gift to the cart, but the order review will not review until i reload the page or change the shipping methods.

    Really hope you can help me out. Thanks!

    • http://rcreators.com/ Rishi Mehta

      Hi, Let me know URL first. i will look into it and let you know if its possible or not. First if you get it added on cart by ajax, you only need to add that data to checkout page order details table via ajax from similar function.

      • zero

        Hi Rishi, thanks for the reply.

        My files are on a localhost, so i wont be able to give you a link. However, the code that i am adding is

        jQuery(“#gift-cards_field input”).on(“change”, function () {
        if (jQuery(“input[name='gift-cards']:checked”).val() !== “None”) {
        addToCart(1410,’NN001′);
        return false;
        } else {
        instance()->cart;
        $id = $_POST['1410'];
        $cart_id = $cart->generate_cart_id($id);
        $cart_item_id = $cart->find_product_in_cart($cart_id);
        if($cart_item_id){
        $cart->set_quantity($cart_item_id,0);
        }?>
        }
        });

        function addToCart(v_id,v_name) {
        jQuery.post(“http://localhost/nomnom/checkout/?add-to-cart=1409&variation_id=”+v_id+”&attribute_card-type=”+v_name, function () {
        // i managed to find how to do it by using the code below. however, there is a lag time between clicking on the radio button and the order review updating via ajax
        jQuery(“body”).trigger(“update_checkout”);

        [/crayon]

        }

        • http://rcreators.com/ Rishi Mehta

          Hi,

          This code only work add product into cart and will not update cart instantly. I understand your requirement and to achieve this you need to do minor modification in js i written above.

          1) $( document ).on( ‘click’, ‘.product_type_variable’, function() { – Needs to change jQuery(“#gift-cards_field input”).on(“change”, function () {

          2) Remove code from line 10 to 17. means in between function start and if condition.

          3) Replace if condition code with yours if condition – if ( $thisbutton.is( ‘.product_type_variable’ ) ) { change it to if (jQuery(“input[name='gift-cards']:checked”).val() !== “None”) {

          4) Remove second if condition code – if ( ! $thisbutton.attr( ‘data-product_id’ ) ) return true;

          5) Now in data variable replace value with your products actual values and also change function to woocommerce_add_to_cart. After changes your code will look like something below. If you have variation_id and variation to add, replace their code too.

          var data = {
          action: ‘woocommerce_add_to_cart’,
          product_id: ‘1410’,
          quantity: ‘1’,
          variation_id: var_id,
          variation: { attribute_grind: att_grind, attribute_size: att_size }
          };

          That’s it, other all js script remains same. it will add product to cart and also update cart table instantly with ajax.

          Let me know if its works or not, send me url after you upload. :-)