更新 2021年
对于从 3.2 到 5+ 的 WooCommerce 版本，优化了 jQuery 代码并删除了数量错误。添加到购物车后添加数量重置。
以下自定义函数挂在woocommerce_loop_add_to_cart_link 过滤器钩子中，并为 WooCommerce 档案页面和其他产品循环上的每个产品添加一个数量输入字段。我们在这里主要使用原始的 WooCommerce 代码。
当客户更改数量时，需要一些 jQuery 代码来更新添加到购物车按钮上的data-quantity 属性。可能需要一些样式，具体取决于您的客户希望（以及您的主题）。
隐藏“查看购物车”按钮的附加部分位于末尾。
代码：
add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_loop_ajax_add_to_cart', 10, 2 );
function quantity_inputs_for_loop_ajax_add_to_cart( $html, $product ) {
if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
// Get the necessary classes
$class = implode( ' ', array_filter( array(
'button',
'product_type_' . $product->get_type(),
$product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
$product->supports( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : '',
) ) );
// Embedding the quantity field to Ajax add to cart button
$html = sprintf( '%s<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
woocommerce_quantity_input( array(), $product, false ),
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
esc_attr( $product->get_id() ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $class ) ? $class : 'button' ),
esc_html( $product->add_to_cart_text() )
);
}
return $html;
}
add_action( 'wp_footer' , 'archives_quantity_fields_script' );
function archives_quantity_fields_script(){
?>
<script type='text/javascript'>
jQuery(function($){
// Update data-quantity
$(document.body).on('click input', 'input.qty', function() {
$(this).parent().parent().find('a.ajax_add_to_cart').attr('data-quantity', $(this).val());
$(".added_to_cart").remove(); // Optional: Removing other previous "view cart" buttons
}).on('click', '.add_to_cart_button', function(){
var button = $(this);
setTimeout(function(){
button.parent().find('.quantity > input.qty').val(1); // reset quantity to 1
}, 1000); // After 1 second
});
});
</script>
<?php
}
代码进入您的活动子主题（活动主题）的functions.php 文件中。
在店面主题的 WooCommerce 版本 4.1.1 和 WordPress 4.5.1 上测试并运行。
隐藏“查看购物车”按钮 （使用 Ajax 添加到购物车时）：
1)。您可以将此 CSS 规则添加到位于活动主题中的 styles.css 文件中：
a.added_to_cart.wc-forward {
display:none;
}
2)。您可以使用以下挂钩函数（第一个选项是最好的方法）：
add_action( 'wp_head' , 'hide_ajax_view_cart_button' );
function hide_ajax_view_cart_button(){
if( is_shop() || is_product_category() || is_product_tag() ): ?>
<style>
a.added_to_cart.wc-forward {
display:none;
}
</style>
<?php endif;
}
代码进入您的活动子主题（活动主题）的 function.php 文件中。