WooCommerce加号和减号按钮

Question

我是一名Web开发人员，我想用WooCommerce创建自己的网店。 但我有一个问题， 产品页面上的加号和减号按钮没有显示，有谁知道如何获得这些按钮（也许在某处添加一些代码）？

Answer 1

您需要覆盖子主题中来自woocommerce的“数量输入”。这是位于插件 - > woocommerce - >模板 - >全球 - >数量输入 复制此文件中的内容。在您的主题文件夹中创建一个'woocommerce'目录。在此目录中创建另一个名为'global'的文件夹。将内容粘贴在这里。

找到代码

<input type="number" step="<?php echo esc_attr($step); ?>" <?php if (is_numeric($min_value)) : ?>min="<?php echo esc_attr($min_value); ?>"<?php endif; ?> <?php if (is_numeric($max_value)) : ?>max="<?php echo esc_attr($max_value); ?>"<?php endif; ?> name="<?php echo esc_attr($input_name); ?>" value="<?php echo esc_attr($input_value); ?>" title="<?php _ex('Qty', 'Product quantity input tooltip', 'woocommerce') ?>" class="input-text qty text" size="4" /> 

高于此添加它

<input class="minus" type="button" value="-"> 

和这片下方

<input class="plus" type="button" value="+"> 

你的整个代码看起来像这样上面这一段代码：

if (! defined('ABSPATH')) exit; // Exit if accessed directly 
?> 
<div class="quantity"> 
<input class="minus" type="button" value="-"> 
<input type="number" step="<?php echo esc_attr($step); ?>" <?php if (is_numeric($min_value)) : ?>min="<?php echo esc_attr($min_value); ?>"<?php endif; ?> <?php if (is_numeric($max_value)) : ?>max="<?php echo esc_attr($max_value); ?>"<?php endif; ?> name="<?php echo esc_attr($input_name); ?>" value="<?php echo esc_attr($input_value); ?>" title="<?php _ex('Qty', 'Product quantity input tooltip', 'woocommerce') ?>" class="input-text qty text" size="4" /> 
<input class="plus" type="button" value="+"> 
</div> 

Answer 2

您还需要添加到您的Javascript：

$('.plus').on('click',function(e){ 

    var val = parseInt($(this).prev('input').val()); 

    $(this).prev('input').val(val+1); 


}); 

$('.minus').on('click',function(e){ 

    var val = parseInt($(this).next('input').val()); 

    $(this).next('input').val(val-1); 


}); 

Answer 3

@RollYourOwnEd更新的JavaScript，可以防止供给数量趋于在负值：

$('.plus').on('click',function(e){ 

var val = parseInt($(this).prev('input').val()); 

$(this).prev('input').val(val+1); 


}); 
$('.minus').on('click',function(e){ 

var val = parseInt($(this).next('input').val()); 
if(val !== 0){ 
    $(this).next('input').val(val-1); 
} }); 

Answer 4

我要发表评论，但不要有enoguh声望这样做，也许这个答案也有助于这个问题，以及：D

---

值得注意的是，在WordPress中，不推荐使用$来简化jQuery。 应该使用'jQuery'。

阅读f.ex. https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/（包括如果您打算使用jQuery更多的工作要解决此问题），您需要添加.change();

更好的yourtheme/woocommerce/global/quantity-input.php 内这样会在购物车页面上也工作或https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/

Answer 5

。

<script type="text/javascript"> 
    jQuery(document).ready(function($){ 
    $('.quantity').on('click', '.plus', function(e) { 
     $input = $(this).prev('input.qty'); 
     var val = parseInt($input.val()); 
     $input.val(val+1).change(); 
    }); 

    $('.quantity').on('click', '.minus', 
     function(e) { 
     $input = $(this).next('input.qty'); 
     var val = parseInt($input.val()); 
     if (val > 0) { 
      $input.val(val-1).change(); 
     } 
    }); 
}); 
</script>