在Woocommerce商店页面中显示添加到购物车ajax的数量框

我是Woocommerce的新手。 我试图在商店页面中显示数量框。 我使用了以下代码，它按预期工作：

add_action( 'woocommerce_before_shop_loop', 'handsome_bearded_guy_select_variations' ); function handsome_bearded_guy_select_variations() { remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 ); add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_single_add_to_cart', 30 ); } 

但问题是ajax添加到购物车按钮被替换为默认按钮。

如何启用添加到购物车按钮的ajaxfunction以及Woocommerce存档页面的数量字段 ？

Answer 1

这可以使用以下代码完成，这与原始代码非常相似，在专用的woocommerce_loop_add_to_cart_linkfilter钩子和一些jQuery中使用自定义钩子函数。

现在，因为它是像以前一样的ajax，一旦添加到购物车，你将在右侧获得额外的“查看购物车”按钮（你可以隐藏：最后看看如何） 。

你必须在这个上做一些CSS样式……

代码：

 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' : '', ) ) ); // Adding embeding 
 tag and the quantity field $html = sprintf( 'https://stackoverflow.com/questions/48722178/show-quantity-box-with-add-to-cart-ajax-enabled-in-woocommerce-shop-page/%shttps://stackoverflow.com/questions/48722178/show-quantity-box-with-add-to-cart-ajax-enabled-in-woocommerce-shop-page/%shttps://stackoverflow.com/questions/48722178/show-quantity-box-with-add-to-cart-ajax-enabled-in-woocommerce-shop-page/%shttps://stackoverflow.com/questions/48722178/show-quantity-box-with-add-to-cart-ajax-enabled-in-woocommerce-shop-page/%s', '
', 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(){ if( is_shop() || is_product_category() || is_product_tag() ): ?>   

代码放在活动子主题（活动主题）的function.php文件中。

经过测试和工作。

---

在右侧隐藏额外的ajax按钮“查看购物车” （添加到购物车时） ：

1）您可以将此CSS规则添加到活动主题中的styles.css文件中：

 a.added_to_cart.wc-forward { display:none; } 

2）您可以使用以下hoockedfunction（第一个选项是最好的方法） ：

 add_action( 'wp_head' , 'hide_ajax_view_cart_button' ); function hide_ajax_view_cart_button(){ if( is_shop() || is_product_category() || is_product_tag() ): ?>   

代码放在活动子主题（活动主题）的function.php文件中。

测试和工作。

Answer 2

如上所述，没有“数量错误”。

代码：

 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' : '', ) ) ); // Adding embeding 
 tag and the quantity field $html = sprintf( 'https://stackoverflow.com/questions/48722178/show-quantity-box-with-add-to-cart-ajax-enabled-in-woocommerce-shop-page/%shttps://stackoverflow.com/questions/48722178/show-quantity-box-with-add-to-cart-ajax-enabled-in-woocommerce-shop-page/%shttps://stackoverflow.com/questions/48722178/show-quantity-box-with-add-to-cart-ajax-enabled-in-woocommerce-shop-page/%shttps://stackoverflow.com/questions/48722178/show-quantity-box-with-add-to-cart-ajax-enabled-in-woocommerce-shop-page/%s', '
', 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(){ //if( is_shop() || is_product_category() || is_product_tag() ): ?>   

参考文献：

@ LoicTheAztec在2018年2月11日之后进入。

2015年12月11日和2018年3月15日分别为@ braciawrite和@ andrewmclagan的GitHub参赛作品。

https://gist.github.com/webaware/6260326

注意：

代码应在按下“add_to_cart”按钮时执行检查，而不是在数量更改时执行。

我在函数“archives_quantity_fields_script”下注释了if和endif语句，因为我在使用WooCommerce产品的自定义页面上运行此代码。

希望这可以帮助！