آیلین وب

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

create woocommerce panel - ساخت پنل کاربری ووکامرس بدون کدنویسی با المنتور + فیلم آموزشی
ساخت پنل کاربری ووکامرس بدون کدنویسی با المنتور

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

woocommerce panel design aylinweb - ساخت پنل کاربری ووکامرس بدون کدنویسی با المنتور + فیلم آموزشی
پنل کاربری ساخته شده در این آموزش

آموزش ساخت پنل کاربری ووکامرس

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

برای این آموزش ما به افزونه های زیر نیاز داریم :

  1. افزونه المنتور (دانلود افزونه المنتور)
  2. افزونه Elementor Pro (دانلود افزونه المنتور پرو)

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

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

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

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

منظور از پنل کاربری ووکامرس چیه؟

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

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

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

woocommerce panel - ساخت پنل کاربری ووکامرس بدون کدنویسی با المنتور + فیلم آموزشی
سفارشی سازی پنل کاربری ووکامرس

سفارشی سازی پنل کاربری ووکامرس

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

کدهای استفاده شده در آموزش

.woocommerce-MyAccount-navigation {
display:none;
}

.woocommerce-account .woocommerce-MyAccount-content {
    width: 100%;
}

فیلم آموزش سفارشی سازی پنل کاربری ووکامرس

29 دیدگاه دربارهٔ «ساخت پنل کاربری ووکامرس بدون کدنویسی با المنتور + فیلم آموزشی»

  1. سلام
    بعد از اینکن کد کوتاه رو گذاشتی چه گزینه رو زدی که فرم اعمال شد من وقتی کد رو میزارم همون کد دوباره به نمایش در میاد وتغییری نمیکنه {woocommerce_my_account}

    1. سلام دوست عزیز
      از همون ابزارک کد کوتاه استفاده کردم و همین که کد کوتاه رو قرار بدید همون لحظه باید به نمایش در بیاد.
      البته همیشه کد کوتاه داخل [] قرار داده میشه ولی شما فرستادید این هست {woocommerce_my_account}
      شما به جای {} باید از [] استفاده کنین.

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

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

  3. وقتی با المنتور صحفه کاربری ووکامرس و ادیت میکنم و چند تا باکس و دکمه اضافه میکنم، توی صحفه ی وارد شدن ( لاگین) به سایت نمایش دادا میشه، در حالی که فقط باید توی حساب کاربری نمایش داده بشه نه توی صحفه ی ورود کاربر.
    برای رفع این مشکل باید چیکار کنم که وقتی کاربر وارد شد اون دیزاین و باکس هایی که دیزاین کردم نشون داده بشه؟
    فک نکنم راهی باشه ولی تنها یک راه به ذهنم رسید که یک برگه جدا درست کنم و اونجا رو صحفه ورود کاربران بزارم و بعد از لاگین ریدایرکت بشه به My-account که به نظرم روش بسیار جالبی به حساب نمیاد و جز باگ حساب میشه اگه روشی جز این هست ممنون میشم راهنمایی کنید.

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

  5. با سلام و وقت بخیر

    اول لازمه تا کلی تشکر کنم از آموزش خوبتون ، واقعا ممنون.
    من تمامیه مراحل رو پیش رفتم و تمام قسمت ها به درستی عمل میکند و فقط قسمتی که از inspect کلاس داشبورد را برداشتید کمی به مشکل برخورد کرده ام که هر چه اون کلاس و وارد میکنم توی صفحه با المنت که میزنم درسته ولی وقتی همون و قرار میدم توی CSS سفارشی عمل نمیکنه و به همین شکل باقی میمونه.
    ممنون میشم کمکم کنید. با تشکر
    http://uupload.ir/files/i1z_المنتور_پنل.jpg

  6. سلام خیلی ممنون از آموزش خوبتون بعد از چند وقت مشکلم حل شد.

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

    ممنونم

      1. سلام ببخشید نمیدونم چرا متنش نیومده بود :

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

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

        ممنون

  7. با عرض سلام و تشکر فراوان بابت اموزش خوب و یونیک تون … من خیلی وقت بود داشتم دنبال این اموزش میگشتم نتونستم مشاابه ش رو پیدا کنم حتی به صورت غیر رایگان اموزش صفحه دیگه تون هم عالیه که من از اون جا به این صفحه اومدم (ساخت دکمه با متن های متفاوت قبل و بعد ورود کاربر) ممنون از سایت خوبتون متاسفانه تا به امروز من نمیشناختم و امروز باهاش اشنا شدم و عضو شدم …فوق العاده س
    فقط چند مورد هست هم سوال و هم پیشنهاد اگر التفات بفرمایید:
    اولا بعد اینکه صفحه رو ساختید و لینک ها هم کپی کردید ، دیگه چه احتیاجی به اون سکشن اولیه هست؟ آیا میشه حذفش کرد؟اگر نمیشه آیا میشه از دید خارجش کرد؟ مثلا در قسمت واکنشگر از دید هر سه دستگاه (موبایل و تبلت و دسکتاپ) خارجش کرد یا رنگ متون رو هم رنگ پس زمینه کرد که دیده نشه ..چون دیگه اون اضافه هست …
    دوم در قسمت ویرایش حساب کاربری اگر بخوایم یک قسمت (مثلا شماره تماس ) که در پیش فرض حساب ووکامرس نیست ، اضافه کنیم آیا امکان پذیر هست؟ اگه روشی داره میشه توضیح بدید؟
    سوم : آیا امکان داره سفارشی سازی صفحه لاگین رو (یعنی قبل اینکه کاربر به حسابش وارد بشه ) توضیح بدید…چون مسائل امنیتی هم داره اگه بتونیم اونجا یک کپچا قرار بدیم یا دیزاینش رو سفارشی کنیم خیلی خوب میشه
    چهارم پیشنهاد هست اگه امکان داره آموزش مشابهی برای ویرایش سبد خرید و برگه تسویه حساب هم قرار بدید ..قاعدتا چون روش یکسان هست لازم به تکرار مطالب نیست ، فقط کد هاش و نکاتش رو بفرمایید فکر کنم کافی باشه
    در پایان باز هم از آموزش خوبتون تشکر میکنم .

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

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

    ممنون

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

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

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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

ساخت استایل منوی اپلیکیشن موبایل

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

قالب Unik | قالب وردپرس شرکتی و خلاقانه (رایگان!)

قالب Unik | قالب وردپرس

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

قالب Alaska | قالب وردپرس هاستینگ (اورجینال و فارسی)

قالب Alaska | قالب وردپرس

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

قالب Amax | قالب وردپرس چندمنظوره خلاقانه (رایگان!)

قالب Amax | قالب وردپرس

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

مطالب داغ
اسکرول به بالا
طراحی انواع سایت
طراحی انواع سایت با قیمت بسیار ارزان!