آموزش شخصی سازی دکمه تعداد محصول ووکامرس WooCommerce Quantity

در این مطلب از وبیت به بررسی یکی از موضوعاتی می‌پردازیم که ممکن است مشکل و دغدغه هر کدام از مدیران وب‌سایت‌های فروشگاهی باشد؛ یعنی شخصی سازی دکمه تعداد محصول ووکامرس.

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

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

شخصی سازی دکمه تعداد محصول ووکامرس با استفاده از کد

برای شخصی سازی دکمه تعداد محصول نیاز دارید که فایل quantity-input.php را ویرایش کنید. این فایل در دو مسیر زیر وجود دارد:

در افزونه ووکامرس: wp-content/plugins/woocommerce/templates/global/quantity-input.php

در قالب وردپرس سازگار با ووکامرس: wp-content/themes/YOUR_THEME_NAME/woocommerce/global/quantity-input.php

در صورتی که فروشگاه خود را با امکانات پیش‌فرض ووکامرس راه‌اندازی کرده‌اید و پوشه woocommerce در قالب وردپرس شما وجود ندارد، از مسیر اول به دنبال فایل مورد نیاز بگردید و آن را ویرایش کنید. اما اگر پوشه woocommerce وجود دارد، از مسیر دوم استفاده کنید.

فایل quantity-input را از مسیر افزونه به مسیر پوسته انتفال دهید. برای این منظور پوشه templates افزونه ووکامرس را کپی کرده و در فولدر قالب وردپرس خود جایگذاری کنید؛ سپس نام آن را به woocommerce تغییر دهید.

وارد پوشه global شده و فایل quantity-input.php که در آن وجود دارد را ویرایش کنید. در نهایت سایر فایل‌های درون پوشه woocommerce و global را حذف کنید.

با این کار پس از به‌روزرسانی ووکامرس هم تغییرات اعمال شده شما در پوشه قالب‌تان باقی خواهند ماند.

حالا باید به افزودن کدهای مورد نیاز برای این کار بپردازید.

کدهای 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 امکان شخصی سازی دکمه تعداد محصول ووکامرس را فراهم کرده بود که متاسفانه از دسترس خارج شد. اما شما می‌توانید با استفاده از کدهای بالا، تغییرات مورد نظرتان را بر روی این قسمت از فروشگاه ووکامرسی خود اعمال نموده و به بهبود تجربه کاربری آن کمک کنید.

افزونه دیگری در حال حاظر قابل دانلود است که “SMNTCS Quantity Increment Buttons for WooCommerce” نام دارد، که شما می توانید با استفاده از این افزونه دکمه تعداد محصول ووکامرس را شخصی سازی کنید.

امیدواریم این آموزش برای شما مفید بوده باشد.

در صورت بروز هرگونه مشکل یا سوال، آن را از طریق بخش نظرات همین پست با ما در میان بگذارید.

با آموزش‌های بیشتر همراه وبیت باشید.