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

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email
اشتراک گذاری در print
طراحی حساب کاربری ووکامرس
پخش ویدیو

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

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

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

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

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

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

تب پیشخوان

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تب آدرس های من

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

045-microphone

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

013-globe

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

035-essay

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

امتیاز دهید

اشتراک گذاری

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

آخرین مقالات

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

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

برچسب ها

لینک کوتاه

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

فهرست مطالب

Avatar
محمد در 15:05

خوب افزونه تیکت که بشه وارد قالب المنتور کرد وجود داره ؟؟ یعنی ابزارکش توی المنتور میاد؟!

پاسخ
المنتور فارسی
المنتور فارسی در 15:31

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

پاسخ
Avatar
محمد در 12:08

با سلام ؛

ببخشید اگر بخواهیم سیستم تیکت گذاری هم روی تب های المنتور داشته باشیم باید چی کار کنیم؟؟

پاسخ
المنتور فارسی
المنتور فارسی در 12:16

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

پاسخ
رضا
رضا در 19:15

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

پاسخ
المنتور فارسی
المنتور فارسی در 19:47

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

پاسخ
Avatar
majazi در 17:25

سلام من افزونه‌های المنتور پرو و WooLentor Pro را گرفتم آیا با این‌ها هم می‌شود این آموزش را انجام داد یا حتما باید WooCommerce Page Builder و jet tabs را هم داشت؟

پاسخ
المنتور فارسی
المنتور فارسی در 01:09

با سلام
برای استفاده از این آموزش حتما باید افزونه WooCommerce Page Builder و jet tabs استفاده شود.

پاسخ
erfan8127
erfan8127 در 15:13

خیر من پیام ورود را سفارشی سازی نکردم

پاسخ
Avatar
عرفان در 11:10

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

پاسخ
المنتور فارسی
المنتور فارسی در 11:41

آیا پیام ورود هم سفارسی سازی می کنید؟

پاسخ
Avatar
عرفان در 10:07

سلام من بخش ثبت نام و ورودش را با این افرونه WooCommerce Page Builder را درست کردم موقعی که ثبت نام می کنی پیام موفقیت ثبت نام نمی ده قبلا موقعی که ثبت نام می کردی می گفت ثبت نام شما با موفقیت انجام شد .

پاسخ
المنتور فارسی
المنتور فارسی در 10:33

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

پاسخ
عرفان
عرفان در 19:15

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

پاسخ
المنتور فارسی
المنتور فارسی در 22:01

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

پاسخ
amin valipoor
amin valipoor در 13:52

سلام افزونه WooCommerce Page Builder با افزونه jet woo builder فرق داره؟
و این که آیا میشه با jet woo builder همین کار رو کرد؟
با تشکر

پاسخ
المنتور فارسی
المنتور فارسی در 17:54

با سلام
این 2 افزونه با هم متفاوت هستند و امکان استفاده از افزونه Jet Woo Builder در این آموزش نیست.

پاسخ
Avatar
محمد طاهری در 11:07

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

پاسخ
المنتور فارسی
المنتور فارسی در 13:49

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

پاسخ
Avatar
رضا در 08:58

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

پاسخ
المنتور فارسی
المنتور فارسی در 11:41

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

پاسخ
Avatar
masoudi.hamed1364@gmail.com در 15:42

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

پاسخ
المنتور فارسی
المنتور فارسی در 18:33

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

پاسخ
Avatar
امیرمهدی شریفی در 20:12

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

پاسخ
المنتور فارسی
المنتور فارسی در 20:15

با سلام
منظور افزونه ای که داخل آموزش توضیح داده شده؟ افزونه WooCommerce Page Builder هست.

پاسخ
Avatar
علی در 11:10

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

پاسخ
المنتور فارسی
المنتور فارسی در 12:47

با سلام
با استفاده از افزونه های جانبی مثل دکان میتونید این کارو کنید.

پاسخ
Avatar
rojan در 11:24

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

پاسخ
المنتور فارسی
المنتور فارسی در 11:58

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

پاسخ
وحید
وحید در 19:39

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

پاسخ
المنتور فارسی
المنتور فارسی در 11:39

با سلام
با استفاده از افزونه MyCred می تونید سیستم امتیاز دهی ایجاد کنید.

پاسخ
Avatar
hamed hosseini در 10:33

سلام چه افزونه ای برای نمایش تاریخ ثبت نام در المنتور مناسبه؟

پاسخ
المنتور فارسی
المنتور فارسی در 11:45

با سلام
برای این کار می تونید کد زیر را در فایل function.php قالب قرار داده و سپس از شورت کد [user_registered_dashboard] برای نمایش تاریخ ثبت نام استفاده کنید.


// Register Date Shortcode
function register_date_dashboard() {
$user_id = get_current_user_id();
$udata = get_userdata( $user_id );
$registered = $udata->user_registered;
printf(date_i18n( "j F Y", strtotime( $registered ) ) );
}
add_shortcode('user_registered_dashboard', 'register_date_dashboard');

پاسخ
Avatar
احسان در 17:22

سلام
ممنون از آموزش عالی شما
در قسمت ثبت آدرس وقتی رو ویرایش آدرس کلیک می کنم یا اتفاقی نمیفته یعنی صفحه رفرش میشه یا ارور میده اشکال از کجا میتونه باشه لطفا راهنمایی کنید
متن ارور اینه
Warning: include(): Filename cannot be empty in G:\xampp\htdocs\110\wp-content\plugins\woocommerce\includes\wc-template-functions.php on line 51

Warning: include(): Failed opening ” for inclusion (include_path=’G:\xampp\php\PEAR’) in G:\xampp\htdocs\110\wp-content\plugins\woocommerce\includes\wc-template-functions.php on line 51

پاسخ
المنتور فارسی
المنتور فارسی در 18:31

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

پاسخ
Avatar
mrm2336 در 02:01

سلام
چطور می شه تاریخ ثبت نام کاربر هم به قسمت اول یعنی پیشخوان اضافخه کرد؟
دقیق همانند حساب کاربری سایت خود شما

پاسخ
المنتور فارسی
المنتور فارسی در 11:08

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

پاسخ
Avatar
آسو دوچشمه در 00:33

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

پاسخ
المنتور فارسی
المنتور فارسی در 00:35

با سلام
لطف دارید. ممنون از همراهی

پاسخ
HAYDRA HIROY
HAYDRA HIROY در 14:10

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

پاسخ
المنتور فارسی
المنتور فارسی در 19:02

با سلام
عذر خواهی می کنم میشه لطفا واضح تر توضیح بدید ؟

پاسخ
Avatar
asg.arz در 15:16

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

پاسخ
المنتور فارسی
المنتور فارسی در 15:19

سلامت باشید.
ممنون از همراهی

پاسخ
ابوالفضل خسروی خرم
ابوالفضل خسروی خرم در 02:34

سلام ممنونم از آموزشتون
یه سوال چطوری میتونیم نمایش سفارش رو هندل کنیم با این روش؟

پاسخ
المنتور فارسی
المنتور فارسی در 11:05

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

پاسخ
علی اسدزاده
علی اسدزاده در 20:57

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

پاسخ
المنتور فارسی
المنتور فارسی در 21:01

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

پاسخ
Shayanfp
Shayanfp در 23:20

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

پاسخ
المنتور فارسی
المنتور فارسی در 01:36

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

پاسخ

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

نیاز به کمک دارید؟ پیام دهید