<label class="quantity__label" for="<?php echo esc_attr( $input_id ); ?>"><?php esc_html_e('Quantity:', 'woocommerce');?></label><div class="quantity__wrapper"><input type="button" value="-" class="quantity__button數量__remove js-qty-remove"/><輸入類型=文本"id="<?php echo esc_attr( $input_id ); ?>"class="輸入文本數量 文本數量__輸入"step="<?php echo esc_attr( $step ); ?>"min="<?php echo esc_attr( $min_value ); ?>"max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>"name="<?php echo esc_attr( $input_name ); ?>"value="<?php echo esc_attr( $input_value ); ?>"title="<?php echo esc_attr_x( 'Qty', '產品數量輸入工具提示', 'woocommerce'); ?>"大小=4"模式="<?php echo esc_attr( $pattern ); ?>"inputmode="<?php echo esc_attr( $inputmode ); ?>"aria-labelledby="<?php echo esc_attr( $labelledby ); ?>"/><input type="button" value="+" class="數量__按鈕數量__add js-qty-add"/>

functionquantityButtons() {var $qtyAdd = $('.js-qty-add'),$qtyRemove = $('.js-qty-remove'),$qtyInput = $('.quantity__input');$qtyAdd.on('點擊', addQty);$qtyRemove.on('點擊', removeQty);函數 addQty() {var $qtyInput = $('.quantity__input'),$qtyRemove = $('.js-qty-remove'),$i = $qtyInput.val();$i++;$qtyRemove.attr("禁用", !$i);$qtyInput.val($i);}函數 removeQty() {var $qtyInput = $('.quantity__input'),$qtyRemove = $('.js-qty-remove'),$i = $qtyInput.val();如果 ($i >= 1) {$i--;$qtyInput.val($i);} 別的 {$qtyRemove.attr("禁用", true);}}$qtyRemove.attr("禁用", !$qtyInput.val());}數量按鈕()；

<代碼>?><div class="數量"><label class="screen-reader-text" for="<?php echo esc_attr( $input_id ); ?>"><?php esc_html_e('Quantity', 'woocommerce');?></label><input type="button" value="-" class="qty_button減"/><輸入類型=數字"id="<?php echo esc_attr( $input_id ); ?>"類=輸入文本數量文本"step="<?php echo esc_attr( $step ); ?>"min="<?php echo esc_attr( $min_value ); ?>"max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>"name="<?php echo esc_attr( $input_name ); ?>"value="<?php echo esc_attr( $input_value ); ?>"title="<?php echo esc_attr_x( 'Qty', '產品數量輸入工具提示', 'woocommerce'); ?>"大小=4"模式="<?php echo esc_attr( $pattern ); ?>"inputmode="<?php echo esc_attr( $inputmode ); ?>"aria-labelledby="<?php echo esc_attr( $labelledby ); ?>"/><input type="button" value="+" class="qty_button plus"/>

<?php

現在必要的 CSS 和重新審視的 jQuery 代碼功能:

//刪除輸入字段類型編號上的 +/- 默認按鈕的最小 CSSadd_action('wp_head', 'custom_quantity_fields_css');函數 custom_quantity_fields_css(){?><風格>.quantity input::-webkit-outer-spin-button,.quantity input::-webkit-inner-spin-button {顯示:無；邊距:0；}.數量輸入.數量{外觀:文本框；-webkit 外觀:無；-moz 外觀:文本字段；}</風格><?php}add_action('wp_footer', 'custom_quantity_fields_script');函數 custom_quantity_fields_script(){?><script type='text/javascript'>jQuery( 函數( $ ) {如果(！String.prototype.getDecimals){String.prototype.getDecimals = function() {var num = 這個，match = ('' + num).match(/(?:.(d+))?(?:[eE]([+-]?d+))?$/);如果(！匹配){返回0；}return Math.max( 0, ( match[1] ? match[1].length : 0 ) - ( match[2] ? +match[2] : 0 ) );}}//數量加"和減"按鈕$( document.body ).on( 'click', '.plus, .minus', function() {var $qty = $( this ).closest( '.quantity' ).find( '.qty'),currentVal = parseFloat( $qty.val() ),max = parseFloat( $qty.attr( 'max' ) ),min = parseFloat( $qty.attr( 'min' ) ),step = $qty.attr('step');//格式化值if ( !currentVal || currentVal === '' || currentVal === 'NaN' ) currentVal = 0;if ( max === '' || max === 'NaN' ) max = '';if ( min === '' || min === 'NaN' ) min = 0;if ( step === 'any' || step === '' || step === undefined || parseFloat( step ) === 'NaN' ) step = 1;//改變值if ( $( this ).is( '.plus' ) ) {if ( max && ( currentVal >= max ) ) {$qty.val(max);} 別的 {$qty.val(( currentVal + parseFloat( step )).toFixed( step.getDecimals() ) );}} 別的 {if ( min && ( currentVal <= min ) ) {$qty.val(min);} else if ( currentVal > 0 ) {$qty.val((currentVal-parseFloat(step)).toFixed(step.getDecimals()));}}//觸發變化事件$qty.trigger('改變');});});<?php}

代碼位于活動子主題(或活動主題)的 function.php 文件中.經測試有效.

數量按鈕加號"和減號"工作正常并以這種方式顯示:

將正確數量的產品添加到購物車:

如果您使用加號和減號按鈕更改數量字段值，則任何數量字段更改時都會激活更新購物車"按鈕.

當您點擊更新購物車"時，數量會正確更新.

I’m building custom WordPress and WooCommerce theme and adding custom plus and minus buttons to Product page quantity field. The buttons do update quantity input's value and I also receive "Item has been added to your cart" notification (on Product page) when I submit Add to Cart. But the cart page doesn’t show any items, neither says the cart is empty.

I can not work out which WooCommerce JS function I’m suppose to hook into, neither how to hook into it. Could I ask for help please?! Thanks in advance!

My HTML layout:

<div class="quantity">
    <label class="quantity__label" for="<?php echo esc_attr( $input_id ); ?>"><?php esc_html_e( 'Quantity:', 'woocommerce' ); ?></label>
    <div class="quantity__wrapper">
        <input type="button" value="-" class="quantity__button quantity__remove js-qty-remove" />
        <input
            type="text"
            id="<?php echo esc_attr( $input_id ); ?>"
            class="input-text qty text quantity__input"
            step="<?php echo esc_attr( $step ); ?>"
            min="<?php echo esc_attr( $min_value ); ?>"
            max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>"
            name="<?php echo esc_attr( $input_name ); ?>"
            value="<?php echo esc_attr( $input_value ); ?>"
            title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ); ?>"
            size="4"
            pattern="<?php echo esc_attr( $pattern ); ?>"
            inputmode="<?php echo esc_attr( $inputmode ); ?>"
            aria-labelledby="<?php echo esc_attr( $labelledby ); ?>" />
        <input type="button" value="+" class="quantity__button quantity__add js-qty-add" />
    </div>
</div>

My custom jQuery function:

function quantityButtons() {
    var $qtyAdd = $('.js-qty-add'),
        $qtyRemove = $('.js-qty-remove'),
        $qtyInput = $('.quantity__input');

    $qtyAdd.on('click', addQty);
    $qtyRemove.on('click', removeQty);

    function addQty() {
        var $qtyInput = $('.quantity__input'),
        $qtyRemove = $('.js-qty-remove'),
        $i = $qtyInput.val();

        $i++;
        $qtyRemove.attr("disabled", !$i);
        $qtyInput.val($i);
    }

    function removeQty() {
        var $qtyInput = $('.quantity__input'),
        $qtyRemove = $('.js-qty-remove'),
        $i = $qtyInput.val();

        if ($i >= 1) {
            $i--;
            $qtyInput.val($i);
        } else {
            $qtyRemove.attr("disabled", true);
        }
    }

    $qtyRemove.attr("disabled", !$qtyInput.val());
}

quantityButtons();

Your First code part is made from a customization of global/quantity-input.php Woocommerce template code…

So for testing, I have changed partially that global/quantity-input.php template code with the following (very near to your code):

?>
<div class="quantity">
    <label class="screen-reader-text" for="<?php echo esc_attr( $input_id ); ?>"><?php esc_html_e( 'Quantity', 'woocommerce' ); ?></label>
    <input type="button" value="-" class="qty_button minus" />
    <input
        type="number"
        id="<?php echo esc_attr( $input_id ); ?>"
        class="input-text qty text"
        step="<?php echo esc_attr( $step ); ?>"
        min="<?php echo esc_attr( $min_value ); ?>"
        max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>"
        name="<?php echo esc_attr( $input_name ); ?>"
        value="<?php echo esc_attr( $input_value ); ?>"
        title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ); ?>"
        size="4"
        pattern="<?php echo esc_attr( $pattern ); ?>"
        inputmode="<?php echo esc_attr( $inputmode ); ?>"
        aria-labelledby="<?php echo esc_attr( $labelledby ); ?>" />
    <input type="button" value="+" class="qty_button plus" />
</div>
<?php

Now the necessary CSS and revisited jQuery code functions:

// Minimum CSS to remove +/- default buttons on input field type number
add_action( 'wp_head' , 'custom_quantity_fields_css' );
function custom_quantity_fields_css(){
    ?>
    <style>
    .quantity input::-webkit-outer-spin-button,
    .quantity input::-webkit-inner-spin-button {
        display: none;
        margin: 0;
    }
    .quantity input.qty {
        appearance: textfield;
        -webkit-appearance: none;
        -moz-appearance: textfield;
    }
    </style>
    <?php
}


add_action( 'wp_footer' , 'custom_quantity_fields_script' );
function custom_quantity_fields_script(){
    ?>
    <script type='text/javascript'>
    jQuery( function( $ ) {
        if ( ! String.prototype.getDecimals ) {
            String.prototype.getDecimals = function() {
                var num = this,
                    match = ('' + num).match(/(?:.(d+))?(?:[eE]([+-]?d+))?$/);
                if ( ! match ) {
                    return 0;
                }
                return Math.max( 0, ( match[1] ? match[1].length : 0 ) - ( match[2] ? +match[2] : 0 ) );
            }
        }
        // Quantity "plus" and "minus" buttons
        $( document.body ).on( 'click', '.plus, .minus', function() {
            var $qty        = $( this ).closest( '.quantity' ).find( '.qty'),
                currentVal  = parseFloat( $qty.val() ),
                max         = parseFloat( $qty.attr( 'max' ) ),
                min         = parseFloat( $qty.attr( 'min' ) ),
                step        = $qty.attr( 'step' );

            // Format values
            if ( ! currentVal || currentVal === '' || currentVal === 'NaN' ) currentVal = 0;
            if ( max === '' || max === 'NaN' ) max = '';
            if ( min === '' || min === 'NaN' ) min = 0;
            if ( step === 'any' || step === '' || step === undefined || parseFloat( step ) === 'NaN' ) step = 1;

            // Change the value
            if ( $( this ).is( '.plus' ) ) {
                if ( max && ( currentVal >= max ) ) {
                    $qty.val( max );
                } else {
                    $qty.val( ( currentVal + parseFloat( step )).toFixed( step.getDecimals() ) );
                }
            } else {
                if ( min && ( currentVal <= min ) ) {
                    $qty.val( min );
                } else if ( currentVal > 0 ) {
                    $qty.val( ( currentVal - parseFloat( step )).toFixed( step.getDecimals() ) );
                }
            }

            // Trigger change event
            $qty.trigger( 'change' );
        });
    });
    </script>
    <?php
}

Code goes in function.php file of your active child theme (or active theme). Tested and works.

The quantity buttons "plus" and "minus" work perfectly and are displayed this way:

Products are added to cart with the correct quantity:

if you change the quantity field value with plus and minus buttons, the "Update cart" button is activated when any quantity field change.

When you click on "Update cart", the quantities as correctly updated.

這篇關于Woocommerce 3 中的自定義加減數量按鈕的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！