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

Question

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

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

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

Answer 1

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

以下是我如何为我的网站做的简短概述：（希望我能够帮助你）

我删除了themes functions.php中的标准钩子

例如：

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

所有商业挂钩概述：（视觉指南）

Archive-Page：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来更改data-数量的值。

在my themes 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);

});

希望这段代码能够帮助你。