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.
PHP
// 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; ?> /* 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) && val >= max) { $qty.val(max); } else { $qty.val(val + step); } } else if ($(this).hasClass('minus')) { if (!isNaN(min) && val 1) { $qty.val(val - step); } } }); }); <?php }