آموزش ساخت پیشخوان حساب کاربری ووکامرس با المنتور (داشبورد)

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

چرا باید پیشخوان حساب کاربری ووکامرس را سفارشی کنیم؟

به‌صورت پیش‌فرض، ووکامرس یک صفحه ساده برای حساب کاربری نمایش می‌دهد که جذابیت چندانی ندارد. این موضوع باعث می‌شود کاربر به‌راحتی نتواند به اطلاعات موردنیاز خود دسترسی پیدا کند.
با استفاده از جت ووبیلدر و المنتور می‌توانید:

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

مراحل ساخت پیشخوان حساب کاربری ووکامرس با المنتور

۱. ایجاد قالب اختصاصی پیشخوان

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

۲. طراحی داشبورد با المنتور

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

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

۳. استفاده از شورتکدهای سفارشی

شما میتوانید برای نمایش وضعیت پرداخت سفارش‌ها (در انتظار پرداخت، در حال پردازش، تکمیل‌شده، لغو شده) در صفحه پیشخوان حساب کاربری ووکامرس، از نمونه کدهای کوتاه استفاده کنید.

نمونه کد برای نمایش وضعیت سفارش‌ها:

// شورتکد وضعیت سفارش ووکامرس
echo wc_get_customer_order_count( get_current_user_id() );

۴. استایل‌دهی پیشخوان حساب کاربری ووکامرس مشابه دیجی‌کالا

برای اینکه طراحی شما شبیه دیجی‌کالا شود:

• هر وضعیت سفارش را در یک کارت رنگی نمایش دهید. مثلاً سفارش‌های در انتظار پرداخت به رنگ نارنجی، سفارش‌های تکمیل‌شده به رنگ سبز.
• از آیکن‌ها برای زیباتر شدن کارت‌ها استفاده کنید.
• فونت و رنگ‌ها را با هویت برند خود هماهنگ کنید.
• برای جذاب‌تر شدن، می‌توانید با CSS سفارشی کمی انیمیشن یا هاور به کارت‌ها اضافه کنید.

نمونه CSS برای استایل کارت‌ها:

.dashboard-card {
  padding: 20px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}
.dashboard-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

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

۵. اتصال قالب پیشخوان به ووکامرس

بعد از ذخیره طراحی، باید این قالب را به عنوان اندپوینت پیشخوان در ووکامرس تنظیم کنید:

• وارد مسیر ووکامرس > پیکربندی > جت ووبیلدر شوید.
• در بخش اندپوینت‌ها (Endpoints)، قالبی که برای پیشخوان ساختید را انتخاب کنید.
• تغییرات را ذخیره کنید.

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

نکات حرفه‌ای برای طراحی داشبورد کاربری

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

جمع‌بندی

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

سوالات متداول (FAQ)