همانطور که می‌دانید به طور پیش‌فرض کاربر پس از تغییر تعداد محصولات موجود در سبد خرید ووکامرس، باید بر روی دکمه «به‌روزرسانی سبد خرید» کلیک کند تا سبد خرید به‌روزرسانی شود. ما در این مقاله به شما نحوه به‌روزرسانی خودکار سبد خرید با تغییر تعداد محصول را آموزش می‌دهیم.

به‌روزرسانی خودکار سبد خرید با تغییر تعداد محصول در ووکامرس
به‌روزرسانی سبد خرید با تغییر تعداد محصول به صورت خودکار در ووکامرس

در صورتی که می‌خواهید دکمه «به‌روزرسانی سبد خرید» را مخفی کنید و زمانی که کاربر تعداد هر محصول را تغییر داد، سبد خرید به طور خودکار به‌روزرسانی شود، کافی است مراحل زیر را به ترتیب انجام دهید.

بخش اوّل: مخفی‌کردن دکمه «به‌روزرسانی سبد خرید»

به منظور به‌روزرسانی خودکار سبد خرید با تغییر تعداد محصول، اوّلین چیزی که نیاز دارید، مخفی‌کردن دکمه «به‌روزرسانی سبد خرید» است. برای عدم نمایش این دکمه کافی است کدهای CSS زیر را در فایل style.css پوسته فرزند کپی کنید.

نکته: بهتر است کدها در پوسته فرزند قرار بگیرند. چون با به‌روزرسانی پوسته مادر، ممکن است تغییرات به حالت قبل برگردد.

input[name='update_cart'] {
display: none !important;
}
 
/* OR TRY THIS */
 
button[name='update_cart'] {
display: none !important;
}

بخش دوّم: به‌روزرسانی سبد خرید با تغییر تعداد محصول

با انجام مرحله اوّل دکمه پنهان شد، هم اکنون نیاز به کد جی کوئری دارید تا همان عملیاتی را که هنگام کلیک بر روی دکمه «به‌روزرسانی سبد خرید» انجام می‌دادید، به صورت خودکار انجام دهد. به منظور این کار، قطعه کد زیر به شما کمک خواهد کرد تا عملیات به‌روزرسانی به صورت خودکار انجام شود.

add_action( 'wp_footer', 'tidaweb_cart_refresh_update_qty' ); 
 
function tidaweb_cart_refresh_update_qty() {
   if (is_cart()) {
      ?>
      <script type="text/javascript">
         jQuery('div.woocommerce').on('click', 'input.qty', function(){
            jQuery("[name='update_cart']").trigger("click");
         });
      </script>
      <?php
   }
}

پس از انجام مراحل بالا، فرآیند آپدیت سبد خرید با تغییر تعداد محصول به صورت خودکار انجام خواهد شد. در صورتی که از سؤالی دارید، می‌توانید آن را از بخش دیدگاه‌ها با ما در میان بگذارید. همچنین اگر دنبال توابع کاربردی و ترفندهای وردپرس می‌گردید، ترفند وردپرس را مشاهده کنید.

نوشته مرتبط
ویرایش زبانه‌ها در برگه تک محصول ووکامرس

منبع: Business Bloomer

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *