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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

add_action( ‘woocommerce_single_product_summary’, ‘QL_add_text_above_add_to_cart’, 20 );

function QL_add_text_above_add_to_cart() {
echo “<p style=’color:green; font-weight:bold;’>14 روز ضمانت بازگشت وجه</p>”;
}

این کد متن ۱۴ روز ضمانت بازگشت وجه را بالای دکمه نمایش می‌دهد. می‌توانید متن و استایل آن را بر اساس سلیقه خود تغییر دهید.

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

برای اطلاع‌رسانی به مشتریان درباره تخفیف‌ها یا خدمات ویژه زیر دکمه، از کد زیر استفاده کنید:

add_action( ‘woocommerce_after_add_to_cart_button’, ‘QL_add_text_under_add_to_cart’ );

function QL_add_text_under_add_to_cart() {
echo “<p style=’color:blue;’>برای دریافت خدمات رایگان با ما تماس بگیرید</p>”;
}

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

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

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

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

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

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

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

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

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

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