מדריך שדרוגים מקיף לאתרי איקומרס - כולל קודים להעתקה!

document.addEventListener('DOMContentLoaded', function () {
  function initQtyButtons() {
    document.querySelectorAll('.quantity').forEach(function (wrapper) {
      if (wrapper.querySelector('.plus') || wrapper.querySelector('.minus')) return;

      var input = wrapper.querySelector('input.qty');
      if (!input) return;

      var minus = document.createElement('button');
      minus.type = 'button';
      minus.className = 'minus';

      var plus = document.createElement('button');
      plus.type = 'button';
      plus.className = 'plus';

      wrapper.insertBefore(plus, input);  // פלוס לפני input (ימין ב-RTL)
wrapper.appendChild(minus);         // מינוס אחרי input (שמאל ב-RTL)

      minus.addEventListener('click', function () {
        var step = parseInt(input.step) || 1;
        var min  = parseInt(input.min)  || 0;
        var val  = parseInt(input.value) || 1;
        if (val - step >= min) {
          input.value = val - step;
          input.dispatchEvent(new Event('change', { bubbles: true }));
          input.dispatchEvent(new Event('input',  { bubbles: true }));
        }
      });

      plus.addEventListener('click', function () {
        var step = parseInt(input.step) || 1;
        var max  = parseInt(input.max);
        var val  = parseInt(input.value) || 0;
        if (isNaN(max) || val + step <= max) {
          input.value = val + step;
          input.dispatchEvent(new Event('change', { bubbles: true }));
          input.dispatchEvent(new Event('input',  { bubbles: true }));
        }
      });
    });
  }

  initQtyButtons();

  jQuery(document.body).on(
    'updated_cart_totals updated_wc_div wc_cart_button_updated cart_page_refreshed',
    function () {
      setTimeout(initQtyButtons, 100);
    }
  );
});

/*עיצוב הכפתורים*/
selector .quantity .minus,
selector .quantity .plus { 
    width: 1.5vw !important; /*רוחב הכפתור*/
    height: 1.5vw !important; /*גובה הכפתור*/
    padding: 0.4vw !important; /*שוליים פנימיים לכפתור*/
    background: none; /*צבע רקע כפתור*/
    border: none !important; /*מסגרת כפתור*/
    border-radius: 500px; /*עיגול פינות כפתור*/
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.25s !important;
    position: relative !important;
}

selector .quantity .minus::after {
    content: "";
    position: absolute;
    inset: 0.4vw; /*שוליים פנימיים אייקון*/
    background-color: var(--e-global-color-text); /*צבע אייקון מינוס*/
    -webkit-mask: url("/wp-content/uploads/2026/02/minus.svg") no-repeat center / contain; /*לינק אייקון מינוס*/
    mask: url("/wp-content/uploads/2026/02/minus.svg") no-repeat center / contain; /*לינק אייקון מינוס שוב*/
    transition: background-color 0.25s; 
}

selector .quantity .plus {
    margin-left: 0.2vw; /*ריווח שמאל כפתור פלוס*/
}

selector .quantity .plus::after {
    content: "";
    position: absolute;
    inset: 0.5vw !important; /*שוליים פנימיים אייקון*/
    background-color: var(--e-global-color-text); /*צבע רקע אייקון פלוס*/
    -webkit-mask: url("/wp-content/uploads/2026/02/plus-7.svg") no-repeat center / contain; /*לינק אייקון פלוס*/
    mask: url("/wp-content/uploads/2026/02/plus-7.svg") no-repeat center / contain; /*לינק אייקון פלוס*/
    transition: background-color 0.25s;
}

selector .quantity .minus:hover,
selector .quantity .plus:hover {
    background-color: var(--e-global-color-text) !important; /*צבע רקע אייקונים במעבר עכבר*/
}

selector .quantity .plus:hover::after,
selector .quantity .minus:hover::after {
    background-color: var(--e-global-color-secondary); /*צבע אייקון במעבר עכבר*/
}


/*התאמה למובייל*/ 
@media (max-width: 767px) {
    selector .quantity .minus,
    selector .quantity .plus {
        width: 20px !important; /*רוחב כפתור*/
        height: 20px !important; /*גובה כפתור*/
        padding: 5px !important; /*שוליים פנימיים כפתור*/
    }

    selector .quantity .minus::after {
        inset: 4px; /*שוליים פנימיים אייקון מינוס*/
    }

    selector .quantity .plus {
        margin-left: 2px; /*ריווח שמאל אייקון פלוס*/
    }

    selector .quantity .plus::after {
        inset: 5px !important; /*שוליים פנימיים אייקון פלוס*/
    }
}

/* ריווח שדות */
selector .woocommerce-billing-fields .form-row,
selector .woocommerce-shipping-fields .form-row,
selector .woocommerce-account-fields .form-row,
selector #order_comments_field {
    padding-right: calc(0vw / 2) !important;
    padding-left: calc(0vw / 2) !important;
    margin-bottom: 1vw !important; /*ריווח תחתון לשדה*/
    position: relative;
}

/* שמירה על placeholder שקוף – נחוץ לזיהוי :not(:placeholder-shown) */
selector .woocommerce-input-wrapper input::placeholder,
selector .woocommerce-input-wrapper textarea::placeholder {
    color: transparent !important;
}

/*ריפוד השדה */
selector .woocommerce-input-wrapper input,
selector .woocommerce-input-wrapper textarea,
selector .woocommerce-input-wrapper select {
    padding: 0.7vw 1vw !important; /*שוליים פנימיים לשדה*/
    background-clip: padding-box;
}


/* מצב ברירת מחדל של התווית */
selector .woocommerce-billing-fields .form-row label,
selector .woocommerce-shipping-fields .form-row label,
selector .woocommerce-account-fields .form-row label,
selector #order_comments_field label {
    position: absolute !important;
    right: 1vw; /*ריווח מקצה השדה מימין*/
    top: 1.2vw !important; /*ריווח מקצה השדה למעלה*/
    font-family: var(--e-global-typography-f7e19d8-font-family), Sans-serif; /*פונט התווית*/
    font-size: var(--e-global-typography-f7e19d8-font-size); /*גודל פונט התווית*/
    font-weight: var(--e-global-typography-f7e19d8-font-weight); /*משקל פונט התווית*/
    color: var(--e-global-color-text); /*צבע התווית*/
    display: inline-block;
    pointer-events: none;
    background: transparent;
    padding: 0 0.25vw;
    transition: all 0.2s ease;
    border-radius: 500px; /*עיגול פינות תווית*/
    z-index: 2;
    margin: 0 !important;
    line-height: 1;
}

/* כשהשדה בפוקוס או מכיל תוכן – התווית "צפה" */
selector .woocommerce-billing-fields .form-row:focus-within label,
selector .woocommerce-shipping-fields .form-row:focus-within label,
selector .woocommerce-account-fields .form-row:focus-within label,
selector #order_comments_field:focus-within label, selector .woocommerce-billing-fields .form-row:has(input:not(:placeholder-shown)) label,
selector .woocommerce-billing-fields .form-row:has(textarea:not(:placeholder-shown)) label,
selector .woocommerce-shipping-fields .form-row:has(input:not(:placeholder-shown)) label,
selector .woocommerce-shipping-fields .form-row:has(textarea:not(:placeholder-shown)) label,
selector .woocommerce-account-fields .form-row:has(input:not(:placeholder-shown)) label,
selector #order_comments_field:has(textarea:not(:placeholder-shown)) label {
    top: -1vw !important;
    /*ריווח מקצה השדה למעלה*/
    right: 1vw !important;  /*ריווח מקצה השדה מימין*/
    font-size: 0.9vw; /*גודל פונט תווית צפה*/
    font-weight: var(--e-global-typography-f7e19d8-font-weight); /*משקל פונט תווית צבע*/
    background:var(--e-global-color-secondary) !important; /*צבע רקע תווית צפה*/
    color:  var(--e-global-color-text); /*צבע טקסט תווית צפה*/
    padding: 0.5vw 0.5vw 0.5vw 0.5vw !important; /*שוליים פנימיים תווית צפה*/
    border-radius: 500px; /*עיגול פינות תויית צפה*/
}

selector .woocommerce-mini-cart__empty-message::before {
  content: "";
  display: block;
width:3vw; /*רוחב האייקון*/
height: 4vw; /*גובה האייקון*/
margin-bottom:1vw; /*רווח בין טקטס לאייקון*/
background-color: currentColor; /*צבע האייקון, מושך מצבע הטקטס*/
  -webkit-mask-image: url("https://precise.jetdomains.co.il/wp-content/uploads/2026/01/add-to-cart.svg"); /*לינק לקובץ האייקון*/
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("https://precise.jetdomains.co.il/wp-content/uploads/2026/01/add-to-cart.svg"); /*לינק לקובץ האייקון*/
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

selector .woocommerce-mini-cart__empty-message{
    display: flex; /*יישור האייקון והטקסט אחד מעל השני ממורכז*/
    flex-direction: column;
    align-items: center;
    height: inherit;
    justify-content: center;
}

/*התאמה למובייל*/
@media(max-width:767px){
selector .woocommerce-mini-cart__empty-message::before {
width:3vw; /*רוחב האייקון*/
height: 4vw; /*גובה האייקון*/
}
}

add_action('wp_footer', 'add_empty_cart_button');
function add_empty_cart_button() {
    $shop_url = get_permalink(wc_get_page_id('shop'));
    ?>
    <script>
    jQuery(function($) {
        function addShopButton() {
            var $empty = $('.woocommerce-mini-cart__empty-message');
            if ($empty.length && !$empty.find('.go-to-shop-btn').length) {
                $empty.append('<a href="<?php echo esc_url($shop_url); ?>" class="go-to-shop-btn">לחנות ←</a>');
            }
        }
        setTimeout(addShopButton, 400);
        $(document).on('click', '.elementor-menu-cart__toggle', function() { setTimeout(addShopButton, 500); });
    });
    </script>
    <?php
}

selector .go-to-shop-btn {
    display: block;
    margin-top: 1.5vw; /*ריווח כפתור לטקטס*/
    padding: 0.6vw 2vw; /*שוליים פנימיים כפתור*/
    background-color: var(--e-global-color-primary); /*צבע רקע כפתור*/
    color: var(--e-global-color-text); /*צבע טקסט כפתור*/
    border-radius: 500px; /*עיגול פינות כפתור*/
    text-align: center; /*יישור טקסט כפתור למרכז*/
    font-family: var(--e-global-typography-accent-font-family), Sans-serif; /*פונט טקטס כפתור*/
    font-size: var(--e-global-typography-accent-font-size); /*גודל פונט טקסט כפתור*/
    font-weight: var(--e-global-typography-accent-font-weight); /*משקל פונט טקסט כפתור*/
    transition: all 0.2s;
}

/*הגדרות מעבר עכבר*/
selector .go-to-shop-btn:hover{
     background-color: var(--e-global-color-text); /*צבע רקע כפתור*/  
    color: var(--e-global-color-secondary); /*צבע טקסט כפתור*/
}

/*התאמה למובייל*/
@media(max-width:767px){
 selector .woocommerce-mini-cart__empty-message::before {
width:30px; /*רוחב האייקון*/
height: 40px; /*גובה האייקון*/
margin-bottom:10px; /*רווח בין טקטס לאייקון*/   
}

selector .go-to-shop-btn {
    display: block;
    margin-top: 15px; /*ריווח כפתור לטקטס*/
    padding: 5px 20px; /*שוליים פנימיים כפתור*/
}
}

selector .elementor-menu-cart__product-remove:after, .elementor-menu-cart__product-remove:before{
top:0vw; /*ייישור האייקון לקצה עליון*/   
}

selector .elementor-menu-cart__product-remove::after {
display: none; /*הסתרת האייקון המקורי*/
}

selector .elementor-menu-cart__product-remove {
  width: 2vw; /*רוחב פריים אייקוו*/
  height: 5vw; /*גובה פריים אייקון*/
  border:none; /* ביטול קו מסגרת אייקון*/
  border-radius: 0px; /*ביטול עיגול פינות מסגרת אייקון*/
}

selector .elementor-menu-cart__product-remove::before {
  content: "";
  position: absolute;
  width: 1.5vw; /*רוחב אייקון הסרה*/
  height: 2.5vw; /*גובה אייקון הסרה*/
  background-color: #EC3E46;
  -webkit-mask: url("https://precise.jetdomains.co.il/wp-content/uploads/2026/01/trash.svg") /*לינק לקובץ האייקון במדיה*/
    no-repeat center / contain;
  mask: url("https://precise.jetdomains.co.il/wp-content/uploads/2026/01/trash.svg") /*לינק שוב לקובץ האייקון במדיה*/
    no-repeat center / contain;
    transform: rotate(0deg);
    margin-top:0vw;
}

selector .elementor-menu-cart__product-remove:hover::before{
    background-color:  var(--e-global-color-primary); /*צבע אייקון הסרה במעבר עכבר*/
}

/*התאמה למובייל*/
@media(max-width:767px){
selector .elementor-menu-cart__product-remove {
  width: 20px; /*רוחב פריים אייקוו*/
  height: 50px; /*גובה פריים אייקון*/
  }
 
 selector .elementor-menu-cart__product-remove::before {
  content: "";
  width: 15px; /*רוחב אייקון הסרה*/
  height: 25px; /*גובה אייקון הסרה*/
  }   
}