不使用插件实现商品立即购买按钮功能 仿Quick Buy Now Button

WooCommerce默认的产品购买页只有加入购物车按钮，是没有立即购买，最近开发过程遇到需要增加这个按钮，实现功能就是将选择的产品（变体情况）加入购物车后直接调整到结算页面，前端显示如下：

对于wordpress而言万事皆可插件实现，寻找后发现有个插件Quick Buy Now Button for WooCommerce可以实现，直接安装后启用就行，功能上满足，并可以在没有选择变体的情况下弹窗提示，有点不好的就是，插件嘛总会有点私心以及烦人，必须开通pro版才能设置把烦人的去掉。安装这个插件后在编辑产品页的里有狗皮膏药：

虽然功能上没啥问题，如果不是讨厌这样的那么可以忽略下面的自己使用代码实现相同功能，一共分三部分，1，增加button的html的结构；2，增加Ajax动作；3，编写Ajax的回调函数

添加button结构，这个找到自己的模板文件，或者是Woo的默认文件 /single-product/variation-add-to-cart-button.php,找到里面的一个button标签（这个是默认的加入购物车按钮）的下方追加：

<button type="submit" class="buy_now">Buy Now</button>

然后可以在同一个文件里使用jQuery配置button的点击事件，Ajax去提交产品变体，这里面判断了表单里的属性值是否都有，也就是都选中才使用Ajax提交到后台

jQuery(document).ready(function($) {	$('.buy_now').on('click', function(e) {
		e.preventDefault(); // 阻止默认的表单提交行为
		let formData = $('.variations_form').serialize(); // 获取表单数据
		let formDataArry = $('.variations_form').serializeArray(); // 获取表单数据
		let hasEmptyField = false;
		formDataArry.forEach(function(field) {   //判断不存在 空值  
			if (!field.value) {
					hasEmptyField = true;
			}	
		});
		// 存在空值直接不进行动作
		if (hasEmptyField) {
			alert('Please select all variant options.');  // 弹窗提示
			return;
		}
		$.ajax({
			url: '<?php echo admin_url('admin-ajax.php'); ?>',
			type: 'POST',
			data: {
					action: 'quick_buy_now',
					formData: formData
			},
			success: function(response) {
				window.location.href = response;
      },
			error: function(xhr, status, error) {
					console.error(xhr.responseText);
			}
		});
	});
});

接下来在functions.php配置Ajax的回调函数，需要依据提交的data数据，依据产品id，变体id和提交的数量，进行加购操作：

// 立即购买 加购后直接跳转到 结算页面
function quick_buy_now_callback() {
  parse_str($_POST['formData'], $formData);
  $product_id = isset($formData['product_id']) ? intval($formData['product_id']) : 0;
  $variation_id = isset($formData['variation_id']) ? intval($formData['variation_id']) : 0;
  $quantity = isset($formData['quantity']) ? intval($formData['quantity']) : 1;

  if ($product_id > 0 && $variation_id > 0) {
    WC()->cart->add_to_cart($product_id, $quantity, $variation_id);
    echo wc_get_checkout_url(); // 返回结算页面的 URL
  } else {
      echo 'error';
  }
  wp_die(); // 确保停止后续的 WordPress 运行
}

add_action('wp_ajax_quick_buy_now', 'quick_buy_now_callback');
add_action('wp_ajax_nopriv_quick_buy_now', 'quick_buy_now_callback');

三步完成后即可在加入购物车按钮旁边就有了立即购买按钮，满足功能需求，