返回

WooCommerce立即购买: 变体弹窗 & 快速结账

python

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>';
	 }
}

操作步骤:

  1. 将以上代码添加到当前主题的 functions.php 文件或者通过Code Snippets插件添加。
  2. 这个代码会在商品列表页(shop loop)和单品页面添加一个 "立即购买" 按钮。
  3. 对于没有变体的商品, 点击这个按钮,将直接跳转到结账页面。

带变体选择的弹窗

对于有变体的商品, 直接跳转结账页不现实。用户需要先选择所需的变体。 使用 JavaScript 和 WooCommerce 的 AJAX 功能,可以创建变体选择弹窗,而不是跳转到商品详情页。当用户选择完变体后,才能进行“立即购买”操作。

代码示例:

  1. 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;
						 

						},
					});
           })

         },
       
        });


});
});

  1. 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' );


  1. 在当前主题的 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 ?>

操作步骤:

  1. 将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');
  1. functions.php 代码添加到主题的functions.php
  2. 创建variable-popup.php文件并放到当前主题的woocommerce文件夹下。

这段代码的流程如下:

  • 前端点击"立即购买"时,使用ajax请求加载variable-popup.php 这个模板内容到页面弹出窗口中。
  • 窗口的内容根据当前产品变体信息显示不同的下拉选项, 并带一个添加购物车按钮。
  • 用户选中变体, 并点击购物车按钮, 窗口使用ajax的方式提交变体信息并添加到购物车, 并跳转到结算页。

此解决方案的核心是通过ajax动态加载内容,避免了用户跳转到其他页面的问题,并且使用主题模板的方式加载弹出框内容,方便个性化修改。

额外安全建议:

  • 验证用户输入,对数据进行消毒和转义,以防 XSS 攻击或恶意数据提交。
  • 在服务器端,也执行额外的检查以确保数据完整性, 并避免潜在漏洞。
  • 使用Nonce 来防止CSRF攻击。
  • 不要相信客户端返回的信息,每次都要服务器端校验。

通过以上代码和步骤,可以在 WooCommerce 网站中实现带变体选择的“立即购买”按钮功能。 请确保理解并测试每个环节,以确保其在实际应用中稳定运作。