Get Variation ID and Attribute Value on Product page

3 comments

1. All the required data to craft the link you are looking for is available on the single page in the form of hidden fields.

   <input type="hidden" value="6438" name="add-to-cart">
<input type="hidden" value="6438" name="product_id">
<input type="hidden" value="6442" name="variation_id">

   The value for attribute_pa_size can be grabbed from the select box.

   You need to add the quick buy button, and on its click event write some code to craft the URL and redirect to it.

   Some quickly made up code presuming that you create the button with id="quick-buy"

   <script>
   jQuery( document ).ready( function() {
   
       jQuery( "#quick-buy" ).click( function() {
   
           // Get all the values needed for the URL
           var add_to_cart = jQuery( 'input[name="add-to-cart"]' ).val();
           var variation_id = jQuery( 'input[name="variation_id"]' ).val();    
           var pa_size = jQuery( "#pa_size" ).val();
   
           // Craft the URL
           var link = "https://www.similarfeathers.com/checkout/?add-to-cart=" + add_to_cart + "&variation_id=" + variation_id + "&attribute_pa_size=" + pa_size
   
           // Finally redirect to the URL
           window.location.href= link;
   
           return false;
   
       });
   });
   </script>
   

   Log in to Reply

2. global $product;

       $args = array(
                    'post_type'     => 'product_variation',
                    'post_status'   => array( 'private', 'publish' ),
                    'numberposts'   => -1,
                    'orderby'       => 'menu_order',
                    'order'         => 'asc',
                    'post_parent'   => $product->id
                );
                $variations = get_posts( $args ); 
   
       foreach ( $variations as $variation ) {
   
   
                   echo  $variation_id           = absint( $variation->ID );$variable_id = $this['variation_id'];
                    $variation_post_status  = esc_attr( $variation->post_status );
   
                    $variation_data         = get_post_meta( $variation_id );
                    $variation_data['variation_post_id'] = $variation_id;
   
                echo get_post_meta( $variation_data['variation_post_id'], 'variable_regular_price[]', true) . '<br>';
   
   
   
                   echo $id = $product->id.'<br>';
                    echo $price =get_post_meta($variation_id, '_regular_price', true).'<br>';
                    //echo $variation['image_src'];
   
                }
   

   Log in to Reply

3. After searching for a long time I came up with this solution. It may not be the best way but it works and its simple. You can do a quick buy on product variations with Javascript…

   First I added a secondary button next to my add to cart button
   Instant Buy

   I used the hidden input that is standard for all Woocommerce. <input type="hidden" name="variation_id" id="variation_num" class="variation_id" value="15959">

   I added the id (id=”variation_num”) to the input which is located in /wp-content/themes/YOUR THEME/woocommerce/single-product/add-to-cart/variation-add-to-cart.php

   Then at the bottom of this same variation-add-to-cart.php file I added my javascript. First get the value of the hidden input with the id we just added (var sel = document.getElementById(‘variation_num’);)

   If you have a option selected by default you need to select hidden input value on page load and update your link url by id (quick-buy)

   sel.onload = function()
     { document.getElementById("quick-buy").href = "/checkout/?add-to-cart=" + this.value;}
   

   Next you need a function to update url when option is selected or changed…

   sel.onchange = function () { document.getElementById("quick-buy").href = "/checkout/?add-to-cart=" + this.value;}
   

   So in total you will have the following..

   <a href="/checkout/" id="quick-buy" class="instant-buy">Instant Buy</a>
   
   <script>
   var sel = document.getElementById('variation_num');
   
   sel.onload = function()
     { document.getElementById("quick-buy").href = "/checkout/?add-to-cart=" + this.value;}
   
   sel.onchange = function () { document.getElementById("quick-buy").href = "/checkout/?add-to-cart=" + this.value;}
   </script>
   

   Wala! I hope this saves others the time I wasted looking for a more complicated solution.

   Also for simple products you will want to edit..
   /wp-content/themes/YOUR THEME/woocommerce/single-product/add-to-cart/simple.php

   Add your new link / button, I used the same as on the variation products. As for the url I used php.

   global $wpdb; //connect to WP database (may not be necessary)
   global $product; //get product data (may not be necessary)
   $pID = $product->id; //get current product id
   

   Your button:

   <a href="/checkout/?add-to-cart=<?php echo $pID?>" class="instant-buy">Instant Buy</a>
   

   Log in to Reply