[英]Add a quantity field to Ajax add to cart button on WooCommerce shop page
[英]How to Add Quantity Field On Shop Page for WooCommerce
我在互联网上找到了一些代码,可以在 WooCommerce 的商店页面上添加数量字段。
但是我有一个问题 - 我在主页和普通页面上也有产品,但是使用这些代码我只能在商店页面上获得数量字段。
如何在所有这些页面上放置数量框? 我使用店面主题。
谢谢!
*/
function custom_quantity_field_archive() {
$product = wc_get_product( get_the_ID() );
if ( ! $product->is_sold_individually() && 'variable' != $product->product_type && $product->is_purchasable() ) {
woocommerce_quantity_input( array( 'min_value' => 1, 'max_value' => $product->backorders_allowed() ? '' : $product->get_stock_quantity() ) );
}
}
add_action( 'woocommerce_after_shop_loop_item', 'custom_quantity_field_archive', 15, 9 );
function custom_add_to_cart_quantity_handler() {
wc_enqueue_js( '
jQuery( "body" ).on( "click", ".quantity input", function() {
return false;
});
jQuery( "body" ).on( "change input", ".quantity .qty", function() {
var add_to_cart_button = jQuery( this ).parents( ".product" ).find( ".add_to_cart_button" );
// For AJAX add-to-cart actions
add_to_cart_button.attr( "data-quantity", jQuery( this ).val() );
// For non-AJAX add-to-cart actions
add_to_cart_button.attr( "href", "?add-to-cart=" + add_to_cart_button.attr( "data-product_id" ) + "&quantity=" + jQuery( this ).val() );
});
' );
}
add_action( 'init', 'custom_add_to_cart_quantity_handler' );
您可能可以尝试此代码。 只需将其添加到您的函数中即可。php
function quantity_for_woocommerce_loop( $html, $product ) {
if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
$html = '<form action="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data">';
$html .= woocommerce_quantity_input( array(), $product, false );
$html .= '<button type="submit" class="button alt">' . esc_html( $product->add_to_cart_text() ) . '</button>';
$html .= '</form>';
}
return $html;
}
add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_for_woocommerce_loop', 10, 2 );
让我知道这是否对您有用。
这是工作代码:
/**
* Display QTY Input before add to cart link.
*/
function custom_wc_template_loop_quantity_input() {
// Global Product.
global $product;
// Check if the product is not null, is purchasable, is a simple product, is in stock, and not sold individually.
if ( $product && $product->is_purchasable() && $product->is_type( 'simple' ) && $product->is_in_stock() && ! $product->is_sold_individually() ) {
woocommerce_quantity_input(
array(
'min_value' => 1,
'max_value' => $product->backorders_allowed() ? '' : $product->get_stock_quantity(),
)
);
}
}
add_action( 'woocommerce_after_shop_loop_item', 'custom_wc_template_loop_quantity_input', 9 );
/**
* Add JS script in <head/> tag.
*/
function custom_wc_add_qty_change_script() {
?>
<script>
(function ($) {
$(document).on("change", "li.product .quantity input.qty", function (e) {
e.preventDefault();
var add_to_cart_button = $(this).closest("li.product").find("a.add_to_cart_button");
// For AJAX add-to-cart actions.
add_to_cart_button.attr("data-quantity", $(this).val());
// For non-AJAX add-to-cart actions.
add_to_cart_button.attr("href", "?add-to-cart=" + add_to_cart_button.attr("data-product_id") + "&quantity=" + $(this).val());
});
})(jQuery);
</script>
<?php
}
add_action( 'wp_head', 'custom_wc_add_qty_change_script', 20 );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.