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

ویرایش دکمه ی افزودن به سبد خرید در ووکامرس را یک بار برای همیشه در وردپرس یاد بگیرید

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

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

از کسی پنهان نیست که ظاهر هر فروشگاهی در میزان فروش آن فروشگاه تاثیر بسیار زیادی دارد. به نظر شما میزان فروش یک فروشگاه لوکس و زیبا با میزان فروش یک فروشگاه به هم ریخته متفاوت نیست؟ هنگامی که هر دو فروشگاه یک جنس معین را بفروشند، هر مشتری به صورت ذاتی فروشگاهی را انتخاب می کند که ظاهر زیباتری دارد. حال در زمینه ی کسب و کار شما شاید فروشگاه های مختلفی هم وجود داشته باشید اما یکی از راه هایی که می توانید از آن ها جلوتر باشید زیباسازی ظاهر فروشگاه خود در عین سادگی است. یکی از این زیبا سازی ها مربوط به دکمه ی افزودن به سبد خرید است.

دکمه ی افزودن به سبد خربد بی شک یکی از عوامل جذب کننده ی کاربران و مشتری های شما می باشد. حتی از لحاظ روانشناسی رنگ دلنشین این دکمه می تواند بر روی مشتری های شما تاثیرگذار باشد. به جرات می توان گفت در فروشگاه های حرفه ای یکی از عواملی که مدیران بیش از حد بر روی آن حساس هستند ظاهر و رنگ بندی فروشگاه های آن ها می باشد. همان طور که می دانید هر رنگ تیپ شخصیتی و ویژگی های مربوط به خود را دارد:

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

و اغلب رنگ ها هر کدام ویژگی های مربوط به خود را دارند.

به یاد داشته باشید که رنگ ها در ظاهر هر چیزی بسیار مهم هستند. در فروشگاه های آنلاین رنگ ها یک نقش بسیار اساسی را ایفا می کنند، شاید فونت و استایل هم مهم باشد اما نقشی که رنگ وب سایت در نظر کاربر ایجاد می کند بسیار تاثیرگذارتر است. ضمناً در استفاده ی بیش از حد از یک رنگ هم باید خودداری کرد.

بر اساس آن چه گفته شد می خواهیم دکمه ی افزودن به سبد خرید خود را تزیین کنیم.

شخصی سازی دکمه ی افزودن به خرید ووکامرس با افزونه Ultimate Custom Add To Cart Button

ابتدا این افزونه را برای وردپرس دانلود و نصب می کنیم.

دانلود و نصب افزونه Ultimate Custom Add To Cart Button

جهت یادگیری نحوه ی نصب افزونه ها در وردپرس به صفحه ی آموزش نصب افزونه در وردپرس مراجعه کنید.

با استفاده از یکی از دو راه زیر و آموزش لینک بالا می توانید این افزونه را نصب کنید.

در داشبورد وردپرس خود به صفحه ی افزونه ها / افزودن بروید و در باکس جستجو نام این افزونه را وارد کنید و پس از جستجو و پیدا کردن افزونه آن را نصب و فعال کنید.
با استفاده از لینک زیر افزونه را از مخزن وردپرس دانلود، نصب و فعال کنید

دانلود افزونه Ultimate Custom Add To Cart Button از مخزن وردپرس

پس از نصب افزونه یک منوی جدید به داشبورد وردپرس شما به نام Binary Carpenter ایجاد می شود.

ویژگی های افزونه ی Ultimate Custom Add To Cart Button

با استفاده از این افزونه می توانید شخصی سازی های زیر را انجام دهید.

شخصی سازی متن دکمه ی افزودن به سبد خرید در صفحه ی محصولات ساده
شخصی سازی متن دکمه در صفحه ی محصولات متغیر
شخصی سازی متن دکمه در صفحه ی گروهی محصولات
تغییر رنگ زمینه دکمه ی افزودن به سبد خرید
تغییر ویژگی border-radius یا خمیدگی خط اطراف دکمه
به صورت کامل ظاهر باکس انتخاب تعداد محصول برای اضافه شدن به محصول را تغییر دهید.
تغییر زمینه دکمه افزودن به سبد خرید هنگامی که ماوس بر روی آن می رود: on Hover background
شخصی سازی اندازه ی طول و ارتفاع دکمه
سازگاری با همه ی قالب های استاندارد وردپرس و ووکامرس
چند قالب آماده مانند فروشگاه های بزرگ مانند آمازون
و …

تنظیمات و استفاده از افزونه ی Ultimate Custom Add To Cart Button

در منوی افزونه بر روی گزینه ی Ultimate ATC Button کلیک کنید تا به صفحه ی زیر بروید، سپس بر روی قسمت موردنظر که به آن اشاره شده است و Configure Buttons نام دارد کلیک کنید تا به تنظیمات افزونه بروید:

تنظیمات متن و طول و ارتفاع دکمه ی افزودن به سبد خرید

در تنظیمات مربوط به موارد بالا که در عکس زیر می بینید می توانید متن موردنظر خود برای دکمه و طول و ارتفاع آن را مشخص کنید.

بخش A مربوط به تنظیمات متن دکمه ی افزودن به سبد خرید است که هر کدام برای متن این دکمه در صفحه های مختلفی است که نمایش داده می شود.
بخش B مربوط به تنظیمات عرض| width و ارتفاع | height دکمه ی افزودن به سبد خرید است.

تنظیمات اندازه ی متن و زمینه ی دکمه افزودن به سبد خرید

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

در تصویر زیر و در ادامه ی تنظیمات می توانید ویژگی های فاصله از اطراف و فاصله ی متن از حاشیه را مشخص کنید

با کمی تغییر و استایل با این افزونه ظاهر دکمه ی افزودن به سبد خرید را مانند زیر تغییر دادیم:

تغییر متن دکمه ی خرید با استفاده از کدنویسی

برای اینکه بدون استفاده از هیچ افزونه ای متن دکمه ی افزودن به سبد خرید را در صفحه ی هر محصول تغییر دهید کافی است کد زیر را در انتهای فایل functions.php اضافه کنید. به جای book now می توانید متن موردنظر خود را قرار دهید:

add_filter('woocommerce_product_single_add_to_cart_text', 'woo_custom_cart_button_text');
 
function woo_custom_cart_button_text() {
return __('Book Now', 'woocommerce');
}

add_filter('woocommerce_product_single_add_to_cart_text', 'woo_custom_cart_button_text');

function woo_custom_cart_button_text() {

return __('Book Now', 'woocommerce');

}

بعد از اضافه کردن کد بالا حتی با وجود تغییراتی که در افزونه ی بالا دادیم متن دکمه در صفحه ی تک محصول به صورت زیر تغییر داده شد:

تغییر متن دکمه ی افزودن به سبد خرید برای یک دسته ی خاص

با استفاده از کد زیر می توانیم در هر دسته ی خاص یک متن متفاوت برای دکمه ی افزودن به سبد خرید انتخاب کنیم. کافی است کد زیر را در فایل functions.php قرار دهید به جای category1 و category2 می توانید نام دسته های موردنظر خود را قرار دهید و به جای category1 Add cart و category2 add cart متن موردنظر خود را برای نمایش قرار دهید:

add_filter( 'woocommerce_product_add_to_cart_text', 'kanithemes_archive_custom_cart_button_text' );
 
function kanithemes_archive_custom_cart_button_text() {
	global $product;       
	if ( has_term( 'category1', 'category2', $product->ID ) ) {           
		return 'Category 1 Add Cart';
	} else {
		return 'Category 2 Buy Now';
	}
}