آموزش طراحی صفحه حساب کاربری در قالب وودمارت با المنتور

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

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

قالب وودمارت با قابلیت My Account Builder این امکان را فراهم می کند تا ساختار و ظاهر صفحه حساب کاربری را با استفاده از المنتور شخصی سازی کنید. به کمک این قابلیت می توانید منوی حساب کاربری، محتوای بخش های مختلف، فرم ورود و ثبت نام و حتی صفحه بازیابی رمز عبور را مطابق نیاز فروشگاه طراحی کنید.

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

چرا باید صفحه حساب کاربری در قالب وودمارت را شخصی سازی کنیم؟

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

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

با استفاده از قابلیت My Account Builder وودمارت می توانید ساختار این صفحه را متناسب با نیاز فروشگاه خود تغییر دهید.

مهم ترین مزایای شخصی سازی صفحه حساب کاربری عبارت اند از:

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

نکته مهم این است که شخصی سازی صفحه حساب کاربری فقط به تغییر ظاهر محدود نمی شود. اطلاعات مشتری، سفارش ها و امکانات مدیریتی باید همچنان از طریق ووکامرس و افزونه های مرتبط به درستی مدیریت شوند.

پیش نیازهای طراحی صفحه حساب کاربری با المنتور

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

۱. نصب و فعال بودن قالب وودمارت

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

وودمارت علاوه بر امکانات طراحی فروشگاه، ابزارهایی برای ساخت چیدمان اختصاصی بخش های مختلف ووکامرس در اختیار شما قرار می دهد.

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

۲. نصب و فعال بودن ووکامرس

افزونه ووکامرس وظیفه مدیریت حساب مشتریان، سفارش ها، دانلودها، اطلاعات صورتحساب و نشانی های ارسال را بر عهده دارد.

بنابراین، پیش از طراحی صفحه حساب کاربری باید ووکامرس نصب و تنظیم شده باشد.

همچنین بهتر است حداقل یک محصول آزمایشی و یک حساب کاربری مشتری برای بررسی عملکرد بخش های مختلف فروشگاه داشته باشید.

۳. نصب و فعال بودن المنتور

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

برای این کار، المنتور رایگان کافی است و نیازی به خرید Elementor Pro ندارید؛ زیرا ابزارهای موردنیاز از طریق قابلیت های اختصاصی وودمارت در اختیار شما قرار می گیرند.

البته باید المنتور برای ویرایش نوع محتوای Layouts فعال شده باشد.

۴. تنظیم برگه حساب کاربری در ووکامرس

ووکامرس برای نمایش امکانات حساب مشتری به یک برگه اختصاصی نیاز دارد.

برای بررسی این موضوع وارد پیشخوان وردپرس شوید و مسیر زیر را دنبال کنید:

ووکامرس ← پیکربندی ← پیشرفته

در قسمت تنظیم برگه ها، گزینه «صفحه حساب کاربری من» را بررسی کنید و مطمئن شوید برگه موردنظر انتخاب شده است.

این برگه باید دارای کد کوتاه زیر باشد:

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

۵. تنظیمات ورود و ثبت نام مشتریان

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

برای این کار وارد مسیر زیر شوید:

ووکامرس ← پیکربندی ← حساب ها و حریم خصوصی

در بخش ایجاد حساب کاربری، گزینه «اجازه به مشتریان برای ایجاد حساب کاربری در صفحه حساب کاربری من» را فعال کنید.

پس از ذخیره تنظیمات، فرم ثبت نام نیز برای کاربران خارج شده از حساب نمایش داده خواهد شد.

آشنایی با بخش های مختلف حساب کاربری در وودمارت

پیش از شروع طراحی بهتر است با ساختار صفحه حساب کاربری آشنا شوید.

در وودمارت سه نوع چیدمان مرتبط با حساب مشتری وجود دارد که هرکدام وظیفه متفاوتی دارند:

۱. My Account (حساب کاربری): این چیدمان برای زمانی است که مشتری وارد حساب خود شده است. در این بخش منوی حساب کاربری و محتوای قسمت های مختلف آن نمایش داده می شود.

۲. Login/Register (ورود و ثبت نام): این چیدمان برای نمایش فرم ورود و در صورت فعال بودن ثبت نام، فرم ایجاد حساب کاربری استفاده می شود.

۳. Lost Password (بازیابی رمز عبور): این چیدمان برای نمایش فرم بازیابی رمز عبور مشتریانی است که رمز عبور خود را فراموش کرده اند.

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

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

برای ساخت پنل کاربری اختصاصی، باید از بخش Layout Builder قالب وودمارت استفاده کنیم.

مرحله اول: ورود به بخش چیدمان های وودمارت

ابتدا وارد پیشخوان وردپرس شوید.

از منوی پیشخوان، وارد بخش «Layouts» یا «چیدمان ها» شوید.

در این قسمت تب های مختلفی برای طراحی بخش های گوناگون سایت وجود دارد. برای ساخت پنل مشتری باید تب مربوط به My Account را انتخاب کنید.

این بخش با ویرایش یک برگه معمولی وردپرس تفاوت دارد؛ زیرا چیدمان ایجادشده مستقیماً برای جایگزینی ساختار استاندارد حساب کاربری ووکامرس استفاده می شود.

مرحله دوم: ساخت چیدمان جدید حساب کاربری

پس از ورود به بخش My Account، روی گزینه افزودن چیدمان جدید کلیک کنید.

در این مرحله باید نوع چیدمان و نام آن را مشخص کنید.

برای مثال، می توانید نام «پنل کاربری اختصاصی فروشگاه» را انتخاب کنید.

یکی از امکانات مهم وودمارت در این قسمت، امکان تعیین شرایط نمایش چیدمان است.

برای صفحه حساب کاربری می توانید مشخص کنید که چیدمان برای تمام بخش های حساب مشتری استفاده شود یا فقط یک قسمت مشخص را تحت پوشش قرار دهد.

در این مرحله دو انتخاب مهم پیش روی شما قرار دارد:

• All endpoints: اعمال چیدمان روی تمام بخش های حساب کاربری.
• Endpoint اختصاصی: اعمال چیدمان فقط روی یک قسمت مشخص مانند سفارش ها، دانلودها یا اطلاعات حساب.

اگر قصد دارید یک پنل کاربری کامل طراحی کنید، بهتر است ابتدا چیدمان اصلی را برای تمام بخش ها ایجاد کنید.

سپس در صورت نیاز می توانید برای قسمت های خاص، چیدمان جداگانه بسازید.

پس از تعیین تنظیمات، یک طرح آماده انتخاب کنید یا از چیدمان خالی استفاده کنید و روی Create layout کلیک کنید.

مرحله سوم: ورود به ویرایشگر المنتور

پس از ایجاد چیدمان، وارد ویرایشگر آن شوید.

اگر المنتور به درستی برای ویرایش Layouts فعال شده باشد، محیط طراحی المنتور در اختیار شما قرار می گیرد.

در این محیط، علاوه بر ابزارهای معمول المنتور، عناصر اختصاصی وودمارت برای طراحی حساب کاربری نیز قابل استفاده هستند.

در طراحی پنل کاربری، دو عنصر اصلی اهمیت زیادی دارند:

• My Account Navigation: نمایش منوی بخش های مختلف حساب کاربری مشتری.
• My Account Content: نمایش محتوای بخش انتخاب شده از حساب کاربری.

این دو عنصر، ساختار اصلی پنل مشتری را تشکیل می دهند.

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

مرحله چهارم: طراحی ساختار اصلی پنل کاربری

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

یکی از چیدمان های مناسب، طراحی دو ستونه است.

در این ساختار، منوی حساب کاربری در یک ستون و محتوای بخش انتخاب شده در ستون دیگر نمایش داده می شود.

ساختار پیشنهادی می تواند شامل قسمت های زیر باشد:

• عنوان یا سربرگ پنل کاربری
• اطلاعات خوشامدگویی مشتری
• منوی دسترسی به بخش های حساب کاربری
• محتوای بخش انتخاب شده
• اطلاعات تکمیلی یا راهنمای استفاده از فروشگاه

برای طراحی این ساختار می توانید از کانتینرها و ابزارهای چیدمان المنتور استفاده کنید.

ابتدا یک ساختار دو ستونه ایجاد کنید. سپس عنصر My Account Navigation را در ستون مربوط به منو و عنصر My Account Content را در ستون محتوای اصلی قرار دهید.

در صورت تمایل می توانید یک بخش خوشامدگویی یا عنوان اختصاصی نیز در بالای پنل قرار دهید.

نکته مهم این است که هر دو عنصر اصلی باید در چیدمان حضور داشته باشند؛ حذف یکی از آن ها می تواند باعث شود منوی حساب کاربری یا محتوای بخش های مختلف به درستی نمایش داده نشود.

آشنایی با امکانات مختلف صفحه حساب کاربری

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

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

پیشخوان یا Dashboard اولین بخشی است که مشتری پس از ورود به حساب خود مشاهده می کند.

در این قسمت معمولاً پیام خوشامدگویی، نام مشتری و توضیح کوتاهی درباره امکانات حساب کاربری نمایش داده می شود.

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

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

سفارش ها

بخش سفارش ها یکی از کاربردی ترین قسمت های پنل کاربری است.

مشتری از طریق این بخش می تواند سفارش های ثبت شده خود را مشاهده کند و اطلاعات مربوط به آن ها را بررسی کند.

اطلاعاتی که معمولاً در این قسمت نمایش داده می شوند عبارت اند از:

• شماره سفارش
• تاریخ ثبت سفارش
• وضعیت سفارش
• مبلغ سفارش
• امکان مشاهده جزئیات
• امکان انجام عملیات مجاز روی سفارش

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

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

دانلودها

اگر فروشگاه شما محصولات دانلودی عرضه می کند، بخش دانلودها اهمیت زیادی خواهد داشت.

مشتریان از طریق این قسمت می توانند فایل های خریداری شده خود را مشاهده و دانلود کنند.

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

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

نمایش یا عدم نمایش آن به نوع محصولات و تنظیمات ووکامرس بستگی دارد.

نشانی ها

در بخش نشانی ها، مشتری می تواند اطلاعات مربوط به آدرس صورتحساب و آدرس ارسال سفارش را مدیریت کند.

این قسمت برای فروشگاه هایی که محصولات فیزیکی عرضه می کنند اهمیت زیادی دارد.

اطلاعاتی مانند موارد زیر در این بخش قابل مدیریت هستند:

• نام و نام خانوادگی
• کشور و استان
• شهر
• نشانی کامل
• کد پستی
• شماره تماس

در طراحی این قسمت، بهتر است امکان مشاهده و ویرایش نشانی ها به وضوح مشخص باشد.

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

جزئیات حساب

بخش جزئیات حساب برای مدیریت اطلاعات شخصی و ورود مشتری استفاده می شود.

در این قسمت مشتری می تواند اطلاعاتی مانند موارد زیر را ویرایش کند:

• نام
• نام خانوادگی
• نام نمایشی
• نشانی ایمیل
• رمز عبور فعلی
• رمز عبور جدید

طراحی این بخش باید ساده و قابل فهم باشد تا مشتری بتواند بدون سردرگمی اطلاعات خود را تغییر دهد.

همچنین، پیام های موفقیت و خطای مربوط به ذخیره اطلاعات باید به درستی نمایش داده شوند.

خروج از حساب کاربری

گزینه خروج به مشتری امکان می دهد نشست کاربری خود را خاتمه دهد.

این گزینه معمولاً در انتهای منوی حساب کاربری قرار می گیرد.

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

بخش های اضافی حساب کاربری

بسته به افزونه های نصب شده روی فروشگاه، ممکن است گزینه های دیگری نیز به منوی حساب کاربری اضافه شوند.

برای مثال:

• علاقه مندی ها
• مقایسه محصولات
• کیف پول
• پیگیری درخواست های پشتیبانی
• لیست انتظار محصولات
• پیگیری سفارش های ویژه

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

طراحی منوی حساب کاربری در المنتور

منوی حساب کاربری یکی از مهم ترین قسمت های پنل مشتری است؛ زیرا دسترسی به بخش های مختلف از طریق آن انجام می شود.

برای طراحی این قسمت، عنصر My Account Navigation را در ساختار صفحه قرار دهید.

این عنصر منوی استاندارد حساب کاربری ووکامرس را نمایش می دهد و گزینه های مربوط به بخش های مختلف را در اختیار مشتری قرار می دهد.

در طراحی منو به موارد زیر توجه کنید:

• انتخاب چیدمان عمودی یا افقی متناسب با ساختار صفحه
• تنظیم فاصله میان گزینه ها
• مشخص کردن وضعیت گزینه فعال
• استفاده از رنگ مناسب برای لینک ها
• تنظیم اندازه و ضخامت نوشته ها
• نمایش مناسب منو در موبایل

اگر از طراحی دو ستونه استفاده می کنید، معمولاً منوی عمودی در ستون کناری انتخاب مناسبی است.

همچنین بهتر است گزینه های مهم مانند سفارش ها و نشانی ها در موقعیت مناسبی قرار بگیرند تا مشتری سریع تر به آن ها دسترسی داشته باشد.

طراحی محتوای حساب کاربری

عنصر My Account Content وظیفه نمایش محتوای بخش انتخاب شده را بر عهده دارد.

برای مثال، هنگامی که مشتری روی گزینه سفارش ها کلیک می کند، اطلاعات سفارش های او در این قسمت نمایش داده می شود.

هنگام طراحی این بخش باید فضای کافی برای نمایش محتوای متغیر در نظر بگیرید.

برای مثال، جدول سفارش ها ممکن است در مقایسه با فرم ویرایش اطلاعات حساب به فضای بیشتری نیاز داشته باشد.

بنابراین، بهتر است عرض ستون محتوا به اندازه ای باشد که اطلاعات بدون فشردگی نمایش داده شوند.

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

آموزش طراحی فرم ورود و ثبت نام در وودمارت با المنتور

فرم ورود و ثبت نام با پنل حساب کاربری تفاوت دارد.

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

وودمارت برای این قسمت نیز چیدمان اختصاصی در اختیار شما قرار می دهد.

مرحله اول: ساخت چیدمان Login/Register

وارد پیشخوان وردپرس شوید و مسیر زیر را دنبال کنید:

Layouts ← Login/Register

روی افزودن چیدمان جدید کلیک کنید.

سپس یک نام مناسب مانند «فرم ورود و ثبت نام اختصاصی» برای آن انتخاب کنید.

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

مرحله دوم: طراحی فرم ورود و ثبت نام

پس از ایجاد چیدمان، وارد ویرایشگر المنتور شوید.

در این قسمت باید از عناصر اختصاصی ورود و ثبت نام وودمارت استفاده کنید.

عنصر Login برای نمایش فرم ورود مشتریان و ویجت ثبت نام برای نمایش فرم ایجاد حساب کاربری جدید استفاده می شود.

می توانید این دو فرم را در کنار یکدیگر یا در ساختاری جداگانه طراحی کنید.

برای مثال، یک طراحی دو ستونه ایجاد کنید که در یک ستون فرم ورود و در ستون دیگر فرم ثبت نام نمایش داده شود.

در طراحی این قسمت بهتر است موارد زیر را در نظر بگیرید:

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

توجه داشته باشید که نمایش فرم ثبت نام به فعال بودن قابلیت ایجاد حساب کاربری در تنظیمات ووکامرس بستگی دارد.

آموزش طراحی صفحه بازیابی رمز عبور

فراموش کردن رمز عبور یکی از مشکلاتی است که ممکن است برای مشتریان فروشگاه اتفاق بیفتد.

ووکامرس امکان بازیابی رمز عبور را فراهم می کند و وودمارت نیز اجازه می دهد ظاهر این بخش را به صورت اختصاصی طراحی کنید.

مرحله اول: ساخت چیدمان Lost Password

از پیشخوان وردپرس وارد بخش Layouts شوید.

سپس تب مربوط به Lost Password را انتخاب کنید و یک چیدمان جدید بسازید.

برای مثال، می توانید نام «صفحه بازیابی رمز عبور» را برای آن انتخاب کنید.

مرحله دوم: افزودن فرم بازیابی رمز عبور

پس از ایجاد چیدمان، وارد ویرایشگر المنتور شوید.

در این قسمت عنصر اختصاصی فراموشی رمز عبور را به صفحه اضافه کنید.

این عنصر فرم موردنیاز برای بازیابی رمز عبور را نمایش می دهد.

بهتر است طراحی این صفحه ساده باشد و فقط اطلاعات ضروری را از مشتری دریافت کند.

همچنین، پیام های مربوط به ارسال درخواست بازیابی رمز عبور و خطاهای احتمالی باید به درستی نمایش داده شوند.

طراحی ظاهر صفحه حساب کاربری در المنتور

پس از قرار دادن عناصر اصلی، نوبت به طراحی ظاهری پنل مشتری می رسد.

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

تنظیم عرض ستون ها

اگر از ساختار دو ستونه استفاده می کنید، بهتر است ستون منوی حساب کاربری عرض کمتری نسبت به بخش محتوای اصلی داشته باشد.

برای مثال، می توانید حدود ۲۵ تا ۳۰ درصد عرض را به منو و فضای باقی مانده را به محتوای اصلی اختصاص دهید.

البته این اندازه ها پیشنهادی هستند و باید متناسب با نوع طراحی و محتوای پنل تنظیم شوند.

انتخاب رنگ و پس زمینه

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

می توانید پس زمینه منوی حساب کاربری را با یک رنگ ملایم از بخش محتوا متمایز کنید.

همچنین، برای گزینه فعال منو، رنگ متفاوتی در نظر بگیرید تا مشتری متوجه شود در کدام قسمت قرار دارد.

تنظیم فونت و اندازه نوشته ها

خوانایی نوشته ها در پنل کاربری اهمیت زیادی دارد.

بهتر است از فونت یکسان با سایر قسمت های سایت استفاده کنید و اندازه نوشته ها را متناسب با نوع محتوا تنظیم کنید.

عنوان بخش ها، نام سفارش ها، وضعیت خرید و متن دکمه ها باید به راحتی قابل خواندن باشند.

طراحی دکمه ها و فرم ها

دکمه های مشاهده سفارش، ویرایش اطلاعات و ذخیره تغییرات باید ظاهر یکپارچه ای داشته باشند.

همچنین فیلدهای فرم ورود، ثبت نام و ویرایش اطلاعات حساب باید از نظر ارتفاع، حاشیه، فاصله و رنگ هماهنگ باشند.

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

تنظیم نمایش در موبایل

پنل حساب کاربری باید در نمایشگرهای کوچک نیز به درستی کار کند.

پس از اتمام طراحی، حالت موبایل و تبلت را در المنتور بررسی کنید.

به موارد زیر توجه داشته باشید:

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

اگر منوی عمودی در موبایل فضای زیادی اشغال می کند، می توانید با استفاده از تنظیمات واکنش گرای المنتور، چیدمان مناسب تری برای نمایشگرهای کوچک در نظر بگیرید.

طراحی اختصاصی برای بخش های مختلف حساب کاربری

یکی از امکانات کاربردی My Account Builder وودمارت، امکان تعریف چیدمان جداگانه برای قسمت های مختلف حساب کاربری است.

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

برای انجام این کار ابتدا یک چیدمان عمومی برای My Account ایجاد کنید و شرط نمایش آن را روی All endpoints قرار دهید.

سپس یک چیدمان جدید بسازید و هنگام ایجاد آن، Endpoint موردنظر را انتخاب کنید.

برای مثال می توانید چیدمان های جداگانه ای برای بخش های زیر داشته باشید:

• Orders: سفارش ها
• Downloads: دانلودها
• Addresses: نشانی ها
• Account details: جزئیات حساب
• Wishlist: علاقه مندی ها، در صورت فعال بودن افزونه مربوطه

پس از انتشار چیدمان ها، وودمارت چیدمان اختصاصی هر Endpoint را نسبت به چیدمان عمومی در اولویت قرار می دهد.

این قابلیت به شما کمک می کند بدون تغییر کل پنل کاربری، ظاهر قسمت های خاص را به صورت مستقل مدیریت کنید.

نکته مهم: اگر افزونه ای بخش جدیدی به حساب کاربری ووکامرس اضافه می کند، باید سازگاری آن با Layout Builder وودمارت بررسی شود. برخی افزونه ها برای نمایش محتوای خود به هوک های اختصاصی ووکامرس نیاز دارند.

تفاوت صفحه حساب کاربری با صفحه ورود و ثبت نام

این سه بخش از نظر عملکرد با یکدیگر متفاوت هستند و هنگام طراحی باید به این موضوع توجه داشته باشید.

بخش	کاربرد
حساب کاربری	مدیریت اطلاعات، سفارش ها و امکانات مشتری پس از ورود
ورود و ثبت نام	ورود مشتریان و ایجاد حساب کاربری جدید
بازیابی رمز عبور	دریافت درخواست تغییر یا بازیابی رمز عبور

به همین دلیل، وودمارت برای هرکدام چیدمان اختصاصی در نظر گرفته است.

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

تفاوت صفحه حساب کاربری با صفحه تسویه حساب

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

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

اما صفحه حساب کاربری برای مدیریت اطلاعات مشتری و مشاهده سوابق خریدهای قبلی استفاده می شود.

به طور خلاصه:

• سبد خرید: مدیریت محصولات انتخاب شده برای خرید.
• تسویه حساب: تکمیل اطلاعات و ثبت سفارش.
• حساب کاربری: مدیریت اطلاعات و سفارش های مشتری.

اگر قصد دارید سایر بخش های فروشگاه را نیز شخصی سازی کنید، پیشنهاد می کنیم آموزش های زیر را مطالعه کنید:

آموزش طراحی صفحه سبد خرید در قالب وودمارت با المنتور

آموزش طراحی صفحه تسویه حساب در قالب وودمارت با المنتور

بررسی عملکرد صفحه حساب کاربری پس از طراحی

پس از انتشار چیدمان، فقط به ظاهر پنل اکتفا نکنید. باید عملکرد تمام قسمت ها را با یک حساب کاربری آزمایشی بررسی کنید.

برای این کار مراحل زیر را انجام دهید:

۱. از سایت خارج شوید و صفحه حساب کاربری را باز کنید. بررسی کنید که فرم ورود و ثبت نام به درستی نمایش داده می شود.

۲. با یک حساب کاربری آزمایشی وارد شوید و مطمئن شوید پنل اختصاصی نمایش داده می شود.

۳. منوی حساب کاربری را بررسی کنید و روی گزینه های مختلف مانند سفارش ها، دانلودها و نشانی ها کلیک کنید.

۴. یک سفارش آزمایشی ثبت کنید و بررسی کنید که اطلاعات آن در بخش سفارش های حساب کاربری نمایش داده می شود.

۵. وارد بخش نشانی ها شوید و اطلاعات آدرس را ویرایش کنید.

۶. بخش جزئیات حساب را بررسی کنید و تغییرات آزمایشی را ذخیره کنید.

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

۸. لینک بازیابی رمز عبور را بررسی کنید و مطمئن شوید درخواست بازیابی به درستی انجام می شود.

۹. چیدمان اختصاصی را در موبایل و تبلت بررسی کنید.

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

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

نکات مهم برای بهبود تجربه کاربری پنل مشتریان

برای طراحی یک پنل کاربری حرفه ای، علاوه بر ظاهر باید به سهولت استفاده و دسترسی سریع مشتریان نیز توجه کنید.

منوی ساده و قابل فهم طراحی کنید. گزینه های اصلی مانند سفارش ها، نشانی ها و جزئیات حساب باید به راحتی پیدا شوند.

اطلاعات غیرضروری را نمایش ندهید. از قرار دادن بخش هایی که کاربردی برای مشتری ندارند خودداری کنید.

وضعیت سفارش ها را واضح نمایش دهید. مشتری باید بتواند بدون مراجعه به بخش های دیگر، وضعیت سفارش خود را متوجه شود.

امکان ویرایش اطلاعات را ساده کنید. تغییر نشانی، ایمیل و رمز عبور نباید برای مشتری پیچیده باشد.

طراحی موبایل را جدی بگیرید. منوها، جدول سفارش ها و فرم ها باید در تلفن همراه نیز به درستی نمایش داده شوند.

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

پیام های خطا و موفقیت را حفظ کنید. این پیام ها برای راهنمایی مشتری ضروری هستند و نباید صرفاً برای زیبایی ظاهری حذف شوند.

جمع بندی

طراحی صفحه حساب کاربری در قالب وودمارت با المنتور به شما کمک می کند پنل اختصاصی و حرفه ای برای مشتریان فروشگاه خود ایجاد کنید.

با استفاده از قابلیت My Account Builder می توانید منوی حساب کاربری، محتوای بخش های مختلف، فرم ورود و ثبت نام و صفحه بازیابی رمز عبور را متناسب با نیاز فروشگاه طراحی کنید.

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

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

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