...

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.

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 }
Seraphinite AcceleratorOptimized by Seraphinite Accelerator
Turns on site high speed to be attractive for people and search engines.