在WooCommerce中添加“立即購買”按鈕直接跳轉到結算頁面

 

MNews 主題集成了 WooCommerce 商城插件，有些用戶要求增加一個『立即購買』按鈕，這篇文章介紹下如何在WooCommerce中添加“立即購買”按鈕並直接跳轉到結算頁面。

注：當前功能只對『單個產品』有效。

一、添加『立即購買』按鈕 HTML 代碼

找到插件目錄 /wp-content/plugins/woocommerce/templates/single-product/add-to-cart 下的 simple.php 文件，復制到主題 /wp-content/themes/mnews/woocommerce/single-product/add-to-cart目錄下，找到如何代碼：

<button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="single_add_to_cart_button button alt"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>

在其下添加以下代碼：

<button type="submit" name="add-to-cart" value="<?php echo esc_attr($product->get_id()); ?>" class="single_add_to_cart_button button alt" id="buy_now_button">
<?php _e('立即購買','salong'); ?>
</button>
<input type="hidden" name="is_buy_now" id="is_buy_now" value="0" />

此代碼將會在『加入購物車』按鈕后添加一個新的『立即購買』按鈕。

二、添加 JS 代碼函數到 functions.php 中

function buy_now_submit_form() {
 ?>
  <script>
      jQuery(document).ready(function(){
          // listen if someone clicks 'Buy Now' button
          jQuery('#buy_now_button').click(function(){
              // set value to 1
              jQuery('#is_buy_now').val('1');
              //submit the form
              jQuery('form.cart').submit();
          });
      });
  </script>
 <?php
}
add_action('woocommerce_after_add_to_cart_form', 'buy_now_submit_form');

此段代碼是用來監聽按鈕點擊事件，也可以單獨把 js 代碼直接放在 js 文件中，不過這樣方便一些。

三、重定向到結算頁面

add_filter('woocommerce_add_to_cart_redirect', 'redirect_to_checkout');
function redirect_to_checkout($redirect_url) {
  if (isset($_REQUEST['is_buy_now']) && $_REQUEST['is_buy_now']) {
     global $woocommerce;
     $redirect_url = wc_get_checkout_url();
  }
  return $redirect_url;
}

這是幫助我們將用戶重定向到結帳頁面的代碼。默認情況下，是重定向到購物車頁面。

到此，如果點擊『立即購買』按鈕，將重定向到結帳頁面。

英文原文地址：https://medium.com/@dwebsoftguy/add-buy-now-button-in-woocommerce-804528d41ecf