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

دوره تخصصی UI باالمنتور

طراحی حساب کاربری ووکامرس با با افزونه Woocommerce page builder

نویسنده : امیرمحمد معلمی
22 دیدگاه
آخرین بروزرسانی : 18 شهریور, 1400

اکثر کاربرانی که از فروشگاه ساز ووکامرس استفاده می کنند از ظاهر نا مرتب و بهم ریحته صفحه حساب کاربری خود رنج می برند به خصوص اگر از قالب hello elementor استفاده میکنند این مشکل بیشتر حس می شود و حتما باید چاره ای برای ظاهر این صفحه اندیشید. امروز قصد داریم با اسفاده از افزونه Woocommerce page builder صفحه حساب کاربری خود را طراحی کنیم . همچنین با استفاده از این افزونه میتواندی دیگر بخش های فروشگاه خود از قبیل صفحه تسویه حساب و سبد خرید خود را نیز سفارشی سازی کنید.

Share on twitter
Share on linkedin
Share on pinterest
Share on telegram
Share on whatsapp
Share on email

آنچه در این مطلب می خوانید

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

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

افزونه های مورد نیاز …

  1. المنتور پرو
  2. افزونه Jet Tabs
  3. افزونه Woocomerce page builder

شروع ساخت قالب

از صفحه پیشخوان وردپرس > قالب ها > افزودن را انتخاب و نوع قالب را روی section انتخاب و نام آن را داشبورد قرار می کنیم. و از بخش ابزارک های افزونه woocommerce page builder ابزارک My Account Dashboard را به این صفحه اضافه می کنیم. در صورت نیاز می توانید استایل ابزارک را نیز سفارشی سازی کنید.

مراحل قبل را تکرار کرده و اینبار در قسمت نام قالب نام آن را سفارشات یاداشت می کنیم، و حال از ابزارک My Account Orders استفاده می کنیم تا سفارشات مشتری را نمایش دهد. همچنین می توانیم برای بخش آدرس های مشتری و جزئیات حساب کاربری قالبی ساخته و آن ها را منتشر کنیم

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

ایجاد برگه سفارشی حساب کاربری

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

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

ابزار Tabs افزونه JetTabs

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

دقت کنید ما باید در حالت Content Type هر تب را بر روی Template  قرار دهیم.

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

فراخانی صفحه حساب کاربری

پس از اتمام طراحی از منو پیشخوان وردپرس > قالب ها > woocommerce bulder > در تب My Account در قسمت حساب کاربری من  قالب خود را انتخاب و تغییرات خود را ذخیره می کنیم.

استفاده از قالب های آماده افزونه Woocommerce page builder

همچنین میتوانید از قالب های آماده ای که در تب Demo این افزونه موجود می باشد نیز استفاده کنید، می توانید قالب خود را Import کنید و از استفاده از آن ها لذت ببرید.

افزونه سفارشی سازی صفحات ووکامرس

بیشتر بخوانید: طراحی حساب کاربری ووکامرس با قالب Single المنتور پرو