شخصی سازی دکمه تعداد محصول ووکامرس 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 رسیدیم چنانچه سوالی دارید در بخش دیدگاه های همین مقاله مطرح کنید. همچنین پیشنهاد میکنم برای یادگیری بیشتر آموزش وردپرس و آموزش ساخت سایت را مشاهده کنید.

4.6/5 - (11 امتیاز)
بازدیدکنندگانی که این مطلب را مطالعه کرده اند، از مطالب زیر نیز استقبال کرده اند
دیدگاهی بنویسید
9

  1. امیر
    18 شهریور 1399 ساعت 22:36

    سلام خسته نباشید.
    من همه این کار هایی که برای اضافه کردن المان ((تعداد)) گفته بودین انجام دادم اما موقع خرید وقتی تعداد کالا را 2 یا 3 یا هر عددی به غیر از 1 وارد میکنم ارور میده !!!!
    باید چیکار کنم؟
    کجا رو اشتباهی رفتم؟؟

  2. امین
    20 فروردین 1399 ساعت 12:20

    ممنونم، مطلب خوبی بود! اینکه کدهای مربوط رو هم میزارین خیلی خوبه! امیدوارم موفق باشید

  3. میلاد سروقد مقدم
    1 فروردین 1399 ساعت 09:13

    باسلام
    وقتی کاربر روی دکمه افزایش محصول کلیک کرد فرم باز بشه
    اگر دوتا کلیک کرده دوتا فرم
    و همینجوری تا اخر

    با گراویتی فرم هم انجام دادم حقیقتا نتوسنتم یا شاید بنده بلد نیستم
    ممنون میشم راهنمایی بفرمایید

    • پدرام تبریزی
      11 فروردین 1399 ساعت 20:51

      سلام وقت بخیر، افزونه ای که این قابلیت را به صورت دقیق داشته باشد نمی‌شناسم.

  4. پرستو
    10 دی 1398 ساعت 22:36

    سلام وقتتون بخیر .من میخام تو قسمت فروش ویژه همکار سایتم تعداد محصول تو سبد خرید از ۵تا شروع بشه.یعنی همکار وقتی پنج تا محصول به بالا خرید کنه تخفیف بهش تعلق بگیره .میشه بهم کمک کنید چی کار کنم؟

    • پدرام تبریزی
      11 دی 1398 ساعت 11:29

      سلام وقت بخیر
      در افزونه edd می توانید در بخش کد تخفیف از گذینه “کمترین مقدار” استفاده کنید و کمترین مقداری که باید خریداری شود تا این کد تخفیف کار کند در کادر بنویسید اگر خالی بگذارید هیچ محدودیتی ایجاد نمی کند.
      تشکر از همراهی شما

  5. حمید
    25 مرداد 1398 ساعت 21:54

    سلام من ااین افزونه رو خیلی لازم دارم ولی پیدا نمیکنم جایی، چیکار کنم لطفاً کمکم کنید

  6. وحید
    1 آبان 1397 ساعت 14:07

    با سلام و احترم
    یک سوال ازخدمت شما داشتم ممنون می شوم در صورت امکان به سوال بنده پاسخ بدهید
    در برخی از سایتها وقتی وارد صفحه محصول می شوم دکمه خرید با همراه متن بالا و پایین می شود یعنی انگار چسبیده است آیا شمامی دانید از چه افزونه ای استفاده می کنند
    با تشکر

    • رضا کیانوش
      1 آبان 1397 ساعت 15:44

      سلام وقت بخیر، در 99 درصد سایتهایی که لینک خرید محصول اسکرول میخوره و تا انتهای باکس توضیحات کالا میاد، این قابلیت رو در هنگام طراحی قالب وردپرس توسط کدنویسی ایجاد کردن و افزونه نیست.