آموزش ساخت فروشگاه با المنتور (قسمت سوم)

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

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

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

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

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

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

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

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

شما میتوانید از تب استایل به این جدول هم فونت اضافه کنید و هم به آن رنگ اضافه کنید، استایل اصلی این جدول از خود قالب شکل میگیرد و استایل پیش فرض قالب را به نمایش میگذارد اگر میخواهید به کلی آنرا تغییر دهید باید به زبان برنامه نویسی CSS مسلط باشید و بتوانید به این جدول استایل اضافه کنید. (آموزش CSS)

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

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

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

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

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

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

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

طراحی صفحه سفارش در المنتور

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

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

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

فرم تخفیف پرداخت:

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

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

صورت حساب فرم پرداخت

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

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

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

توضیحات اضافی فرم پرداخت

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

 توضیحات اضافی فرم پرداخت

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

بازبینی سفارش پرداخت

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

پرداخت تسویه حساب

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

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

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

ویرایش فرم سفارش در ووکامرس

همانطور که میدانید ووکامرس یک فرم پیش فرض برای ثبت سفارش دارد و این امکان را قرار نداده که بتوانید از طریق خود ووکامرس فرم را تغییر دهید، شما میتوانید برای تغییر این فرم از افزونه Checkout Manager for WooCommerce استفاده کنید، این افزونه به شما امکان حذف یا اضافه کردن فیلد های سفارش ووکامرس را خواهد داد و شما خواهید توانست که این فرم را به صورت کامل برای سایت خود شخصی سازی کنید.

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

نتیجه گیری:

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

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