How to add a "Buy in 1 Click" button next to the "Add to Cart" button in WooCommerce?

Question

Online shopping

Hello! It is necessary in the category with goods, next to each product, display 2 buttons: "Buy in 1 click" and "Add to cart". Naturally, the functionality must be appropriate. When adding to the cart, the product should simply be added to the cart. There are no problems with this, the "Add to Cart" button is located next to each product card. When you click on "Buy in 1 click", you need to add the product to the cart and immediately send the person to the checkout page (Checkout). This must be implemented, as well, on the product page. It seems to be nothing complicated, but there is one BUT, about it in the last paragraph, if briefly. More details in the last one.
I tried to solve this problem in different ways. The first way was to search for a plugin. Several have been found. If anyone needs it, these are: Buy one click WooCommerce and WooCommerce Direct Checkout. I did not consider paid options, but they are, one of them is on the saphali website, but the functionality is very similar to Buy one click WooCommerce. The second way was to write a simple javascript that would automatically click on the add to cart link and then redirect to the "Checkout" page. But such a script that would work as intended could not be written. Next, about the difficulties that I had.
Why didn't the plugins work?
1. Buy one click WooCommerce is a great plugin that doesn't add a product to the cart, but simply shows a form with fields to fill out. Which subsequently, after filling, is saved in the plugin itself. Not in WooCommerce orders. It is necessary that all orders be in one place. It is convenient, correct and understandable. Also in this plugin, I could not configure what I need. It adds a button next to it, but as I said above, it does not put the product in the cart, although it can redirect to the "Checkout" page. Perhaps the plugin is a more conversion solution and most likely I will test it. But now, there is another task. With this plugin, unfortunately, I did not work out, although it has a large number of settings.
2. WooCommerce Direct Checkout is a great plugin that replaces the functionality of the "Add to Cart" button. It exactly implements the functionality of the "Buy in 1 click" button, which is exactly what I need. But the functionality of the "Add to Cart" button completely disappears and is replaced by "Buy in 1 click". I tried to create my "Add to cart" button. But unfortunately I did not understand how this can be done, since always when you click on it, the "Buy in 1 click" functionality was performed.
Why didn't it work with JavaScript?
I tried to do this by clicking on the "Add to Cart" link via JavaScript and automatically redirecting to the "Checkout" page. But I could not do it, because the script redirected me directly to the checkout page but did not click on the "Add to cart" link. In the link, I specified the onClick attribute and inserted the script there. It looked like this:
Option 1.

<a href="/checkout/" onClick="window.location = '<?php bloginfo('url'); echo esc_url($product->add_to_cart_url()); ?>';" data-quantity="<?php echo esc_attr(isset($args['quantity']) ? $args['quantity'] : 1 ); ?>" class="<?php echo esc_attr(isset($args['class']) ? $args['class'] : 'button'); ?>" <?php echo isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : '' ?>>Добавить в корзину</a>

Option 2.

<a href="<?php echo esc_url($product->add_to_cart_url()); ?>" onClick="window.location = '<?php bloginfo('url'); ?>/checkout/';" data-quantity="<?php echo esc_attr(isset($args['quantity']) ? $args['quantity'] : 1 ); ?>" class="<?php echo esc_attr(isset($args['class']) ? $args['class'] : 'button'); ?>" <?php echo isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : '' ?>>Добавить в корзину</a>

I added the button to the file along the path: "\wp-content\plugins\woocommerce\templates\loop\add-to-cart.php" (if it helps someone, this is a WooCommerce template file in which the "Add to Cart" button code is edited basket"). There was also an option with a function, but nothing came of it either.
Briefly:plugins are not suitable due to the fact that one of them, when you click on the "Buy in 1 click" button, calls the form and does not add the product to the cart, and the other removes the "Add to cart" button and leaves only the "Buy in 1 click" option. I tried to implement it by clicking on the "Add to cart" link using JS and redirecting to the "Checkout" page, after redirecting it turns out that the product is not added to the cart. Accordingly, JS does not work as it should, although the code is working. Tried different variants of implementation on JS of this possibility. How else can you try to implement this? Perhaps through hooks, but I don’t understand anything about this, I only know where to insert them, and how to find a suitable hook, without a clue, this is hardly done by brute force.

Answer 1

1. Add a button and in the attribute (can be data-id) pass the product id

global $product;
$id = $product->id;

2. Hang a handler on a button click

jQuery('.one-click-button').click(function(e) {
 	e.preventDefault();
 	jQuery(this).addClass('adding-cart');
 	var product_id = jQuery(this).data('id');

 	var ajax_url = "/wp-admin/admin-ajax.php"

 	jQuery.ajax ({
 		url: ajax_url,  
 		type:'POST',
 		data:'action=oneclick&product_id=' + product_id + '&quantity=1',

 		success:function(results) {
    // Показываем окно успешного добавления
    $('.form_popup').hide();
    $('#modal').css('display','inline-block');
    $('.good_cart').css('display','inline-block');
    location.href = 'http://domain.ru/oformlenie-zakaza/'; //Переход на оформление заказа
  }
});
 });

3. Handler in functions.php

function oneclick() {
      $product_id = $_POST['product_id'];
      $variation_id = $_POST['variation_id'];
      $quantity = $_POST['quantity'];

      if ($variation_id) {
        WC()->cart->add_to_cart( $product_id, $quantity, $variation_id );
      } else {
        WC()->cart->add_to_cart( $product_id, $quantity);
      }

      $items = WC()->cart->get_cart();
      global $woocommerce;
      $item_count = $woocommerce->cart->cart_contents_count; ?>

      <?php die();
    }

add_action('wp_ajax_oneclick', 'oneclick');
add_action('wp_ajax_nopriv_oneclick', 'oneclick');

Answer 2

Maybe it's better to take the plugin https://ru.wordpress.org/plugins/buy-one-click-woo...
The best of its kind

Answer 3

With the Buy one click WooCommerce plugin, I had to tinker, but it worked.
I had to tinker because of the topic. Replacing the hook in the plugin solved the problem.
What is good about this plugin is that it adds the customer's order to the list of orders in the admin panel, and this is very "gut"! And you notifications and, if there is synchronization, sending these orders to 1C and all sorts of crm.
At the moment there is a trouble with a shortcode and you need to buy the function of variable products in order to send the color \ size to the order.

Answer 4

HI,
I'm Aiden Ryan and I work as WooCommerce developer since 2017. You don't worry about these question but you just need a plugin for this work. I have WooCommerce One Click Buy, Checkout Plugin for this work. You just need to install this plugin. Please see the link in the first comment.