وقتی فروشگاه اینترنتی شما روی ووکامرس ساخته میشود، یکی از مهمترین بخشهایی که مشتریان به طور مداوم از آن استفاده میکنند، صفحه سفارشات است. در حالت پیش فرض، بخش صفحه سفارشات ووکامرس ظاهر سادهای دارد و تجربه کاربری ضعیفی را ارائه میدهد. کاربران فقط یک جدول خشک با شماره سفارش، تاریخ و وضعیت مشاهده میکنند که برای فروشگاه های حرفهای کافی نیست.
در این قسمت از دوره آموزش طراحی سایت شبیه دیجی کالا با المنتور، قصد داریم یاد بگیریم چطور میتوانیم یک صفحه سفارشات ووکامرس مشابه دیجی کالا با طراحی مدرن، تببندی و قابلیتهای آجاکس بسازیم. نتیجه نهایی یک صفحه سفارشات حرفهای، زیبا و کاربرپسند خواهد بود که دقیقاً مثل دیجی کالا تجربه خرید بهتری را به مشتریان ارائه میدهد.
چرا به صفحه سفارشات سفارشی نیاز داریم؟
کاربران انتظار دارند در پنل کاربری خود:
- سفارشها را به تفکیک وضعیت (در حال پردازش، تکمیل شده، لغو شده و …) ببینند.
- امکان جستجو بر اساس شماره سفارش داشته باشند.
- سفارشها به صورت کارتهای گرافیکی با اطلاعات کلیدی نمایش داده شوند.
- بتوانند در همان صفحه، تصاویر محصولات هر سفارش را مشاهده کنند.
- همه این قابلیتها بدون رفرش شدن صفحه و با سرعت بالا (آجاکس) در دسترس باشند.
این ویژگیها در فروشگاههای بزرگ مثل دیجی کالا به خوبی پیاده سازی شده و حالا شما هم میتوانید آن را برای سایت خود بسازید.
مراحل ساخت صفحه سفارشات ووکامرس مشابه دیجی کالا با JetWooBuilder
مرحله اول: ایجاد قالب جدید برای صفحه سفارشات
ابتدا به بخش کروکوبلاک > جت ووبیلدر > افزودن قالب جدید بروید. در این قسمت باید یک قالب اختصاصی به عنوان نقطه پایانی برای صفحه سفارشات ووکامرس ایجاد کنید. این قابلیت به شما امکان میدهد ظاهر پیش فرض ووکامرس را تغییر دهید و یک طراحی کاملاً سفارشی برای بخش سفارشها داشته باشید.
مرحله دوم: طراحی قالب با المنتور
پس از ساخت قالب، نوبت به طراحی میرسد. با استفاده از افزونه المنتور پرو میتوانید:
- یک هدر اختصاصی برای بخش سفارشات قرار دهید.
- تبهای وضعیت سفارشها (مانند در حال پردازش، تکمیلشده، لغوشده) طراحی کنید.
- یک فرم جستجو بر اساس شماره سفارش ایجاد کنید.
- سفارشها را به شکل کارت محور نمایش دهید و اطلاعاتی مثل شماره سفارش، تاریخ، مبلغ کل و وضعیت را در کارتها درج کنید.
- در بخش پایین کارت، تصاویر محصولات را قرار دهید تا کاربر سریعاً متوجه محتوای هر سفارش شود.
مرحله سوم: اتصال قالب به ووکامرس
بعد از اتمام طراحی، باید این قالب را به ووکامرس متصل کنید. برای این کار کافی است وارد بخش:
ووکامرس > پیکربندی > جت ووبیلدر شوید و از قسمت تنظیمات، قالبی که ساختهاید را به عنوان قالب صفحه سفارشات انتخاب کنید. از این لحظه، وقتی کاربر وارد صفحه حساب کاربری ووکامرس خود شود، صفحه سفارشات جدید و سفارشی شما نمایش داده خواهد شد.
مزایای ساخت صفحه سفارشات سفارشی با JetWooBuilder
- شباهت کامل به دیجیکالا
ساختار تب بندی، نمایش کارت محور سفارش ها و تجربه کاربری روان دقیقاً مشابه چیزی است که کاربران در سایت های بزرگ تجربه میکنند. - بدون نیاز به افزونه اضافی
همه چیز با همان ابزارهای اصلی یعنی افزونه JetWooBuilder و Elementor Pro انجام میشود. - طراحی واکنشگرا
قالب به طور کامل برای موبایل و تبلت بهینه سازی میشود و کاربران تجربه یکسانی در همه دستگاهها خواهند داشت. - بهبود تجربه کاربری و افزایش وفاداری مشتریان
مشتریان وقتی بتوانند سفارشهای خود را راحتتر پیدا کنند، رضایت بیشتری خواهند داشت و احتمال بازگشت آنها به فروشگاه بیشتر میشود.
مقایسه روش سفارشیسازی با افزونههای آماده
خیلی از طراحان سایت برای سفارشیسازی صفحه سفارشات ووکامرس از افزونههای آماده استفاده میکنند. اما مشکل این افزونهها این است که:
- معمولاً امکانات غیرضروری زیادی دارند و باعث سنگین شدن سایت میشوند.
- امکان طراحی اختصاصی مشابه دیجیکالا را نمیدهند.
- کنترل کامل بر UI و UX ندارید.
در حالی که با JetWooBuilder و المنتور میتوانید همه چیز را مطابق نیاز خود طراحی کنید و دقیقاً همان تجربهای که مد نظر دارید به کاربر ارائه دهید.
نتیجهگیری
ساخت یک صفحه سفارشات ووکامرس مشابه دیجیکالا با طراحی آجاکسی و مدرن باعث افزایش حرفهای بودن فروشگاه شما میشود. با کمک المنتور و بدون نیاز به نصب افزونه های اضافی، میتوانید این بخش حیاتی را کاملاً اختصاصی به روش میهن تم طراحی کنید.
سوالات متداول (FAQ)
۱. آیا برای ساخت صفحه سفارشات مشابه دیجیکالا نیاز به کدنویسی داریم؟
خیر، تمام مراحل با JetWooBuilder و المنتور و کدهای سفارشی که در اختیارتان قرار داده می شود ، انجام میشود و هیچ کدنویسی توسط شما لازم نیست.
۲. آیا این روش با همه قالبهای وردپرس سازگار است؟
بله، تا زمانی که از المنتور و JetWooBuilder پشتیبانی کنند، بدون مشکل کار خواهد کرد.
۳. آیا میتوان تبهای سفارشی بیشتری به صفحه سفارشات اضافه کرد؟
بله، با المنتور میتوانید تب های جدید برای وضعیت های مختلف سفارش ایجاد کنید.
4. مزیت این روش نسبت به افزونههای آماده چیست؟
سبکتر، سریعتر و کاملاً اختصاصی بودن. همچنین ظاهر صفحه سفارشات شما مشابه فروشگاههای بزرگ مثل دیجیکالا خواهد شد.