شخصی سازی تعداد محصول ووکامرس 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 کپی کنید.

سپس تمام کدهای موجود در فایل quantity-input.php را حذف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 را ویرایش کنید.