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

درباره نویسنده
رضا کیانوش

رضا کیانوش هستم مدیر ایران تمز، لیسانس فناوری اطلاعات و ارتباطات در گرایش کاربردهای ict دارم. حدود 7 سالی هست که با وردپرس آشنا شدم و خدمات طراحی قالب وردپرس، سئو و بهینه سازی سایت رو انجام میدم. ایران تمز رو برای ارائه آموزشهای تخصصی و انتشار پوسته های وردپرسی که طراحی میکنیم راه اندازی کردم. اگر نیاز به طراحی قالب وردپرس اختصاصی دارید ما در ایران تمز اینکار رو با بهترین کیفیت براتون انجام میدیم.

بازدیدکنندگان قبلی مشاهده مطالب زیر را به شما پیشنهاد کرده اند

دیدگاهی بنویسید.

بهتر است دیدگاه شما در ارتباط با همین مطلب باشد.