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

دکمه افزودن به سبد خرید یکی از مهم ترین دکمه ها برای هر کسب و کار آنلاین است. این دکمه ای است که خریداران برای نشان دادن علاقه خود به خرید یک محصول آن را انتخاب می کنند و بهینه سازی آن می تواند تأثیر زیادی بر میزان فروش شما داشته باشد. بنابراین در این مقاله قصد داریم نحوه سفارشی کردن دکمه افزودن به سبد خرید در ووکامرس را به شما نشان دهیم.

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

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

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

برای مثال، اگر محصول یک  نوع محصول خارجی باشد (به عنوان مثال در سایت دیجی کالا به فروش می رسد)، دکمه خرید محصول به منبعی که به آن تعلق دارد، لینک خواهد داشت. در صورتی که یک محصول گزینه های متغیر داشته باشد به عنوان مثال رنگ، اندازه، سایز و … دکمه زیر آن نیز ممکن است متفاوت باشد. علاوه بر موقعیت‌های گفته شده، می‌توانید دکمه افزودن به سبد خرید را در صفحات دسته‌بندی، صفحات برچسب یا صفحه هایی که گروهی از محصولات مورد نظر مشتریان را نمایش می‌دهند، مشاهده کنید. اینکه این دکمه دقیقاً کجا نشان داده می‌شود، به قالب شما نیز بستگی دارد.

چرا باید دکمه افزودن به سبد خرید ووکامرس را سفارشی سازی کنید؟

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

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

از سوی دیگر، بسیاری دیگر از فروشگاه‌های تجارت الکترونیک، فرآیندهای خرید ساده‌تری دارند و ترجیح می‌دهند از مرحله «افزودن به سبد خرید» صرف نظر کرده و مشتریان را مستقیماً به صندوق فروش هدایت کنند. این به ویژه در فروشگاه های تک محصولی یا زمانی که از مشتری انتظار می رود یک محصول واحد خریداری کند، به خوبی کار می کند. اگرچه فرآیندهای خرید کوتاه‌ تر معمولاً بهتر عمل می‌کنند، به نوع محصولی که می‌فروشید بستگی دارد. هیچ رویکردی برای همه وجود ندارد.

پیشنهاد می کنیم حتما آموزش ساخت فروشگاه اینترنتی را مطالعه کنید.

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

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

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

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

بیایید با یک چیز ساده شروع کنیم و متن یک دکمه افزودن به سبد خرید را سفارشی کنیم. برای انجام این کار کافی است کد زیر را کپی کرده و پیست کنید:

add_filter('woocommerce_product_single_add_to_cart_text','QL_customize_add_to_cart_button_woocommerce');

function QL_customize_add_to_cart_button_woocommerce(){

return __('Buy this item', 'woocommerce');

}

همانطور که می بینید، این کد برای تک محصول است و متن دکمه مقادیری را که در تابع customize_add_to_cart_button_woocommerce () مشخص کنید را نمایش می دهد .

اضافه کردن متن در بالا/زیر دکمه افزودن به سبد خرید

تغییر بسیار جالب و ساده دیگری که می توانید برای سفارشی کردن دکمه سبد خرید در ووکامرس انجام دهید، این است که یک متن بالای دکمه افزودن به سبد خرید اضافه کنید. این مکان یک گزینه عالی برای ذکر حمل و نقل رایگان، سیاست بازگشت، ضمانت و غیره است. فرض کنید می خواهید متن ” 14 روز ضمانت بازگشت وجه ” را به بالای دکمه خود اضافه کنید. برای انجام این کار از دستور echo استفاده کنید و قطعه زیر را به فایل functions.php قالب خود اضافه می کنیم.

add_action( 'woocommerce_single_product_summary', 'QL_add_text_above_add_to_cart', 20 );

function 'QL_add_text_above_add_to_cart'()

 {

echo "14 روز ضمانت بازگشت وجه ";

}

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

add_action( 'woocommerce_after_add_to_cart_button', 'QL_add_text_under_add_to_cart' );

function QL_add_text_under_add_to_cart()

 {

echo "برای دریافت خدمات رایگان با ما تماس بگیرید ";

}

همانطور که می بینید، اینها تغییرات بسیار آسانی هستند که می توانید برای افزایش نرخ تبدیل خود در کم ترین زمان ممکن انجام دهید.

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

حال بیایید ببینیم که چگونه رنگ دکمه افزودن به سبد خرید را تغییر داده و آن را ویرایش کنیم. حتی اگر بیشتر قالب های وردپرس و ووکامرس رنگ های پیش فرض برای دکمه ها ارائه می دهند، شما باید مطمئن شوید که آن ها با سبک فروشگاه شما مطابقت دارند.

برای سفارشی کردن رنگ دکمه افزودن به سبد خرید در ووکامرس، باید یک قطعه کد CSS را به فایل style.css اضافه کنید. با رفتن به قسمت مربوط به کلاس های اضافی CSS در داشبورد وردپرس می توانید این فایل را پیدا کنید. همچنین با استفاده از یک کلاینت  FTPمی توانید به آن دسترسی داشته باشید.

برای تغییر رنگ دکمه ها در صفحات تک محصول کافی است که کد زیر را در فایل style.css قرار دهید و رنگ ها را به رنگ هایی که می خواهید، تغییر دهید.

.single-product .product .single_add_to_cart_button.button {

background-color: #FF0000;

color: #C0C0C0;

}

برای سفارشی کردن دکمه افزودن به سبد خرید و تغییر رنگ آن در صفحه آرشیو ووکامرس، از این کد استفاده کنید:

.woocommerce .product .add_to_cart_button.button {

background-color: #FF0000;

color: #C0C0C0;

}

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

ممکن است دلایل مختلفی وجود داشته باشد که چرا دکمه افزودن به سبد خرید ممکن است کار نکند. برخی از این دلایل عبارتند از:

• ناسازگاری پلاگین ها و قالب ها با یکدیگر
• محصولات با اطلاعات ناقص
• مشکلات مربوط به حافظه پنهان
• لینک های ثابت
• و…

این موارد گفته شده را به دقت بررسی کنید و سپس مشکل دکمه افزودن به سبد خرید را برطرف کنید.

جمع بندی

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

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