Question

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

Answer 1

您需要覆盖＆＃39;数量输入＆＃39;来自您孩子主题的woocommerce。它位于插件中 - ＆gt; woocommerce - ＆gt;模板 - ＆gt;全球 - ＆gt;量输入复制此文件中的内容。在您的主题文件夹中创建一个＆＃39; woocommerce＆＃39;目录。创建另一个名为＆＃39; global＆＃39;的文件夹。在这个目录中。将内容粘贴到此处。

找到代码

<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

@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 3

您还需要将此添加到您的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 4

您需要添加.change();

更好地进入yourtheme/woocommerce/global/quantity-input.php 这样也可以在购物车页面中使用。

<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>

Answer 5

在左侧显示要为每种产品添加的单位（带有“ +”和“-”的数字），并在右侧显示“添加到购物车”按钮。在 functions.php 文件中放置下面的代码，并在 style.css 文件中添加CSS代码。

//1. Show Buttons
add_action( 'woocommerce_before_add_to_cart_quantity', 'display_quantity_plus' );
function display_quantity_plus() {
   echo '<button type="button" class="plus" >+</button>';
}
add_action( 'woocommerce_after_add_to_cart_quantity', 'display_quantity_minus' );
function display_quantity_minus() {
   echo '<button type="button" class="minus" >-</button>';
}
//2. Trigger jQuery script
add_action( 'wp_footer', 'add_cart_quantity_plus_minus' );
function add_cart_quantity_plus_minus() {
   // Only run this on the single product page
   if ( ! is_product() ) return; ?>
      <script type="text/javascript">  
      jQuery(document).ready(function($){   
         $('form.cart').on( 'click', 'button.plus, button.minus', function() {
            // Get current quantity values
            var qty = $( this ).closest( 'form.cart' ).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' ));
            // Change the value if plus or minus
            if ( $( this ).is( '.plus' ) ) {
               if ( max && ( max <= val ) ) {
                  qty.val( max );
               } else {
                  qty.val( val + step );
               }
            } else {
               if ( min && ( min >= val ) ) {
                  qty.val( min );
               } else if ( val > 1 ) {
                  qty.val( val - step );
               }
            } 
         }); 
      });  
      </script>
   <?php
}

CSS代码

.woocommerce div.product .entry-summary .cart div.quantity{
    float: none;
    margin: 0;
    display: inline-block;
}
.woocommerce div.product form.cart .button {
    vertical-align: middle;
    float: none;
}

WooCommerce加号和减号按钮

5 个答案: