向 WooCommerce 添加加号和减号按钮

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

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

我和其他人一样，不想安装插件，因为使用代码是更明智的选择。更好的是，我们应该可以选择保留或不保留它们。我离题了...

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

在另一个线程上找到答案，但不确定它到底去哪里，或者这是否是我需要恢复按钮的地方

// 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");
     });
});

提前致谢！

button woocommerce
3个回答
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' );
1
投票

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

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);
0
投票

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.