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>