Custom plus and minus quantity buttons in Woocommerce 3

Bài viết này thực hiện (hoặc lụm bài về đăng câu like từ các trang khác) bởi Việt Lâm Coder một YOUTUBER có tâm và đẹp trai siêu cấp vô địch zũ trụ.

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):

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

?>

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

</div>

<?php

Now the necessary CSS and revisited jQuery code functions:

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


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

            <span class="com">// Format values</span>
            <span class="kwd">if</span> <span class="pun">(</span> <span class="pun">!</span><span class="pln"> currentVal </span><span class="pun">||</span><span class="pln"> currentVal </span><span class="pun">===</span> <span class="str">''</span> <span class="pun">||</span><span class="pln"> currentVal </span><span class="pun">===</span> <span class="str">'NaN'</span> <span class="pun">)</span><span class="pln"> currentVal </span><span class="pun">=</span> <span class="lit">0</span><span class="pun">;</span>
            <span class="kwd">if</span> <span class="pun">(</span><span class="pln"> max </span><span class="pun">===</span> <span class="str">''</span> <span class="pun">||</span><span class="pln"> max </span><span class="pun">===</span> <span class="str">'NaN'</span> <span class="pun">)</span><span class="pln"> max </span><span class="pun">=</span> <span class="str">''</span><span class="pun">;</span>
            <span class="kwd">if</span> <span class="pun">(</span><span class="pln"> min </span><span class="pun">===</span> <span class="str">''</span> <span class="pun">||</span><span class="pln"> min </span><span class="pun">===</span> <span class="str">'NaN'</span> <span class="pun">)</span><span class="pln"> min </span><span class="pun">=</span> <span class="lit">0</span><span class="pun">;</span>
            <span class="kwd">if</span> <span class="pun">(</span><span class="pln"> step </span><span class="pun">===</span> <span class="str">'any'</span> <span class="pun">||</span><span class="pln"> step </span><span class="pun">===</span> <span class="str">''</span> <span class="pun">||</span><span class="pln"> step </span><span class="pun">===</span> <span class="kwd">undefined</span> <span class="pun">||</span><span class="pln"> parseFloat</span><span class="pun">(</span><span class="pln"> step </span><span class="pun">)</span> <span class="pun">===</span> <span class="str">'NaN'</span> <span class="pun">)</span><span class="pln"> step </span><span class="pun">=</span> <span class="lit">1</span><span class="pun">;</span>

            <span class="com">// Change the value</span>
            <span class="kwd">if</span> <span class="pun">(</span><span class="pln"> $</span><span class="pun">(</span> <span class="kwd">this</span> <span class="pun">).</span><span class="kwd">is</span><span class="pun">(</span> <span class="str">'.plus'</span> <span class="pun">)</span> <span class="pun">)</span> <span class="pun">{</span>
                <span class="kwd">if</span> <span class="pun">(</span><span class="pln"> max </span><span class="pun">&&</span> <span class="pun">(</span><span class="pln"> currentVal </span><span class="pun">>=</span><span class="pln"> max </span><span class="pun">)</span> <span class="pun">)</span> <span class="pun">{</span><span class="pln">
                    $qty</span><span class="pun">.</span><span class="pln">val</span><span class="pun">(</span><span class="pln"> max </span><span class="pun">);</span>
                <span class="pun">}</span> <span class="kwd">else</span> <span class="pun">{</span><span class="pln">
                    $qty</span><span class="pun">.</span><span class="pln">val</span><span class="pun">(</span> <span class="pun">(</span><span class="pln"> currentVal </span><span class="pun">+</span><span class="pln"> parseFloat</span><span class="pun">(</span><span class="pln"> step </span><span class="pun">)).</span><span class="pln">toFixed</span><span class="pun">(</span><span class="pln"> step</span><span class="pun">.</span><span class="pln">getDecimals</span><span class="pun">()</span> <span class="pun">)</span> <span class="pun">);</span>
                <span class="pun">}</span>
            <span class="pun">}</span> <span class="kwd">else</span> <span class="pun">{</span>
                <span class="kwd">if</span> <span class="pun">(</span><span class="pln"> min </span><span class="pun">&&</span> <span class="pun">(</span><span class="pln"> currentVal </span><span class="pun"><=</span><span class="pln"> min </span><span class="pun">)</span> <span class="pun">)</span> <span class="pun">{</span><span class="pln">
                    $qty</span><span class="pun">.</span><span class="pln">val</span><span class="pun">(</span><span class="pln"> min </span><span class="pun">);</span>
                <span class="pun">}</span> <span class="kwd">else</span> <span class="kwd">if</span> <span class="pun">(</span><span class="pln"> currentVal </span><span class="pun">></span> <span class="lit">0</span> <span class="pun">)</span> <span class="pun">{</span><span class="pln">
                    $qty</span><span class="pun">.</span><span class="pln">val</span><span class="pun">(</span> <span class="pun">(</span><span class="pln"> currentVal </span><span class="pun">-</span><span class="pln"> parseFloat</span><span class="pun">(</span><span class="pln"> step </span><span class="pun">)).</span><span class="pln">toFixed</span><span class="pun">(</span><span class="pln"> step</span><span class="pun">.</span><span class="pln">getDecimals</span><span class="pun">()</span> <span class="pun">)</span> <span class="pun">);</span>
                <span class="pun">}</span>
            <span class="pun">}</span>

            <span class="com">// Trigger change event</span><span class="pln">
            $qty</span><span class="pun">.</span><span class="pln">trigger</span><span class="pun">(</span> <span class="str">'change'</span> <span class="pun">);</span>
        <span class="pun">});</span>
    <span class="pun">});</span>
    <span class="pun"></</span><span class="pln">script</span><span class="pun">></span>
    <span class="pun"><?</span><span class="pln">php
</span><span class="pun">}</span>

// 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(){

?>

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:

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

Site map

Facebook Fanpage