فهرست مطالب
صفحه سبد خرید خالی ووکامرس یکی از بخشهایی است که خیلی وقتها نادیده گرفته میشود، اما در واقع میتواند تاثیر زیادی روی تجربهی کاربر و افزایش فروش داشته باشد. وقتی کاربر وارد سبد خرید میشود و چیزی در آن پیدا نمیکند، اگر فقط یک پیام ساده مثل «سبد خرید شما خالی است» ببیند، بهاحتمال زیاد سایت را ترک میکند.
دیجیکالا یک نمونهی موفق در این زمینه است. این فروشگاه در صفحهی سبد خالی علاوه بر پیام، دکمهی بازگشت به فروشگاه و پیشنهادهای هوشمند مثل «آخرین محصولات بازدید شده» را نمایش میدهد. همین موضوع باعث میشود کاربر دوباره ترغیب به بررسی محصولات و ادامه خرید شود.
در جلسه قبلی ، نحوه طراحی صفحه سبد خرید پیشرفته با المنتور را یادگرفتیم و در این قسمت از دوره آموزش طراحی سایت شبیه دیجی کالا با المنتور یاد میگیریم چطور یک صفحه سبد خرید خالی حرفهای و مشابه دیجیکالا بسازیم. این روش هم کاربرپسند است و هم به شما کمک میکند نرخ تبدیل فروشگاهتان را بالاتر ببرید.
مراحل ساخت صفحه سبد خرید خالی ووکامرس
مرحله اول: نصب افزونهها
برای شروع ساخت صفحه سبد خرید خالی ووکامرس ، قبل از هر چیزی باید ابزارهای موردنیاز رو روی وردپرس نصب کنیم. این مرحله خیلی مهمه چون اگه حتی یکی از افزونهها درست نصب یا فعال نشه، مراحل بعدی به مشکل میخوره.
گامهای نصب
- وارد پیشخوان وردپرس بشید.
- از منوی سمت راست روی افزونهها > افزودن کلیک کنید.
- افزونههای زیر رو به ترتیب نصب و فعال کنید:
- WooCommerce (از مخزن وردپرس رایگان در دسترسه)
- Elementor Pro (نسخه پرو برای طراحی صفحات ووکامرس ضروریه)
- JetWooBuilder
- JetEngine
مرحله دوم: ایجاد قالب صفحه سبد خرید با جتووبیلدر
پس از نصب و فعالسازی افزونهها، وارد پیشخوان وردپرس شوید و از منوی جتووبیلدر روی گزینه افزودن قالب جدید کلیک کنید.
در این بخش باید نوع قالب را سبد خرید ووکامرس انتخاب کنید. این مرحله بسیار مهم است چون تعیین میکند که قالب طراحیشده مستقیماً روی صفحه سبد خرید ووکامرس اعمال شود.
در بخش عنوان، یک نام فارسی مانند «قالب صفحه سبد خرید خالی» وارد کنید تا بعداً بهراحتی آن را مدیریت و ویرایش کنید. سپس روی دکمه ایجاد قالب کلیک کنید.
با این کار، صفحه ویرایشگر المنتور باز میشود و شما میتوانید بهصورت کامل، صفحه سبد خرید خالی ووکامرس با المنتور را طراحی کنید. اینجا دقیقاً همان جایی است که میتوانید ظاهر و ساختار صفحه را مشابه وبسایتهایی مثل دیجیکالا شخصیسازی کنید.
مرحله سوم: ساخت دیتا استور با جتانجین
برای اینکه بتوانیم در صفحه سبد خرید خالی ووکامرس با المنتور، آخرین محصولات بازدیدشده کاربر را نمایش دهیم، نیاز به یک دیتاستور داریم. این دیتاستور با استفاده از کوکی مرورگر اطلاعات بازدید کاربر را ذخیره میکند.
برای این کار، وارد پیشخوان وردپرس شوید و از منوی جتانجین گزینه دیتاستور (Data Store) را انتخاب کنید.
سپس یک استور جدید ایجاد کنید و:
- نام استور را به فارسی وارد کنید، مثلاً «محصولات بازدید شده».
- نامک دیتااستور (اسلاگ) را به انگلیسی وارد کنید.
- نوع ذخیرهسازی را روی کوکی (Cookie) قرار دهید.
- زمان ماندگاری کوکی را مشخص کنید (مثلاً چند روز).
با این کار هر محصولی که کاربر در فروشگاه مشاهده کند، داخل دیتاستور ذخیره میشود و ما میتوانیم در بخش طراحی صفحه خالی سبد خرید، آنها را فراخوانی کنیم.
مرحله چهارم: طراحی حالت خالی سبد خرید با المنتور
حالا وارد بخش طراحی قالب سبد خرید شوید (که در مرحله دوم ساختیم). در المنتور ابتدا یک سکشن بسازید و:
- تصویر آیکن سبد خرید خالی را در بالای صفحه قرار دهید (میتوانید از آیکن ساده یا مشابه دیجیکالا استفاده کنید).
- یک متن راهنما اضافه کنید، مثلاً «سبد خرید شما خالی است».
- سپس از ویجت لیستینگ شبکه که مربوط به جتانجین است استفاده کنید.
برای اینکه این لیستینگ محصولات بازدیدشده را نمایش دهد، باید ابتدا یک قالب حلقه لیستینگ ایجاد کنید:
- به منوی لیستینگ آیتمها (Listing Items) در جتانجین بروید.
- یک قالب حلقه جدید بسازید (مثلاً نمایش کارت محصول با تصویر، نام و قیمت).
- این قالب حلقه را ذخیره کنید.
حالا برگردید به ویجت لیستینگ شبکه در المنتور:
سپس در بخش دریافت دیتااستور، دیتاستوری که در مرحله سوم ساختیم (محصولات بازدید شده) را انتخاب کنید.
در بخش انتخاب قالب، قالب حلقهای که ساختید را انتخاب کنید.
در بخش کوئری پست ها گزینه پارامترهای پست ها و نویسنده ها را انتخاب کنید.
با این کار، در صفحه خالی سبد خرید ووکامرس آخرین محصولات بازدیدشده کاربر نمایش داده میشود، دقیقاً مشابه تجربه کاربری سایتهای بزرگی مثل دیجیکالا.
مرحله پنجم: اتصال قالب به صفحه سبد خرید خالی ووکامرس
بعد از طراحی کامل قالب و آمادهسازی حالت خالی سبد خرید، باید آن را به ووکامرس متصل کنیم تا جایگزین صفحه پیشفرض شود.
برای این کار وارد پیشخوان وردپرس شوید و مسیر زیر را دنبال کنید:
ووکامرس ← پیکربندی ← جتووبیلدر
در این بخش تنظیمات مربوط به صفحات ووکامرس با جتووبیلدر وجود دارد. حالا:
- بخش مربوط به قالب سبد خرید (Cart Template) را پیدا کنید.
- از منوی کشویی، قالبی که در مرحله دوم ایجاد و طراحی کردیم را انتخاب کنید.
با ذخیره تغییرات، از این پس هر زمان که کاربر وارد صفحه سبد خرید خالی ووکامرس شود، قالب اختصاصی شما که با المنتور طراحی شده نمایش داده میشود. در این قالب، علاوه بر آیکن و پیام خالی بودن سبد خرید، بخش آخرین محصولات بازدیدشده کاربر نیز بهصورت کاملاً داینامیک از طریق دیتاستور جتانجین نمایش داده خواهد شد؛ درست مشابه تجربه خرید در دیجیکالا.
جمعبندی و نکات پایانی
با اجرای کامل مراحل بالا، موفق شدید یک صفحه سبد خرید خالی ووکامرس با المنتور و جتووبیلدر ایجاد کنید که:
- ظاهر حرفهای و کاربرپسند دارد.
- پیام خالی بودن سبد و دکمه ادامه خرید دارد.
- آخرین محصولات بازدیدشده کاربران را بهصورت داینامیک نمایش میدهد.
- تجربه کاربری و نرخ تبدیل فروشگاه را بهبود میبخشد.
نکات حرفهای
- قالب را ریسپانسیو طراحی کنید.
- تعداد محصولات نمایش دادهشده در لیستینگ شبکه بین 8 تا 12 عدد باشد.
- از قابلیت اسکرول بی نهایت استفاده کنید تا تجربه کاربری مشابه دیجیکالا ایجاد شود.
- بعد از اعمال قالب، عملکرد صفحه را با کاربر واردشده و مهمان تست کنید.
سؤالات متداول در مورد ساخت صفحه سبد خرید خالی ووکامرس با المنتور و جتانجین
۱. آیا برای طراحی صفحه سبد خرید خالی با المنتور به افزونههای خاصی نیاز دارم؟
بله، برای طراحی صفحه سبد خرید خالی ووکامرس با المنتور، به افزونههای زیر نیاز دارید:
المنتور پرو: برای دسترسی به ویجتهای پیشرفته.
جتووبیلدر (JetWooBuilder): برای طراحی قالبهای صفحات ووکامرس.
جتانجین (JetEngine): برای ایجاد دیتاستورها و لیستینگهای داینامیک.
۲. دیتاستور جتانجین چیست و چگونه میتوانم از آن استفاده کنم؟
دیتاستور جتانجین ابزاری است که به شما امکان ذخیره و مدیریت دادهها را میدهد. برای نمایش آخرین محصولات بازدیدشده کاربر در صفحه سبد خرید خالی، میتوانید از دیتاستور با نوع ذخیرهسازی کوکی استفاده کنید. این کار به شما امکان میدهد تا تجربه کاربری مشابه دیجیکالا را ارائه دهید.
۳. چگونه میتوانم ویجت لیستینگ شبکه را برای نمایش محصولات بازدیدشده استفاده کنم؟
برای نمایش محصولات بازدیدشده با استفاده از ویجت لیستینگ شبکه (Listing Grid):
وارد صفحه ویرایش قالب سبد خرید با المنتور شوید.
ویجت لیستینگ شبکه را به صفحه اضافه کنید.
در تنظیمات ویجت، قالب حلقهای که برای نمایش محصولات طراحی کردهاید را انتخاب کنید.
در بخش کوئری، دیتاستوری که محصولات بازدیدشده را ذخیره کردهاید فراخوانی کنید.
۴. آیا میتوانم صفحه سبد خرید خالی را برای دستگاههای مختلف بهینهسازی کنم؟
بله، با استفاده از المنتور میتوانید صفحه سبد خرید خالی را بهصورت ریسپانسیو طراحی کنید تا در دستگاههای مختلف مانند موبایل و تبلت بهدرستی نمایش داده شود.
۵. پس از طراحی، چگونه میتوانم قالب سبد خرید را در ووکامرس اعمال کنم؟
برای اعمال قالب طراحیشده:
به مسیر ووکامرس > پیکربندی > جتووبیلدر بروید.
در بخش قالب سبد خرید، قالبی که طراحی کردهاید را انتخاب کنید.
تغییرات را ذخیره کنید تا قالب جدید جایگزین صفحه پیشفرض سبد خرید شود.
کاربران گرامی:
برای مشاهده آموزش کامل این ویدیو ، ابتدا باید عضو دوره جامع طراحی فروشگاه اینترنتی مشابه دیجی کالا باشید ، پس از عضویت ، براحتی دسترسی کامل به محتوای آموزشی کامل ویدیو و همچنین فایل ها و کدهای آماده دوره را خواهید داشت.
