شخصی سازی دکمه تعداد محصول ووکامرس WooCommerce Quantity
در این آموزش نحوه شخصی سازی دکمه تعداد محصول ووکامرس برای استفاده از دکمه های مثبت و منفی یا جهت های بالا و پایین برای افزایش یا کاهش تعداد محصول در کنار دکمه سبد خرید میپردازیم. در اکثر فروشگاه های اینترنتی وقتی به برگه توضیحات و خرید محصول مراجعه میکنید کنار لینک خرید محصول فیلدی قرار دارد که امکان افزایش یا کاهش تعداد کالا را فراهم میکند. در ووکامرس به این فیلد WooCommerce Quantity گفته میشود، در این آموزش قصد تغییر دکمه انتخاب تعداد محصول به شکل مثبت و منفی ( + و – ) بجای دکمه های پیشفرض بالا و پایین را داریم پس تا انتها همراه ما باشید.
کد شخصی سازی دکمه تعداد محصول ووکامرس
اگر در حال طراحی قالب وردپرس فروشگاهی هستید بهترین کار استفاده از کد است.
برای این منظور باید فایل quantity-input.php را ویرایش کنیم، این فایل در دو مسیر زیر در دسترسی است.
افزونه ووکامرس : wp-content/plugins/woocommerce/templates/global/quantity-input.php
قالب وردپرس سازگار با ووکامرس : wp-content/themes/theme_name/woocommerce/global/quantity-input.php
اگر فروشگاه تان را با امکانات پیشفرض ووکامرس راه اندازی کرده اید طوریکه هیچ پوشه ای با نام woocommerce در قالب وردپرس تان وجود ندارد باید فایل quantity-input را از مسیر اول ویرایش کنید. اما اگر پوشه ووکامرس در پوسته وردپرس تان وجود دارد از مسیر دوم برای رسیدن به آن استفاده کنید. بهترین کار انتقال فایل quantity-input از مسیر افزونه به مسیر پوسته است برای اینکار پوشه templates افزونه ووکامرس را کپی کرده و در پوشه قالب وردپرس تان قرار دهید سپس نام انرا به woocommerce تغییر دهید. پوشه global را باز کرده و فایل quantity-input.php موجود در آنرا ویرایش کنید در نهایت بقیه فایلهای پوشه woocommerce و global را حذف کنید. با اینکار پس از بروزرسانی وردپرس تغییرات اعمال شده حفظ خواهند شد.
آموزش ویرایش فایل Quantity تعداد محصول ووکامرس
ابتدا کدهای css زیر را در فایل استایل قالب وردپرس style.css کپی کنید.
input[type="number"]{-moz-appearance:textfield;} .minus{border:none;color:#fff;background-color:purple;height:30px;width:30px;} .plus{border:none;color:#fff;background-color:purple;height:30px;width:30px;} .qty{border:1px solid purple;color:purple;height:30px;}
سپس تمام کدهای موجود در فایل quantity-input.php را حذف کرده و کدهای زیر را جایگزین آن کنید.
<?php if(!defined('ABSPATH')){ exit; } ?> <div class="quantity"> <input class="minus" type="button" value="-"> <input type="number" step="<?php echo esc_attr( $step ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( $max_value ); ?>" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" class="input-text qty text" size="4" /> <input class="plus" type="button" value="+"> </div> <script> jQuery(document).ready(function($){ $('.quantity').on('click','.plus',function(e){ $input=$(this).prev('input.qty');var val = parseInt($input.val()); $input.val( val+1 ).change();}); $('.quantity').on('click','.minus',function(e) { $input=$(this).next('input.qty');var val = parseInt($input.val()); if(val > 0){$input.val( val-1 ).change();} }); }); </script>
اکنون با مراجعه به توضیحات محصول یا سبد خرید ووکامرس شاهد دکمه های + و – بجای فلشهای پیشفرض فیلد خواهید بود.
برای تغییر دکمه های + و – هم میتوانید دستورات css را ویرایش کنید.
افزونه شخصی سازی تعداد محصول ووکامرس
روش دیگر نصب و فعال کردن افزونه WooCommerce Quantity Increment میباشد.
در این روش تنها باید افزونه را نصب و فعال کنید و نیاز به کار دیگری نیست! اما اگر با مشکل روبرو شدید باید قطعه کدی که در برگه معرفی افزونه قرار داده شده را به فایل فانکشن functions.php قالب وردپرس تان اضافه کنید. (در بیشتر پوسته های استاندارد نیازی به قطعه کد نیست.)
پیش از این در مقاله ای با عنوان افزونه مقایسه محصولات ووکامرس + افزودن کالا به لیست علاقه مندی woocommerce دو افزونه کاربردی را معرفی کرده ایم که پیشنهاد میکنیم حتما از آنها در فروشگاه تان استفاده کنید.
به پایان آموزش شخصی سازی دکمه تعداد محصول ووکامرس WooCommerce Quantity رسیدیم چنانچه سوالی دارید در بخش دیدگاه های همین مقاله مطرح کنید. همچنین پیشنهاد میکنم برای یادگیری بیشتر آموزش وردپرس و آموزش ساخت سایت را مشاهده کنید.
سلام خسته نباشید.
من همه این کار هایی که برای اضافه کردن المان ((تعداد)) گفته بودین انجام دادم اما موقع خرید وقتی تعداد کالا را 2 یا 3 یا هر عددی به غیر از 1 وارد میکنم ارور میده !!!!
باید چیکار کنم؟
کجا رو اشتباهی رفتم؟؟
ممنونم، مطلب خوبی بود! اینکه کدهای مربوط رو هم میزارین خیلی خوبه! امیدوارم موفق باشید
باسلام
وقتی کاربر روی دکمه افزایش محصول کلیک کرد فرم باز بشه
اگر دوتا کلیک کرده دوتا فرم
و همینجوری تا اخر
با گراویتی فرم هم انجام دادم حقیقتا نتوسنتم یا شاید بنده بلد نیستم
ممنون میشم راهنمایی بفرمایید
سلام وقت بخیر، افزونه ای که این قابلیت را به صورت دقیق داشته باشد نمیشناسم.
سلام وقتتون بخیر .من میخام تو قسمت فروش ویژه همکار سایتم تعداد محصول تو سبد خرید از ۵تا شروع بشه.یعنی همکار وقتی پنج تا محصول به بالا خرید کنه تخفیف بهش تعلق بگیره .میشه بهم کمک کنید چی کار کنم؟
سلام وقت بخیر
در افزونه edd می توانید در بخش کد تخفیف از گذینه “کمترین مقدار” استفاده کنید و کمترین مقداری که باید خریداری شود تا این کد تخفیف کار کند در کادر بنویسید اگر خالی بگذارید هیچ محدودیتی ایجاد نمی کند.
تشکر از همراهی شما
سلام من ااین افزونه رو خیلی لازم دارم ولی پیدا نمیکنم جایی، چیکار کنم لطفاً کمکم کنید
با سلام و احترم
یک سوال ازخدمت شما داشتم ممنون می شوم در صورت امکان به سوال بنده پاسخ بدهید
در برخی از سایتها وقتی وارد صفحه محصول می شوم دکمه خرید با همراه متن بالا و پایین می شود یعنی انگار چسبیده است آیا شمامی دانید از چه افزونه ای استفاده می کنند
با تشکر
سلام وقت بخیر، در 99 درصد سایتهایی که لینک خرید محصول اسکرول میخوره و تا انتهای باکس توضیحات کالا میاد، این قابلیت رو در هنگام طراحی قالب وردپرس توسط کدنویسی ایجاد کردن و افزونه نیست.