如何在输入数量框WooCommerce上添加加减按钮?

时间:2019-05-24 作者:Sophia Wauge

我想在单个产品页面的数量输入之后和之前添加+和-按钮?如何使用标准方法(比如使用挂钩和fitler)添加?

1 个回复
最合适的回答,由SO网友:Senior WordPress Developer 整理而成

下面的代码段将显示加号(&;减数量按钮@WooCommerce单一产品页面。Reference

/**
 * @snippet       Plus Minus Quantity Buttons @ WooCommerce Single Product Page
 * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @sourcecode    https://businessbloomer.com/?p=90052
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

// -------------
// 1. Show Buttons

add_action( \'woocommerce_before_add_to_cart_quantity\', \'bbloomer_display_quantity_plus\' );

function bbloomer_display_quantity_plus() {
   echo \'<button type="button" class="plus" >+</button>\';
}

add_action( \'woocommerce_after_add_to_cart_quantity\', \'bbloomer_display_quantity_minus\' );

function bbloomer_display_quantity_minus() {
   echo \'<button type="button" class="minus" >-</button>\';
}

// -------------
// 2. Trigger jQuery script

add_action( \'wp_footer\', \'bbloomer_add_cart_quantity_plus_minus\' );

function bbloomer_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
}

相关推荐

Testing Plugins for Multisite

我最近发布了一个WordPress插件,它在单个站点上非常有效。我被告知该插件在多站点安装上不能正常工作,我理解其中的一些原因。我已经更新了代码,现在需要一种方法来测试更新后的代码,然后才能转到实时客户的多站点安装。我有一个用于测试的WordPress安装程序的单站点安装,但需要在多站点安装上进行测试。根据我所能找到的唯一方法是在网络上至少有两个站点来安装整个多站点安装,以测试我的插件。设置WordPress的整个多站点安装是插件开发人员的唯一/首选方式,还是有更快的测试环境可用。