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

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

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

به مانند سایر روش‌ها و ترفندهای موجود در اینترنت برای آن که بتوانید مراحل را به درستی انجام دهید نیاز به داشتن مقدمات مختلف بوده که شامل موارد زیر است:

• افزونه المنتور پرو
• افزونه ووکامرس
• افزونه Jet Tabs
• افزونه WooCommerce Page Builder

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

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

تب پیشخوان

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

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

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

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

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

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

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

توجه داشته باشید فیلدهای اطلاعات کاربر شامل موارد زیر است:

• آیدی
  این بخش شامل نمایش شناسه کاربر می‌شود
• نام نمایش
  نمایش دادن نامی که خود کاربر در بخش پروفایل تعیین کرده است
• نام کاربری
  نمایش نامی که کاربر در هنگام ثبت نام درج کرده است
• نام کوچک
  نشان دادن نام کوچک کاربر
• نام خانوادگی
  نمایش نام خانوادگی فرد
• بیوگرافی
  نشان دادن بیوگرافی نگارش شده در پروفایل
• ایمیل
  نمایش ایمیل تعیین شده در بخش پروفایل
• نام وب سایت
  نمایش وب سایت کاربر
• متا کاربر

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

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

شما پس از انتخاب بخش پیشرفته، گزینه‌های قبل و بعد را می‌توانید مشاهده و جایگزین کنید. در فیلد قبل، قرارگیری متن و کد HTML بلامانع است. این گزینه قبل از ایمیل نمایش داده می‌شود. در فیلد بعد می‌توانید محتواهای مختلف را بعد از ایمیل قرار دهید. فیلد جایگزین نمایش اطلاعات پیش فرض کاربر در غیاب وی است. به عنوات مثال اگر در فیلد جایگزین [email protected] را قرار دهید اگر ایمیل کاربر موجود نباشد عبارت فوق به صورت پیش فرض قرار می‌گیرد.

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

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

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

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

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

تب آدرس‌های من

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

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

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

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

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

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

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