这是一个快速片段,您可以简单地复制/粘贴以在 WooCommerce 单一产品页面上输入的数量编号的每一侧显示“+”和“-”。
该片段还附带一个 jQuery 脚本,因为我们需要检测是否单击了加号或减号并因此更新数量输入。jQuery 对很多人来说可能看起来很难,但它的美妙之处在于您不需要拥有 jQuery 学位——只需复制/粘贴,然后看看奇迹发生。
PHP 代码段:显示加号和减号数量按钮 @ WooCommerce 单个产品页面和购物车页面
注意:您可能还需要一些自定义 CSS,因为您的主题可能会为数量按钮提供“浮动”显示(默认情况下 HTML 按钮采用内联块)。
/**
* @snippet Plus Minus Quantity Buttons @ WooCommerce Product Page & Cart
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible WooCommerce 5
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
// ————-
// 1. Show plus minus buttons
add_action( ‘woocommerce_after_quantity_input_field’, ‘bbloomer_display_quantity_plus’ );
function bbloomer_display_quantity_plus() {
echo ‘<button type=”button” class=”plus”>+</button>’;
}
add_action( ‘woocommerce_before_quantity_input_field’, ‘bbloomer_display_quantity_minus’ );
function bbloomer_display_quantity_minus() {
echo ‘<button type=”button” class=”minus”>-</button>’;
}
// ————-
// 2. Trigger update quantity script
add_action( ‘wp_footer’, ‘bbloomer_add_cart_quantity_plus_minus’ );
function bbloomer_add_cart_quantity_plus_minus() {
if ( ! is_product() && ! is_cart() ) return;
wc_enqueue_js( “
$(document).on( ‘click’, ‘button.plus, button.minus’, function() {
var qty = $( this ).parent( ‘.quantity’ ).find( ‘.qty’ );
var val = parseFloat(qty.val());
var max = parseFloat(qty.attr( ‘max’ ));
var min = parseFloat(qty.attr( ‘min’ ));
var step = parseFloat(qty.attr( ‘step’ ));
if ( $( this ).is( ‘.plus’ ) ) {
if ( max && ( max <= val ) ) {
qty.val( max ).change();
} else {
qty.val( val + step ).change();
}
} else {
if ( min && ( min >= val ) ) {
qty.val( min ).change();
} else if ( val > 1 ) {
qty.val( val – step ).change();
}
}
});
” );
}
常见问题
所有的素材与插件都可以用吗?
本站所有的素材与插件(包括免费的),都是本工作室用过的,测试过的,或者二开修改过的,理论上来说没有什么bug,但不保证在所有环境下都可以完美运行。
收费素材与免费素材怎么定义的
本站收费的素材,也是及其便宜的,其实就是收个打赏钱,是工作室对这些插件的测试,整理,修复,优化的辛苦钱,并非开发插件的费用,原创插件或者模版收费稍贵一些。
出现问题了怎么办?
由于收费非常低,大部分都不超10元,所以并不提供售后服务,但您如果需要,可以联系我付费咨询,费用为50元/次/小时。如果是原创模版或者插件,可以免费为您指导。
原文链接:https://www.52gys.cn/4836.html,转载请注明出处。
评论0