Woocommerce – Add To Cart and Buy Now buttons on Product Pages

2 comments

1. I managed to resolve this by finding this blog post http://samplacette.com/skip-shopping-cart-in-woocommerce/.

   If anyone else finds that they are struggling to implement this, this is how I did it (might not be the best solution but it works for me):

   I copied the following text into my theme functions.php

   /** * Set cart item quantity action *
   * Only works for simple products (with integer IDs, no colors etc) *
   * @access public
   * @return void */
   function woocommerce_set_cart_qty_action() { 
       global $woocommerce;
       foreach ($_REQUEST as $key => $quantity) {
       // only allow integer quantities
       if (! is_numeric($quantity)) continue;
   
           // attempt to extract product ID from query string key
           $update_directive_bits = preg_split('/^set-cart-qty_/', $key);
           if (count($update_directive_bits) >= 2 and is_numeric($update_directive_bits[1])) {
               $product_id = (int) $update_directive_bits[1]; 
               $cart_id = $woocommerce->cart->generate_cart_id($product_id);
               // See if this product and its options is already in the cart
               $cart_item_key = $woocommerce->cart->find_product_in_cart( $cart_id ); 
               // If cart_item_key is set, the item is already in the cart
               if ( $cart_item_key ) {
                   $woocommerce->cart->set_quantity($cart_item_key, $quantity);
               } else {
                   // Add the product to the cart 
                   $woocommerce->cart->add_to_cart($product_id, $quantity);
               }
           }
       }
   }
   
   add_action( 'init', 'woocommerce_set_cart_qty_action' );
   

   And then I modified theme/woocommerce/single-product/add-to-cart/simple.php (make sure you don’t midify the plugin files so make a copy and paste into your theme files into a woocommerce folder) to the following (notice that I had removed my quantity input from my code so if you need it,ensure you rework the code to get it working):

   <form class="cart single-product" method="post" enctype='multipart/form-data'>
       <?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>
       <input type="hidden" name="add-to-cart" value="<?php echo esc_attr( $product->id ); ?>" />
       <button type="submit" class="single_add_to_cart_button button alt cart-buttton add-to-cart"><?php echo $product->single_add_to_cart_text(); ?></button>
       <?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
   </form>
   
   <form class="cart single-product" method="post" enctype='multipart/form-data' action="/checkout?set-cart-qty_<?php echo $product->id;?>=1">
       <button type="submit"  class="single_add_to_cart_button button alt cart-buttton buy-now">Buy Now</button>
       <input type="hidden" name="add-to-cart" value="<?php echo esc_attr( $product->id ); ?>" />
   </form>
   

   I added another button next to the existing Add to Cart button but separating the form. The blog post mentions that you can add a hyperlink instead but the above worked for me in terms of the way I needed to customise the page (slightly more long winded)

   From blog:

   Usage instructions:

   Create a hyperlink with a query string argument like so:
   ?set-cart-qty_=
   Where is the numerical ID of your product (something like “167”) and is the >quantity you want set in the user’s shopping cart (most likely this will just be “1”).

   Example URL to send user to checkout with exactly one item of product with ID “167” in cart:

   http://my.website.com/checkout?set-cart-qty_167=1

   I hope the above helps anyone who has a similar problem as I had.

   Log in to Reply

2. After much searching I was surprised this is not something that is standard.
   Here was my solution:

   Either use a hook like “woocommerce_single_product_summary”

   Or copy the wp-content/plugins/woocommerce/templates/single-product/add-to-cart/simple.php to your child theme like:
   wp-content/themes/child-theme/woocommerce/single-product/add-to-cart/simple.php

   Edit the file and add the following code where you want the button to appear:

   <div class="express-checkout-wrapper">
               <a id="dc_express_checkout" href="/checkout/?add-to-cart=<?php echo get_the_ID(); ?>">
                   Purchase
               </a>
           </div>
   

   Now the only problem is the button will take you to checkout and add the correct product but without the correct quantity if you changed it so I used js in my custom.js file that is queued in the footer:

   // Add and change quantity to express checkout button when the quantity is updated
   if($('.cart .qty').length){
       var originalUrl = $('#dc_express_checkout').attr('href');
       $('.cart .qty').change(function(){
           var url = originalUrl + '&quantity=' + $(this).val();
           $('#dc_express_checkout').attr('href', url);
       });
   }
   

   You can change the url from:

   href="/checkout/?add-to-cart=<?php echo get_the_ID(); ?>"
   

   to:

   href="/cart/?add-to-cart=<?php echo get_the_ID(); ?>"
   

   If you want the button to direct to the cart instead of the checkout page.

   Log in to Reply