Pridanie vlastných tlačidiel plus a mínus do WooCommerce

Tento snippet pridáva vlastné tlačidlá plus a mínus vedľa množstevného vstupného poľa na produktovej stránke WooCommerce. Štýly tlačidiel sú prispôsobené tak, aby boli čierne s bielymi znakmi a majú ostré rohy bez zaoblenia. Okrem toho sú predvolené šípky množstevného vstupu skryté a tlačidlo "Pridať do košíka" je odsadené od tlačidla plus pre lepšiu vizuálnu prezentáciu. Skript je optimalizovaný pre hladkú zmenu hodnôt množstva bez prechodu cez minimálne a maximálne limity.

Použitie:

  • Pridajte tento kód do súboru functions.php vašej WordPress témy.
  • Upravte štýly a funkcionalitu podľa vašich potrieb.

Tento snippet poskytuje vylepšený užívateľský zážitok na produktových stránkach a umožňuje jednoduché a intuitívne nastavenie množstva produktov pred pridaním do košíka.

				
					// Pridanie tlačidiel + a -
add_action('woocommerce_after_add_to_cart_quantity', 'prosimsi_quantity_plus_sign');
function prosimsi_quantity_plus_sign() {
    echo '<button type="button" class="qty-button plus">+</button>';
}

add_action('woocommerce_before_add_to_cart_quantity', 'prosimsi_quantity_minus_sign');
function prosimsi_quantity_minus_sign() {
    echo '<button type="button" class="qty-button minus">-</button>';
}

// Pridanie JavaScript a CSS do päty stránky
add_action('wp_footer', 'prosimsi_quantity_plus_minus');
function prosimsi_quantity_plus_minus() {
    if (!is_product()) return;
    ?&gt;
    
        /* Skrytie predvolených šípok */
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        input[type="number"] {
            -moz-appearance: textfield;
        }

        .qty-button {
            background-color: #000;
            border: 1px solid #000;
            color: #fff;
            padding: 10px 15px;
            cursor: pointer;
            transition: background-color 0.3s ease, color 0.3s ease;
            font-size: 16px;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0px; /* Odstránenie zaoblených rohov */
        }

        .qty-button:hover {
            background-color: #444;
        }

        .quantity {
            display: flex;
            align-items: center;
        }

        .quantity input.qty {
            text-align: center;
            margin: 0;
            height: 46px; /* Zladenie výšky input poľa s tlačidlami */
            border: 1px solid #000; /* Pridanie okraja pre zladenie s tlačidlami */
            border-left: none; /* Skrytie ľavého okraja */
            border-right: none; /* Skrytie pravého okraja */
        }

        .qty-button.plus {
            margin-left: -1px; /* Odstránenie medzery medzi input a + */
        }

        .qty-button.minus {
            margin-right: -1px; /* Odstránenie medzery medzi input a - */
        }

        /* Odsadenie tlačidla "Pridať do košíka" */
        .single_add_to_cart_button {
            margin-left: 25px; /* Pridanie odsadenia */
        }
    
    
        jQuery(document).ready(function($) {
            $('form.cart').on('click', '.qty-button.plus, .qty-button.minus', function() {
                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'));

                if ($(this).hasClass('plus')) {
                    if (!isNaN(max) &amp;&amp; val &gt;= max) {
                        $qty.val(max);
                    } else {
                        $qty.val(val + step);
                    }
                } else if ($(this).hasClass('minus')) {
                    if (!isNaN(min) &amp;&amp; val  1) {
                        $qty.val(val - step);
                    }
                }
            });
        });
    
    &lt;?php
}

				
			
Autor: Ladislav Dubravský
Cena: Zadarmo
Dátum publikácie: 17 júna, 2024

Potrebujete kód na mieru?

Neváhajte ma kontaktovať. Som tu pre vás, aby som odpovedal na vaše otázky a začal spolupracovať na vašom projekte.