Question

默认情况下，Woocommerce没有可变商品的数量框。

我尝试过https://ru.wordpress.org/plugins/woocommerce-ajax-add-to-cart-for-variable-products/，但它只显示在单个产品页面上。

如何在产品页面上显示数量框？

Answer 1

您可以创建自己的自定义数量框：

以下是我为网站做的简短概述：（希望我能为您提供帮助）

我删除了主题函数中的标准woocommerce钩子。php

例如：

remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );

所有woocommerce钩子的概述：（可视指南）

存档页面：https://businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/

单个产品：https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/

在移除挂钩之后，我使用包含我的自定义数量框的自定义功能将它们添加到了所需的位置。

add_action( 'woocommerce_after_shop_loop_item_title', 'customize_woocommerce_archive_product', 10 );

function customize_woocommerce_archive_product(){
   global $product;
   $id = $product->get_id();
   $permalink = get_permalink( $product->get_id());
   $step = 1;
   $min_value = 1;
   $max_value = 10000;
   $input_name = $id;
   $input_value = 1;
   $input_name = $id;
   $sku = $product->get_sku();

   <input id="quantity_counter<?php echo $id;?>" 
   type="number" step="<?php echo esc_attr( $step ); ?>" 
   min="<?php echo esc_attr( $min_value ); ?>" 
   max="<?php echo esc_attr( $max_value ); ?>" 
   name="<?php echo esc_attr( $input_name ); ?>" 
   value="<?php echo esc_attr( $input_value ); ?>" 
   title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" 
   class="input-text qty text custom_quantity" size="4"/>

   <div class="custom_pricing_table_row custom_pricing_table_button_container">

        <a href="<?php echo $permalink;?>/?add-to-cart=<?php echo $id; ?>" 
        name="<?php echo $id;?>" data-quantity="1" 
        class="custom_pricing_table_button button product_type_simple 
        add_to_cart_button ajax_add_to_cart quantity_trigger" 
        data-product_id="<?php echo $id;?>" 
        data-product_sku="<?php echo $sku;?>" rel="nofollow">Add to cart</a>

   </div>
}

现在，您必须添加一些JavaScript来更改数据量的值。

在主题function.js中，我创建了以下函数：

 jQuery('.quantity_trigger').click(function(){
    var clickedTrigger_ID = jQuery(this).attr('name');  
    var searchID = 'quantity_counter' + clickedTrigger_ID;

    var currentCounter = document.getElementById(searchID);
    var quantity = currentCounter.value;

    jQuery(this).attr("data-quantity",quantity);

});

希望此代码能够为您提供帮助。

如何在商店页面的可变和简单产品上添加带有“添加到购物车”按钮的数量框？

1 个答案: