返回
WooCommerce立即购买: 变体弹窗 & 快速结账
python
2025-01-17 08:27:56
WooCommerce:使用“立即购买”按钮和变体弹窗
很多电商平台都想为顾客提供更流畅快捷的购物体验。一种常见的改进方式是使用“立即购买”按钮,直接跳转到结账页面。当商品存在多种属性(例如,尺寸或颜色)时,这就带来了一些技术上的挑战。这篇文章将探讨如何在 WooCommerce 中实现这样的功能,当产品没有变体时直接跳转到结账页,有变体时弹出选择窗口。
直接跳转结账页的“立即购买”按钮
没有变体的产品可以直接通过“立即购买”按钮,直接跳过购物车页面并到达结账页,缩短购买流程。这可以通过一段自定义的代码实现。这段代码会将产品添加到购物车,然后立即重定向到结账页。
代码示例:
add_action( 'woocommerce_after_shop_loop_item', 'add_custom_order_button_loop' );
add_action( 'woocommerce_after_add_to_cart_button', 'add_custom_order_button_single' );
function add_custom_order_button_loop() {
global $product;
$is_variable = $product->is_type( 'variable' );
if( !$is_variable){
$button_text = "立即购买";
$button_url = esc_url( wc_get_checkout_url() . '?add-to-cart=' . $product->get_id() );
echo '<a href="'. $button_url.'" class="button order-now-button">'.$button_text.'</a>';
}
}
function add_custom_order_button_single(){
global $product;
$is_variable = $product->is_type( 'variable' );
if( !$is_variable){
$button_text = "立即购买";
$button_url = esc_url( wc_get_checkout_url() . '?add-to-cart=' . $product->get_id() );
echo '<a href="'. $button_url.'" class="button order-now-button">'.$button_text.'</a>';
}
}
操作步骤:
- 将以上代码添加到当前主题的
functions.php
文件或者通过Code Snippets插件添加。 - 这个代码会在商品列表页(shop loop)和单品页面添加一个 "立即购买" 按钮。
- 对于没有变体的商品, 点击这个按钮,将直接跳转到结账页面。
带变体选择的弹窗
对于有变体的商品, 直接跳转结账页不现实。用户需要先选择所需的变体。 使用 JavaScript 和 WooCommerce 的 AJAX 功能,可以创建变体选择弹窗,而不是跳转到商品详情页。当用户选择完变体后,才能进行“立即购买”操作。
代码示例:
- JavaScript (添加到主题的js文件或者内联脚本中):
jQuery(document).ready(function($){
$('body').on('click','.order-now-button-variable', function(e){
e.preventDefault();
var productId = $(this).data('product_id');
$.ajax({
url: woocommerce_params.ajax_url,
data: {
'action': 'load_variation_popup',
'product_id': productId,
},
method: 'POST',
success: function (response) {
// Create the modal backdrop
var backdrop = $('<div class="popup-overlay"></div>');
// Create the modal dialog container
var dialog = $('<div class="popup-content">' + response + '<button class="popup-close" style="position: absolute; top: 10px; right: 10px;background-color:#dd3333; color:#fff; border:none;cursor: pointer; border-radius:4px;">x</button></div>');
// Add modal dialog to the DOM
$('body').append(backdrop);
$('body').append(dialog);
$('body').scrollTop(0);
dialog.show();
backdrop.on("click",function(){
dialog.hide();
backdrop.hide();
});
$('.popup-close').on('click', function() {
dialog.hide();
backdrop.hide();
});
dialog.on("click", ".single_add_to_cart_button", function(){
backdrop.hide();
dialog.hide();
$.ajax({
url: woocommerce_params.ajax_url,
type:'POST',
data:$('.popup-content form.variations_form').serialize() + '&action=add_variations_to_cart&add-to-cart='+ productId ,
success:function(res){
window.location.href = res;
},
});
})
},
});
});
});
- PHP (添加到
functions.php
):
add_action('wp_ajax_load_variation_popup', 'load_variation_popup_callback');
add_action('wp_ajax_nopriv_load_variation_popup', 'load_variation_popup_callback');
add_action('wp_ajax_add_variations_to_cart', 'add_variations_to_cart_callback');
add_action('wp_ajax_nopriv_add_variations_to_cart', 'add_variations_to_cart_callback');
function load_variation_popup_callback() {
if(isset($_POST['product_id'])){
$product_id = intval($_POST['product_id']);
$product = wc_get_product( $product_id );
if($product && $product->is_type('variable'))
{ wc_get_template( 'variable-popup.php', array('product'=>$product ) );
}
}
wp_die();
}
function add_variations_to_cart_callback(){
if ( !isset($_REQUEST['add-to-cart'] )){
return;
}
$product_id = intval( $_REQUEST['add-to-cart']);
$quantity = empty( $_POST['quantity'] ) ? 1 : wc_stock_amount( $_POST['quantity'] );
$variation_id = intval(isset( $_POST['variation_id'] )? $_POST['variation_id']:'');
$cart = WC()->cart;
if($variation_id && $product_id){
$added = $cart->add_to_cart($product_id, $quantity,$variation_id, []);
if($added){
echo wc_get_checkout_url();
}else{
echo wc_get_cart_url();
}
}
else
{
echo wc_get_cart_url();
}
wp_die();
}
function add_custom_variable_order_button_loop() {
global $product;
$is_variable = $product->is_type( 'variable' );
if($is_variable) {
$button_text = "立即购买";
$button_url = '#';
echo '<a href="'. $button_url.'" data-product_id="' . $product->get_id() . '" class="button order-now-button-variable">'.$button_text.'</a>';
}
}
function add_custom_variable_order_button_single() {
global $product;
$is_variable = $product->is_type( 'variable' );
if($is_variable){
$button_text = "立即购买";
$button_url = '#';
echo '<a href="'. $button_url.'" data-product_id="' . $product->get_id() . '" class="button order-now-button-variable">'.$button_text.'</a>';
}
}
add_action( 'woocommerce_after_shop_loop_item', 'add_custom_variable_order_button_loop' );
add_action( 'woocommerce_after_add_to_cart_button', 'add_custom_variable_order_button_single' );
- 在当前主题的
woocommerce
文件夹创建一个名为variable-popup.php
的文件,并放入以下内容
<?php
if(!isset($product)){ return ;}
$variations = $product->get_available_variations();
?>
<form class="variations_form cart" action="" method="post" enctype='multipart/form-data' data-product_id="<?php echo esc_attr( $product->get_id() ); ?>" data-product_variations="<?php echo esc_attr( wp_json_encode( $variations ) ); ?>">
<table class="variations" cellspacing="0">
<tbody>
<?php foreach ( $product->get_attributes() as $attribute_name => $options ) : ?>
<?php
if ( $product && is_a($product, 'WC_Product_Variable')) {
wc_dropdown_variation_attribute_options(
array(
'options' => $options,
'attribute' => $attribute_name,
'product' => $product,
)
);
}?>
<?php endforeach; ?>
</tbody>
</table>
<?php
if ( ! empty( $variations ) || $product->has_child() ) {
wp_nonce_field( 'woocommerce-product_addons' , 'woocommerce-product-addons-nonce');
wc_get_template('single-product/add-to-cart/variation-add-to-cart-button.php' , ['product' => $product ]);
}
?>
</form>
<?php ?>
操作步骤:
- 将JS代码放在主题js文件中或者添加一个
custom.js
,并在functions.php
文件中注册:
function enqueue_custom_scripts(){
wp_register_script('custom-js',get_stylesheet_directory_uri().'/assets/js/custom.js',array('jquery'), '', true );
wp_enqueue_script('custom-js');
wp_localize_script( 'custom-js', 'woocommerce_params', array('ajax_url' => admin_url('admin-ajax.php') ));
}
add_action('wp_enqueue_scripts','enqueue_custom_scripts');
- 将
functions.php
代码添加到主题的functions.php
。 - 创建
variable-popup.php
文件并放到当前主题的woocommerce
文件夹下。
这段代码的流程如下:
- 前端点击"立即购买"时,使用ajax请求加载
variable-popup.php
这个模板内容到页面弹出窗口中。 - 窗口的内容根据当前产品变体信息显示不同的下拉选项, 并带一个添加购物车按钮。
- 用户选中变体, 并点击购物车按钮, 窗口使用ajax的方式提交变体信息并添加到购物车, 并跳转到结算页。
此解决方案的核心是通过ajax动态加载内容,避免了用户跳转到其他页面的问题,并且使用主题模板的方式加载弹出框内容,方便个性化修改。
额外安全建议:
- 验证用户输入,对数据进行消毒和转义,以防 XSS 攻击或恶意数据提交。
- 在服务器端,也执行额外的检查以确保数据完整性, 并避免潜在漏洞。
- 使用Nonce 来防止CSRF攻击。
- 不要相信客户端返回的信息,每次都要服务器端校验。
通过以上代码和步骤,可以在 WooCommerce 网站中实现带变体选择的“立即购买”按钮功能。 请确保理解并测试每个环节,以确保其在实际应用中稳定运作。