WooCommerce 加号和减号按钮

问题描述 投票：0回答：6

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

wordpress button woocommerce
6个回答
6
投票

您需要覆盖子主题中 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>
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>
4
投票

@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);
    }
});
1
投票

在左侧显示要为每个产品添加的单位（带有“+”和“-”的数字），并使用右侧的“添加到购物车”按钮。将以下代码放入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;
}
0
投票

您还需要将其添加到您的 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 );


});
0
投票
/* Quantity add plus and minus */
jQuery('.woocommerce-variation-add-to-cart-disabled .quantity-plus').css("pointer-events","none");
jQuery('.woocommerce-variation-add-to-cart-disabled .quantity-minus').css("pointer-events","none");
jQuery('.woocommerce-variation-add-to-cart-enabled .quantity-plus').css("pointer-events","auto");
jQuery('.woocommerce-variation-add-to-cart-enabled .quantity-plus').css("pointer-events","auto");
jQuery(document).on( 'click', '.quantity-plus, .quantity-minus', function() {
    
     var qty = jQuery( this ).parent( '.input-quantity-box' ).find( '.qty' );
         if(jQuery.isNumeric(qty.val()) == false){
             qty.val(1);
         }
         /*var val = parseFloat(qty.val());
         var max = parseFloat(qty.attr( 'max' ));
         var min = parseFloat(qty.attr( 'min' ));
         var step = parseFloat(qty.attr( 'step' ));*/
         var val = parseInt(qty.val());
         var max = parseInt(qty.attr( 'max' ));
         var min = parseInt(qty.attr( 'min' ));
         var step = parseInt(qty.attr( 'step' ));
         
         if ( jQuery( this ).is( '.quantity-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 );
               }
            }
        jQuery('.woocommerce-cart-form button.button').prop("disabled", false);    
});

function number_format1 (number, decimals, dec_point, thousands_sep) {
            // Strip all characters but numerical ones.
            number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
            var n = !isFinite(+number) ? 0 : +number,
            prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
            sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
            dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
            s = '',
            toFixedFix = function (n, prec) {
                var k = Math.pow(10, prec);
                return '' + Math.round(n * k) / k;
            };
            // Fix for IE parseFloat(0.55).toFixed(0) = 0;
            s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
            if (s[0].length > 3) {
                s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
            }
            if ((s[1] || '').length < prec) {
                s[1] = s[1] || '';
                s[1] += new Array(prec - s[1].length + 1).join('0');
            }
            return s.join(dec);
        }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.