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

Share

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email
پخش ویدیو

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

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

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

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

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

طراحی بخش های داخلی حساب کاربری

تب پیشخوان

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

طراحی صفحه حساب کاربری ووکامرس

در اینجا بدون هیچ تغییری در صفحه، ویجت های مورد نیاز را در صفحه قرار می دهیم.

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

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

طراحی صفحه حساب کاربری ووکامرس

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

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

طراحی صفحه حساب کاربری ووکامرس

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

طراحی صفحه حساب کاربری ووکامرس

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

طراحی صفحه حساب کاربری ووکامرس

معرفی فیلد های اطلاعات کاربر:

آیدی: نمایش شناسه کاربر

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

نام کابری: نمایش نام کاربری که هنگام ثبت نام کاربر تعریف کرده است.

نام کوچک: نمایش نام کوچک کاربر

نام خانوادگی: نمایش نام خانوداگی کاربر

بیوگرافی: نمایش بیوگرافی کاربر (ثبت شده در پروفایل کاربری)

ایمیل: نمایش ایمیل کاربر

نام کوچک: نمایش وب سایت کاربر

متا کاربر: ورود کلیک متا سفارشی (قابل استفاده از افزونه های جانبی مانند ACF)

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

طراحی صفحه حساب کاربری ووکامرس

 

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

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

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

فیلد جایگزین در واقع محتوای پیش فرضی را زمانی که اطلاعات کاربر موجود نباشد نمایش میدهد. برای مثال اگر در فیلد جایگزین abc@elementorfa.ir را قرار دهیم، اگر ایمیل کاربر موجود نباشد abc@elementorfa.ir به صورت پیش فرض قرار میگیرد.

طراحی صفحه حساب کاربری ووکامرس

در ادامه نام کاربری و نام نمایش را هم به پیشخوان اضافه می کنیم.

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

طراحی صفحه حساب کاربری ووکامرس

تب سفارش های من

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

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

آموزش المنتور

حالا در اینجا به ویجت های افزونه WooCommerce Page Builder نیاز داریم.ویجت سفارش های حساب من را در زیر ویجت جداکننده قرار داده و تنظیمات استایل ویجت را انجام دهید. این ویجت تمامی سفارشات کاربر را به صورت مجزا نمایش میدهد.

آموزش المنتور

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

آموزش المنتور

تب آدرس های من

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

تب دانلود های من

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

آموزش المنتور

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

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

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

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

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

در گزینه انتخاب محتوا، قالب طراحی شده با هر بخش را قرار دهید.

آموزش المنتور

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

آموزش المنتور

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

مدرس :
محمدرضا احمدزاده

سطح آموزش :
پیشرفته

زمان آموزش :
13 دقیقه

دانلود ویدئو :
کلیک کنید

امتیاز دهید

اشتراک گذاری

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email

آخرین مقالات

آخرین محصولات

آخرین محصولات

برچسب ها

لینک کوتاه

https://elementorfa.ir/?p=14896

Avatar
Shayanfp در 11:20 ب.ظ

سلام
خیلی عالی و جامع.
فقط یک سوال: چطور می‌توانیم نسخه رو نمایش بدهیم؟
خیلی ممنون

پاسخ
المنتور فارسی
المنتور فارسی در 1:36 ق.ظ

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

پاسخ

نظرات ارزشمند خود را به اشتراک بگذارید

ده − ده =

نیاز به کمک دارید؟ پیام دهید
  • بازگشت به کتابخانه