دانلود فایلهای این آموزش
حجم فایل: ۱۲ مگابایت | فرمت: ZIPآموزش ساخت دکمه افزودن به سبد خرید پیشرفته ووکامرس + دکمه موجود شد خبرم کن کارتیجکس
صفحه محصول یکی از حیاتیترین بخشهای هر فروشگاه آنلاین است و دکمه افزودن به سبد خرید پیشرفته یکی از ضروری ترین قسمت هایی است که باید در این صفحه نمایش داده شود و قرار است در این آموزش به شما برای اولین بار در ایران به شما یاد بدهیم که چگونه این بخش را با استفاده از افزونه کارتیجکس، حرفه ای تر طراحی کنید.
در این صفحه، مشتری باید بتواند به سرعت اطلاعات کالا را مرور کند، گزینههایی مانند رنگ و سایز را انتخاب کند، قیمت را بررسی کند و بدون سردرگمی محصول را به سبد خرید اضافه کند.
ووکامرس امکانات پایهای برای مدیریت این فرآیند ارائه میدهد، اما در بسیاری از فروشگاهها، طراحی نامناسب یا فرآیندهای پیچیده میتواند تجربه خرید را دشوار کند و باعث افزایش نرخ رهاسازی سبد خرید شود.
برای مثال، یک دکمه معمولی «افزودن به سبد خرید» همیشه کاربردیترین راهحل نیست. چرا کاربر پس از اضافه کردن محصول، برای تغییر تعداد باید دوباره وارد سبد خرید شود؟ یا چرا انتخاب رنگ و سایز باید از طریق منوهای کشویی کوچک و نامناسب انجام شود؟
در این مقاله، قدم به قدم به شما نحوه استفاده از افزونه افزودن به سبد خرید ایجکس ووکامرس | کارتیجکس مشابه دیجی کالا را آموزش خواهیم داد.
دکمه افزودن به سبد خرید پیشرفته ووکامرس؛ بیش از یک عنصر ساده
دکمه افزودن به سبد خرید یکی از محوریترین المانهای صفحه محصول است. مشتری پس از بررسی کالا و انتخاب گزینههای مورد نیاز، از طریق این دکمه محصول را به سبد خرید اضافه میکند.
در حالت پیشفرض ووکامرس، این فرآیند به شکل ابتدایی مدیریت میشود. البته امکان تغییر متن، ظاهر و رفتار دکمه از طریق کدنویسی، قالب یا افزونههای جانبی وجود دارد. برای نمونه، میتوان متن دکمه را تغییر داد، آیکن اضافه کرد یا عملکرد آن را سفارشی کرد.
اما موضوع تنها به ظاهر دکمه محدود نمیشود.
یک دکمه افزودن به سبد خرید حرفهای باید در تمام مراحل خرید، وضعیت مناسبی را به کاربر نمایش دهد:
- محصول هنوز به سبد اضافه نشده است
- محصول با موفقیت به سبد افزوده شده است
- محصول در سبد خرید قرار دارد
- تعداد محصول باید افزایش یا کاهش یابد
- محصول ناموجود است
- برای خرید محصولات متغیر، ابتدا باید ویژگیها انتخاب شوند
بنابراین بهجای یک دکمه ثابت، باید به «سیستم خرید» نگاه کنیم.
چرا بهینهسازی دکمه افزودن به سبد خرید ووکامرس ضروری است؟
دکمه خرید به طور مستقیم با نرخ تبدیل بازدیدکننده به خریدار ارتباط دارد. اگر مشتری در حین خرید با خطا، رفرش صفحه، انتخاب دشوار ویژگیها یا ابهام در وضعیت سبد خرید روبرو شود، احتمال ترک فرآیند خرید به شدت افزایش مییابد.
به همین دلیل، سفارشیسازی دکمه افزودن به سبد خرید ووکامرس صرفاً یک تغییر ظاهری نیست؛ بلکه بخشی از بهینهسازی تجربه کاربری فروشگاه است.
یک طراحی مناسب میتواند شامل موارد زیر باشد:
- افزودن محصول بدون رفرش صفحه (AJAX)
- نمایش وضعیت موفقیتآمیز خرید
- نمایش تعداد محصول در سبد
- امکان افزایش و کاهش تعداد
- حذف سریع محصول
- نمایش وضعیت موجودی
- نمایش بهینه در موبایل
- هماهنگی با طراحی کلی صفحه محصول
ویژگیهای محصول ووکامرس؛ نقش کلیدی در تصمیم خرید
یکی دیگر از اجزای حیاتی صفحه محصول، ویژگیهای محصول ووکامرس است.
ویژگیها (Attributes) برای تعریف مشخصات یا خصوصیات کالا استفاده میشوند؛ مواردی مانند:
- رنگ
- سایز
- جنس
- حافظه داخلی
- ظرفیت
- برند
- نوع محصول
برای مثال، یک تیشرت میتواند ویژگی «رنگ» با مقادیر مشکی، سفید و آبی و ویژگی «سایز» با مقادیر S، M و L داشته باشد.
در ووکامرس باید بین Attribute (ویژگی) و Variation (متغیر) تفاوت قائل شد. ویژگی، مشخصه کلی محصول است؛ در حالی که متغیر میتواند ترکیبی قابل خرید از چند ویژگی باشد. برای نمونه «تیشرت مشکی سایز L» میتواند یک Variation مستقل با قیمت و موجودی جداگانه باشد.
این تفاوت در طراحی سیستم انتخاب محصول بسیار مهم است.
نمایش حرفه ای ویژگیهای محصول ووکامرس مشابه دیجی کالا
ووکامرس به صورت پیش فرض ویژگیهای متغیر را با Dropdown (منوی کشویی) نمایش میدهد، اما این تنها گزینه موجود نیست.
برای فروشگاه هایی که محصولات رنگی یا سایزبندی متنوعی دارند، میتوان Variation Swatches را مشابه دیجی کالا ایجاد کرد.
در این روش بهجای منوی کشویی، ویژگیها میتوانند به شکلهای مختلف نمایش داده شوند:
نمایش ویژگی به صورت متنی
برای ویژگیهایی مانند سایز میتوان گزینههایی مانند:
S | M | L | XL
را به صورت دکمههای قابل انتخاب نمایش داد.
نمایش ویژگی به صورت رنگی
برای محصولاتی مانند لباس، کفش، لوازم جانبی و دکوراسیون میتوان رنگها را به صورت دایره یا مربع رنگی نمایش داد.
نمایش ویژگی با تصویر
در برخی محصولات، نمایش تصویر بسیار کاربردیتر از یک نام یا رنگ ساده است.
برای مثال اگر محصول دارای چند طرح پارچه باشد، بهجای نوشتن «طرح ۱»، «طرح ۲» و «طرح ۳»، میتوان تصویر واقعی هر طرح را نمایش داد.
استفاده از رنگ، تصویر یا متن برای نمایش Variationها یکی از روشهای متداول برای بهبود رابط انتخاب محصول در فروشگاههای ووکامرسی است.
چالش انتخاب ویژگیها در نسخه موبایل
بخش قابل توجهی از مشتریان فروشگاهها از طریق موبایل وارد سایت میشوند. بنابراین طراحی ویژگیهای محصول نباید صرفاً برای دسکتاپ انجام شود.
در صفحه کوچک موبایل، یک فرم طولانی با چندین Dropdown میتواند فضای زیادی اشغال کند و تجربه کاربری را مختل کند.
یک راهکار بهتر، استفاده از Bottom Sheet یا پنل انتخاب ویژگی در موبایل است.
برای نمونه، کاربر روی «انتخاب رنگ» کلیک میکند و پنلی از پایین صفحه باز میشود. در این پنل میتواند رنگ یا سایز موردنظر را انتخاب کند و سپس به صفحه محصول برگردد.
این روش بهویژه زمانی مفید است که محصول تعداد زیادی Variation داشته باشد.
افزودن به سبد خرید AJAX؛ خرید بدون رفرش صفحه
یکی از مهمترین تغییرات در تجربه خرید ووکامرس، استفاده از AJAX Add to Cart است.
در این روش، پس از کلیک روی دکمه افزودن به سبد خرید، درخواست در پسزمینه ارسال میشود و نیازی به بارگذاری مجدد صفحه نیست.
در نتیجه کاربر میتواند:
- محصول را به سبد اضافه کند
- همچنان در همان صفحه باقی بماند
- تعداد محصول را تغییر دهد
- محصولات دیگری را بررسی کند
- بدون وقفه فرآیند خرید را ادامه دهد
AJAX در ووکامرس برای فرآیندهای سبد خرید کاربرد گستردهای دارد و در فروشگاههای فارسی نیز راهکارهای متنوعی برای فعالسازی یا سفارشیسازی آن ارائه شده است.
تبدیل دکمه افزودن به سبد خرید به شمارنده هوشمند
یکی از محدودیتهای دکمه معمولی این است که پس از اضافه شدن محصول، کاربر هنوز باید برای تغییر تعداد به صفحه سبد خرید مراجعه کند.
راهکار بهتر، تبدیل دکمه به یک شمارنده تعداد است.
برای مثال:
− ۱ +
کاربر میتواند با علامت + تعداد محصول را افزایش دهد و با علامت − تعداد را کاهش دهد.
اگر تعداد به صفر برسد، محصول میتواند از سبد خرید حذف شود.
این مدل برای فروشگاههایی که مشتری معمولاً چند عدد از یک کالا خریداری میکند، تجربه بسیار سادهتری ایجاد میکند.
نمایش وضعیت محصول در سبد خرید
پس از کلیک روی دکمه خرید، بهتر است کاربر دقیقاً متوجه شود چه اتفاقی افتاده است.
برای مثال میتوان وضعیت را به شکل زیر نمایش داد:
✓ محصول به سبد خرید اضافه شد
و در کنار آن لینکی برای مشاهده سبد خرید قرار داد.
حتی میتوان بهجای پیام ساده، یک وضعیت تعاملی نمایش داد که همان محصول را همراه با تعداد و قیمت نشان دهد.
این موضوع بهویژه زمانی اهمیت دارد که افزودن به سبد خرید با AJAX انجام میشود و صفحه تغییر نمیکند.
پاپآپ پس از افزودن محصول به سبد خرید
یکی از روشهای کاربردی برای افزایش ارزش هر سفارش، نمایش پیشنهادهای مرتبط بلافاصله پس از افزودن محصول است.
فرض کنید مشتری یک لپتاپ به سبد خرید اضافه کرده است.
در همان لحظه میتوان محصولاتی مانند:
- کیف لپتاپ
- ماوس بیسیم
- هارد اکسترنال
- کولپد
را پیشنهاد داد.
این محصولات میتوانند از بخش Cross-sell یا Up-sell ووکامرس دریافت شوند.
مزیت این روش این است که کاربر دقیقاً در زمانی پیشنهاد را میبیند که تصمیم خرید گرفته است.
برای همین، پاپآپ افزودن به سبد خرید میتواند علاوه بر اطلاعرسانی، به یک ابزار کاربردی برای افزایش میانگین ارزش سفارش (AOV) تبدیل شود.
سیستم «موجود شد خبرم کن» برای محصولات ناموجود
همه مشتریان آماده خرید فوری نیستند؛ گاهی محصولی که خریدار میخواهد خریداری کند، ناموجود است.
نمایش ساده عبارت:
ناموجود
عملاً پایان مسیر خرید است.
اما میتوان این وضعیت را به فرصتی برای جمعآوری لید تبدیل کرد.
بهجای آن میتوان دکمهای مانند:
موجود شد خبرم کنید
نمایش داد.
مشتری شماره موبایل یا ایمیل خود را ثبت میکند و پس از موجود شدن کالا، اطلاعرسانی برای او انجام میشود.
این سیستم میتواند برای فروشگاههایی که محصولاتشان مرتباً ناموجود و دوباره موجود میشوند، کاربرد بسیاری داشته باشد.
احراز هویت مشتری برای «موجود شد خبرم کن»
اگر قرار است شماره موبایل کاربر برای اطلاعرسانی ذخیره شود، بهتر است سیستم امکان تأیید شماره را نیز داشته باشد.
برای مثال:
شماره موبایل → ارسال کد تأیید → ثبت درخواست
در یک سیستم کاملتر میتوان کانالهای مختلفی مانند پیامک و ایمیل را نیز در نظر گرفت.
پس از افزایش موجودی محصول، سیستم میتواند درخواستهای ثبتشده را پردازش کرده و اطلاعرسانی را انجام دهد.
این فرآیند، قابلیت «موجود شد خبرم کنید» را از یک فرم ساده به یک سیستم بازگشت مشتری تبدیل میکند.
دکمه خرید شناور در نسخه موبایل
در صفحات طولانی، کاربر ممکن است پس از مشاهده تصاویر، توضیحات، مشخصات فنی و نظرات، دیگر دکمه افزودن به سبد خرید را نبیند.
یکی از راهکارهای مناسب، استفاده از دکمه افزودن به سبد خرید شناور در پایین صفحه موبایل و تبلت است.
در این حالت، یک نوار ثابت در پایین صفحه موبایل قرار میگیرد و اطلاعات مهم را همیشه در دسترس نگه میدارد.
برای مثال:
نام محصول | قیمت | افزودن به سبد خرید
یا پس از خرید:
− | ۱ | +
این قابلیت باعث میشود کاربر برای خرید دوباره مجبور نباشد به ابتدای صفحه برگردد.
بهینهسازی دکمه افزودن به سبد خرید در المنتور
اگر صفحه محصول با افزونه المنتور پرو طراحی شده باشد، کنترل ظاهر دکمه اهمیت بیشتری پیدا میکند.
بهتر است موارد زیر قابل تنظیم باشند:
- رنگ دکمه و رنگ متن
- رنگ دکمه در حالت هاور
- تایپوگرافی و اندازه متن
- ارتفاع دکمه و فاصله داخلی
- گردی گوشهها
- آیکن و فاصله آیکن و متن
- وضعیت Loading
- استایل شمارنده
- نمایش در موبایل و تبلت
به این ترتیب دکمه خرید دیگر یک عنصر جدا از طراحی سایت نیست و با سیستم طراحی کلی فروشگاه هماهنگ میشود.
عملکرد و سرعت؛ امکانات بیشتر یعنی سایت کندتر؟
یکی از نگرانیهای رایج هنگام اضافه کردن امکاناتی مانند AJAX، Swatches و پاپآپ این است که سرعت سایت کاهش یابد.
اما مسئله اصلی، نحوه پیادهسازی است.
استفاده از درخواستهای غیرضروری، JavaScript سنگین یا بارگذاری دائمی فایلهایی که در صفحه موردنیاز نیستند، میتواند عملکرد سایت را تحت تأثیر قرار دهد.
بنابراین یک سیستم خرید حرفهای باید تا حد امکان:
- درخواستهای غیرضروری را کاهش دهد
- اسکریپتها را فقط در صفحات موردنیاز بارگذاری کند
- وضعیت Loading مناسبی داشته باشد
- از ایجاد Layout Shift جلوگیری کند
- با سیستمهای کش سازگار باشد
- فرآیندهای AJAX را به شکل بهینه مدیریت کند
هدف این نیست که صرفاً امکانات بیشتری به صفحه اضافه کنیم؛ هدف این است که همزمان تجربه کاربری و عملکرد فنی سایت را حفظ کنیم.
کارتیجکس؛ ترکیب دکمه خرید، ویژگی محصول و تجربه خرید در یک سیستم
اینجاست که یک سیستم مانند کارتیجکس میتواند کاربردی باشد.
بهجای اینکه برای هر بخش از صفحه محصول یک راهکار جداگانه استفاده شود، میتوان فرآیند خرید را در قالب یک سیستم یکپارچه مدیریت کرد.
برخی از قابلیتهای این سیستم شامل موارد زیر است:
دکمه افزودن به سبد خرید هوشمند
دکمه میتواند پس از افزودن محصول، به شمارنده تعداد تبدیل شود و امکان افزایش یا کاهش تعداد را در همان محل فراهم کند.
افزودن به سبد خرید AJAX
فرآیند اضافه شدن محصول میتواند بدون رفرش صفحه انجام شود تا کاربر در صفحه محصول باقی بماند.
نمایش حرفهای ویژگیهای محصول
ویژگیهایی مانند رنگ و سایز میتوانند به شکل متن، رنگ یا تصویر نمایش داده شوند تا انتخاب Variation سادهتر شود.
انتخاب ویژگی در موبایل
نمایش ویژگیها در موبایل میتواند با یک پنل مناسب برای صفحههای کوچک انجام شود.
موجود شد خبرم کن
برای محصولات ناموجود میتوان بهجای پایان فرآیند خرید، امکان ثبت درخواست اطلاعرسانی ایجاد کرد.
پاپآپ محصولات پیشنهادی
پس از افزودن محصول، میتوان Cross-sell و Up-sell را در یک پنجره تعاملی نمایش داد.
نوار خرید شناور
در موبایل میتوان دکمه خرید و اطلاعات مهم محصول را در یک نوار ثابت در دسترس کاربر نگه داشت.
جمعبندی؛ دکمه خرید فقط یک دکمه نیست
در یک فروشگاه اینترنتی حرفهای، دکمه افزودن به سبد خرید ووکامرس نباید صرفاً یک دکمه ثابت با متن «افزودن به سبد خرید» باشد.
این دکمه بخشی از یک مسیر بزرگتر است؛ مسیری که از انتخاب ویژگی محصول شروع میشود و تا اضافه شدن کالا به سبد، تغییر تعداد، پیشنهاد محصولات مرتبط و در نهایت پرداخت ادامه پیدا میکند.
از طرف دیگر، ویژگیهای محصول ووکامرس نیز فقط اطلاعاتی مانند رنگ و سایز نیستند. نحوه نمایش و انتخاب این ویژگیها مستقیماً روی تجربه کاربر در صفحه محصول تأثیر میگذارد.
به همین دلیل، اگر هدف شما ساخت یک فروشگاه حرفهای است، بهتر است بهجای تمرکز روی یک عنصر منفرد، کل تجربه خرید را بهینه کنید.
سیستمی مانند کارتیجکس با ترکیب دکمه خرید هوشمند، افزودن به سبد خرید AJAX، شمارنده محصول، نمایش حرفهای ویژگیها، اطلاعرسانی موجودی، پیشنهاد محصولات و خرید شناور موبایل میتواند این مسیر را یکپارچهتر و کاربرپسندتر کند.
در نهایت، هدف از این تغییرات ساده است: مشتری باید بتواند محصول موردنظرش را با کمترین معطلی انتخاب کند و بخرد.