برای اضافه کردن مثبت و منفی در دکمه افزودن به سبد خرید ووکامرس کافیه با چند خط کد بدون نصب افزونه های جانبی این کار را انجام دهید که در این آموزش دقیقا در این خصوص با شما صحبت خواهیم کرد پس تا انتها آموزش را دنبال کنید.
اضافه کردن دکمه + و – به مقدار دکمه افزودن به سبد خرید ووکامرس در چند قدم
به صورت پیش فرض تنظیماتی در ویجت های مخصوص به ووکامرس در المنتور وجود ندارد که بدون کدنویسی بتوانیم چنین تغییری در بخش مقدار دکمه افزودن به سبد خرید یا add to cart ایجاد کنیم. برای این کار به ایجاد تغییرات در فایل های اصلی ووکامرس و کمی کدنویسی css و جاوااسکریپت نیاز داریم.
قدم اول ویجت single add to cart
در این آموزش ما از ویجت single add to cart از افزونه جت ووبیلدر استفاده کردیم اما فرقی ندارد شما میتوانید از ویجت افزودن به سبد خرید موجود در المنتور پرو نیز استفاده کنید فقط باید حالت نمایش را روی inline قرار دهید که بخش مقدار یا quantity و دکمه افزودن به سبد خرید در یک خط و کنار یکدیگر قرار بگیرند.
قدم دوم ایجاد تغییرات در تنظیمات پیش فرض ووکامرس
برای ایجاد تغییرات در تنظیمات پیش فرض ووکامرس باید فایل های php مخصوص به همان بخش از ووکامرس را ویرایش کنید. هر یک از بخش های ووکامرس قالب مختص به خود را دارد. برای ویرایش بخش مقدار در کنار دکمه افزودن به سبد خرید باید از هاست وارد پوشه wp-content و پوشه plugins شوید. پوشه WooCommerce را باز کنید و از داخل زیر پوشه templates وارد زیر پوشه global بشید. فایلی که برای این آموزش نیاز به تغییر آن داریم فایل quantity-input.php می باشد.
قدم سوم اعمال تغییرات
پیش از اعمال تغییرات در این بخش حتما از سایت خود بکاپ بگیرید چون انجام تغییرات غیرقابل بازگشت هستند.
در قسمت های مشخص شده درکد دو تگ <div> یکی با کلاس class=”mn-btn minus-btn”
برای دکمه – و یکی با کلاس class=”mn-btn plus-btn” برای دکمه + ایجاد می کنیم. داخل این دو div باید تصویر مناسب برای علامت – و + قرار دهید.
در اینجا ما از فایل های svg استفاده کردیم. برای کپی کردن کد فایل های svg کافیست آن را در مرورگر کروم باز کنید و در بخش inspector مطابق تصویر زیر روی تگ svg کلیک راست کرده و گزینه copy element را بزنید. و بعد کد را بین تگ <div> باز و بسته در تصویر بالا قرار دهید.
تا اینجا کدهارو در فایل quantity-input.php ذخیره کنید و فایل را ببندید. حالا باید سبد خرید شما به صورت زیر باشد که در ادامه با کمک css استایل دهی میکنیم.
قدم چهارم درج CSS
برای استایل دادن به دکمه های – و + کد های css زیر را در بخش css سفارشی در ویجت add to cart داخل المنتور قرار دهید.
selector .quantity {
display: flex;
background: #fff;
border-radius: 12px;
box-shadow: -5px 5px 20px -10px #ccc;
padding: 5px;
margin-left:10px;
}
selector .quantity :is(.mn-btn, .input-text) {
padding: 0 !important;
display: flex;
justify-content: center;
align-items: center;
}
selector .mn-btn {
cursor: pointer;
flex: 30%;
}
selector .mn-btn:hover svg {
fill: #f00;
}
selector .quantity .input-text {
border: none;
font-family: "Peyda", Sans-Serif;
flex: 40%;
border-radius: 10px;
background: #fbfbfb;
-moz-appearance: textfield;
}
selector .quantity .input-text::-webkit-inner-spin-button {
-webkit-appearance: none;
}
selector .quantity .input-text:focus {
outline: none;
background: #f7f7f7;
}
.quantity {
width: 150px !important;
}
قدم پنجم درج Js
تا اینجای کار شکل و شمایل بخش مقدار باید درست شده باشد. اگر با توجه به طراحی نیاز به تغییراتی دارید میتوانید کدهای css داده شده را به دلخواه خود تغییر دهید. اما برای اینکه با کلیک روی دکمه مقدار سبد خرید کم و زیاد شود به کدنویسی جاوااسکریپت نیاز داریم. یک ویجت html در قالب صفحه تکی محصول در المنتور قرار دهید و کد زیر را داخل آن paste کنید.
<script>
document.addEventListener("DOMContentLoaded", ()=>{
const minusBtn = document.querySelector(".minus-btn");
const plusBtn = document.querySelector(".plus-btn");
const quantityInput = document.querySelector(".quantity .input-text");
const quantityMax = quantityInput.max ? quantityInput.max : null;
plusBtn.addEventListener("click", ()=>{
quantityInput.value++;
if (quantityMax && parseInt(quantityInput.value) > parseInt(quantityMax)) {
quantityInput.value = quantityMax;
}
return quantityInput.value;
})
minusBtn.addEventListener("click", ()=>{
quantityInput.value--;
if (quantityInput.value <= 1) {
quantityInput.value = 1;
}
return quantityInput.value;
})
quantityInput.addEventListener("change", ()=>{
if (parseInt(quantityInput.value) <= 0) {
alert("تعداد انتخابی نا معتبر است");
quantityInput.value = 1;
}
if (quantityMax && parseInt(quantityInput.value) > parseInt(quantityMax)) {
alert("تعداد انتخابی بیشتر از موجودی محصول است");
quantityInput.value = quantityMax;
}
})
})
</script>
بعد از ذخیره کار تمام است.
نکته اینکه کاربر تنها به اندازه موجودی محصول میتونه مقدار رو افزایش بده مثلا اگر موجودی 20 عدد باشد وقتی به عدد 20 رسید هر چقدر روی + کلیک بشه مقدار بیشتر نخواهدشد و همچنین کمتر از 1 هم نمیشه.
اضافه کردن مثبت و منفی در دکمه افزودن به سبد خرید ووکامرس با افزونه
اگر نیاز دارید با کمک افزونه این کار را انجام دهید بهترین انتخاب شما افزونه Quantity Plus Minus Button for WooCommerce می باشد که به راحتی میتوانید با افزونه بدون کدنویسی این قابلیت را در سایت ووکامرسی خودتان ایجاد نمایید.
