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>

将加号和减号按钮添加到WooCommerce

3 个答案: