當您使用 WooCommerce 經營線上商店時,讓購買流程盡可能無縫至關重要。一種有效的方法是添加「立即購買」按鈕,使客戶無需瀏覽多個頁面即可直接購買產品。本部落格將引導您使用提供的程式碼片段建立 WooCommerce AJAX「立即購買」按鈕。
首先,您需要在 WooCommerce 產品頁面上新增自訂「立即購買」按鈕。我們將透過掛鉤 woocommerce_after_add_to_cart_button 操作來完成此操作,該操作將我們的按鈕放在標準「新增至購物車」按鈕之後。
這是 PHP 程式碼片段:
add_action( 'woocommerce_after_add_to_cart_button', 'add_content_after_addtocart' ); function add_content_after_addtocart() { $current_product_id = get_the_ID(); $product = wc_get_product( $current_product_id ); if( $product->is_type( 'simple' ) ){ echo '<button data-id="'.$current_product_id.'" class="buy-now button"><i class="matico-icon-toys"></i>'.__('Buy Now', 'woocommerce').'</button>'; } }
說明:
接下來,您需要將腳本排入主題中,以確保其正確載入到您的 WooCommerce 頁面上。操作方法如下:
wp_enqueue_script('matico-child-script', get_stylesheet_directory_uri() . '/assets/js/script.js', array( 'jquery', 'scrollfix-script' ), $matico_version, true); wp_localize_script( 'matico-child-script', 'matico_child_script_obj', array( 'checkout_page_url' => wc_get_checkout_url(), ) );
說明:
最後,我們將使用 jQuery 處理按鈕來點擊事件。 jQuery 腳本向 WooCommerce 發送 AJAX 請求,後者將產品新增至購物車,然後將使用者直接重新導向至結帳頁面。
這是 jQuery 程式碼片段:
(function ($) { var MaticoChildThemeConfig = { init: function () { this.bindEvents(); }, bindEvents: function () { $(document).on('click', '.buy-now', this.handleBuyNowClick); }, handleBuyNowClick: function (event) { event.preventDefault(); var $button = $(this), quantity = parseFloat($button.closest('.quantity').find('.qty').val()) || 1, productID = $button.data('id'); var data = { product_id: productID, quantity: quantity, }; $.ajax({ type: 'POST', url: wc_add_to_cart_params.wc_ajax_url.toString().replace('%%endpoint%%', 'add_to_cart'), data: data, dataType: 'json', beforeSend: function () { $button.addClass('loading'); }, success: function (res) { if (res.error && res.product_url) { window.location.href = res.product_url; } else { window.location.href = matico_child_script_obj.checkout_page_url; } } }); } }; MaticoChildThemeConfig.init(); })(jQuery);
說明:
透過實施上述步驟,您可以建立一個「立即購買」按鈕,以簡化客戶的購買流程。此功能在透過減少客戶在完成購買之前需要導航的點擊次數和頁面數量來提高轉換率方面特別有用。
以上是如何實現 WooCommerce AJAX 直接「立即購買」按鈕的詳細內容。更多資訊請關注PHP中文網其他相關文章!