向 WooCommerce 添加加号和减号按钮

Question

WooCommerce 决定从产品和购物车页面中移除 + 和 - 按钮以增加或减少数量。他们说这是多余的，如果有人想要他们回来，只需从他们那里安装另一个插件。

我和其他人一样，不希望在使用代码时安装插件是更明智的选择。更好的是，我们应该可以选择是否保留它们。我跑题了……

我已经在网上搜索了一个解决方案，尝试了几个，但没有任何乐趣。非常感谢有关将它们带回所需的代码以及应放置该代码的位置的帮助。

在另一个 thread here 上找到了答案，但不确定它到底去了哪里，或者我是否需要把按钮带回来

// Input +- tweak

$(function(a){
a(".woocommerce-ordering").on("change", "select.orderby", function(){
a(this).closest("form").submit();
}),
a("div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)").addClass("buttons_added").append('<input type="button" value="+" class="plus" />').prepend('<input type="button" value="-" class="minus" />'), a("input.qty:not(.product-quantity input.qty)").each(function(){
var b=parseFloat(a(this).attr("min"));b&&b>0&&parseFloat(a(this).val())<b&&a(this).val(b);
}),
a(document).on("click", ".plus, .minus", function(){
var b=a(this).closest(".quantity").find(".qty"),
c=parseFloat(b.val()),
d=parseFloat(b.attr("max")),
e=parseFloat(b.attr("min")),
f=b.attr("step");c&&""!==c&&"NaN"!==c||(c=0),
(""===d||"NaN"===d)&&(d=""),
(""===e||"NaN"===e)&&(e=0),
("any"===f||""===f||void 0===f||"NaN"===parseFloat(f))&&(f=1),
a(this).is(".plus")?b.val(d&&(d==c||c>d)?d:c+parseFloat(f)):e&&(e==c||e>c)?b.val(e):c>0&&b.val(c-parseFloat(f)),
b.trigger("change");
});
});

提前致谢！

Answer 1

是的，我知道这个问题，真的很烦人，我创建的每个主题都需要解决这个问题......我是这样做的：

在您的主题文件夹中创建一个文件夹：/woocommerce/global/

创建文件：quantity-input.php

将以下内容放入该文件中：

<?php
/**
 * Product quantity inputs
 *
 * @author 		WooThemes
 * @package 	WooCommerce/Templates
 * @version     2.1.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}

?>
<div class="quantity">
    <input type="text" pattern="[0-9]*" 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', 'moto' ) ?>" class="input-text qty text" size="4" />
    <span class="td-quantity-button plus">+</span>
    <span class="td-quantity-button min">-</span>
</div>

当然你需要一些 jQuery 来使按钮工作：

    $('.td-quantity-button').on('click', function () {
        var $this = $(this);
        var $input = $this.parent().find('input');
        var $quantity = $input.val();
        var $new_quantity = 0;
        if ($this.hasClass('plus')) {
            var $new_quantity = parseFloat($quantity) + 1;
        } else {
            if ($quantity > 0) {
                var $new_quantity = parseFloat($quantity) - 1;
            }
        }
        $input.val($new_quantity);
    });

请注意，您必须自己设置这些按钮和输入字段的样式。

另请注意，您的主题或插件中需要 jquery enqueud：

function theme_name_scripts() {
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

Answer 2

如果您想要一个简洁的解决方案，通过简单的自定义选项向 WooCommerce 产品和购物车页面添加“-”和“+”增量按钮，我创建了一个插件，它无需覆盖模板，仅通过挂钩：

Qty Increment Buttons for WooCommerce

PHP 和 jQuery 代码只是解决方案的一部分，因为需要多次 CSS 操作才能使这些插入的按钮看起来像。 WooCommerce 3.0 为产品页面提供了额外的钩子，因此实施更加容易，但它们不是必须的，我也让它适用于旧版本。

这是我的 jQuery 代码：

// Make code work on page load (this js file is executed only on product and cart page).
$(document).ready(function(){
    QtyChng();
});

// Make code work after executing AJAX on cart page. Support for default WooCommerce and plugins using AJAX on cart page.
$( document.body ).on( 'updated_cart_totals', function(){
    QtyChng();
});

function QtyChng() {    
    $('.woocommerce form.cart, .woocommerce td.product-quantity').on( 'click', '.qib-button', function() {

        // Find quantity input field corresponding to increment button clicked. 
        var qty = $( this ).siblings( '.quantity' ).find( '.qty' );
        // Read value and attributes 'min', 'max', 'step'.
        var val = parseFloat(qty.val());
        var max = parseFloat(qty.attr( 'max' ));
        var min = parseFloat(qty.attr( 'min' ));        
        var step = parseFloat(qty.attr( 'step' ));  

        // Change input field value if result is in min and max range.
        if ( $( this ).is( '.plus' ) ) {            
            if ( val === max ) return false;            
            if ( val + step > max ) {
              qty.val( max );
            } else {
              qty.val( val + step );
            }           
        } else {            
            if ( val === min ) return false;            
            if ( val - step < min ) {
              qty.val( min );
            } else {
              qty.val( val - step );
            }           
        }

        $( this ).siblings( '.quantity' ).find( '.qty' ).trigger("change");

    });
}

})(jQuery);

Answer 3

<?php
/**
 * Product quantity inputs
 *
 * @author      WooThemes
 * @package     WooCommerce/Templates
 * @version     2.1.0
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

?>
<div class="quantity">
    <input type="text" pattern="[0-9]*" 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', 'moto' ) ?>" class="input-text qty text" size="4" />
    <span class="td-quantity-button plus">+</span>
    <span class="td-quantity-button min">-</span>
</div>