使用过Woocommerce插件开发过wordpress商城主题的朋友应该都知道，Woocommerce默认的数量选择框没有左右两边的加减按钮，比较丑，而且使用不方便，如下图所示：
而我们希望的效果是数量选择框两边有加减按钮，并能实现点击加减数量，如下图：
那么要实现这样的效果图，其实也不难，我们只需要自己定义一个函数，然后在调用默认数量选择框函woocommerce_quantity_input($args)的地方换成我们自己定义的函数就可以了，自定义函数如下：
/**
*/
function mx_output_quantity_widht_minus_plus_button($product){
ob_start(); // 开始输出缓冲
$args = array(
'min_value' => apply_filters( 'woocommerce_quantity_input_min',$product->get_min_purchase_quantity(),$product ),
'max_value' => apply_filters( 'woocommerce_quantity_input_max',$product->get_max_purchase_quantity(),
'input_value' => isset( $_POST['quantity'] ) ? wc_stock_amount( wp_unslash( $_POST['quantity'] ) ) : $product->get_min_purchase_quantity(),// WPCS: CSRF ok,input var ok.
);
woocommerce_quantity_input($args); // 不直接输出，而是捕获输出
$quantity_input = ob_get_clean(); // 获取并清除输出缓冲区的内容
$before_input = '<span class="minus">-</span>';
$after_input = '<span class="plus">+</span>';
$search = array('<input','</div>','class="quantity"');
$replace = array($before_input . '<input',$after_input.'</div>','class="quantity mx-quantity"');
$modified_quantity_input = str_replace($search,$replace,$quantity_input);
echo $modified_quantity_input;
}
同时，为了让加减号点击起作用，我们还需要增加一段js代码，如下：
$(document).ready(function() {
//产品列表中数量选择
$('.mx-quantity .minus').click(function() {
var input = $(this).siblings('.qty');
var value = parseInt(input.val());
if (value > 1) {
input.val(value - 1);
$(this).parent().siblings("a.add_to_cart_button").attr('data-quantity',(value - 1));
}
});
$('.mx-quantity .plus').click(function() {
var input = $(this).siblings('.qty');
var value = parseInt(input.val());
input.val(value + 1);
$(this).parent().siblings("a.add_to_cart_button").attr('data-quantity',(value + 1));
});
});
当然，以上内容，需要您有一定的基础可能才能明白怎么使用，比如如何自定义woocommerce页面或模块儿模板，js怎么添加和使用，在这里用文字不适合讲那么细，后期我们开发的wordpress系统教程中，会以视频讲解的方式对本内容进行详细讲解。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
