بخش‌های این ویدیو
۳ بخشآموزش طراحی صفحه تسویه حساب در قالب وودمارت با المنتور
میهن تمصفحه تسویه حساب یکی از مهم ترین بخش های هر فروشگاه اینترنتی است؛ زیرا مشتری در این مرحله اطلاعات موردنیاز برای ثبت سفارش را وارد می کند، روش ارسال را انتخاب می کند و پرداخت خود را انجام می دهد. طراحی مناسب این صفحه می تواند فرایند خرید را ساده تر کند و به افزایش اعتماد مشتریان و تکمیل سفارش ها کمک کند.
قالب وودمارت امکاناتی برای ساخت چیدمان اختصاصی صفحه تسویه حساب در اختیار شما قرار می دهد. با استفاده از این قابلیت و صفحه ساز المنتور، می توانید ظاهر فرم اطلاعات مشتری، خلاصه سفارش، روش های ارسال و بخش پرداخت را متناسب با نیاز فروشگاه خود طراحی کنید.
در این آموزش، نحوه ساخت صفحه تسویه حساب اختصاصی در قالب وودمارت با المنتور را بررسی می کنیم و با بخش های مختلف این صفحه، تنظیمات ظاهری و نکات مهم برای بهبود تجربه خرید آشنا می شویم.
چرا باید صفحه تسویه حساب در قالب وودمارت را شخصی سازی کنیم؟
صفحه تسویه حساب، آخرین مرحله اصلی پیش از ثبت نهایی سفارش است. اگر مشتری در این مرحله با فرم های پیچیده، اطلاعات نامرتب یا دکمه های نامشخص روبه رو شود، ممکن است از ادامه خرید منصرف شود.
با استفاده از امکانات قالب وودمارت می توانید چیدمان این صفحه را متناسب با ساختار فروشگاه خود تغییر دهید و اطلاعات ضروری را در موقعیت مناسبی قرار دهید.
مهم ترین مزایای شخصی سازی صفحه تسویه حساب عبارت اند از:
- طراحی اختصاصی: هماهنگ کردن ظاهر فرم تسویه حساب با رنگ ها، فونت ها و سبک طراحی فروشگاه.
- بهبود تجربه کاربری: مرتب کردن اطلاعات مشتری، روش های ارسال و بخش پرداخت برای ساده تر شدن فرایند خرید.
- مدیریت چیدمان فرم: تنظیم محل نمایش اطلاعات صورتحساب، اطلاعات ارسال و خلاصه سفارش.
- افزایش اعتماد مشتری: نمایش واضح اطلاعات سفارش، مبلغ قابل پرداخت و روش های پرداخت.
- نمایش مناسب در موبایل: ایجاد چیدمانی متناسب با نمایشگرهای کوچک برای مشتریانی که با تلفن همراه خرید می کنند.
توجه داشته باشید که شخصی سازی ظاهر صفحه به تنهایی کافی نیست. فرم ها، محاسبات سفارش، روش های ارسال و درگاه پرداخت نیز باید بدون مشکل کار کنند.
پیش نیازهای طراحی صفحه تسویه حساب با المنتور
پیش از شروع طراحی، بهتر است از آماده بودن ابزارهای موردنیاز مطمئن شوید.
۱. نصب و فعال بودن قالب وودمارت
برای استفاده از قابلیت های اختصاصی این قالب، باید وودمارت روی سایت وردپرسی شما نصب و فعال باشد.
وودمارت برای بخش های مختلف فروشگاه، از جمله سبد خرید و تسویه حساب، امکاناتی برای ایجاد چیدمان اختصاصی ارائه می دهد.
اگر هنوز با تنظیمات و امکانات این قالب آشنا نیستید، پیشنهاد می کنیم ابتدا دوره آموزش قالب وودمارت را مشاهده کنید.
۲. نصب و فعال بودن ووکامرس
افزونه ووکامرس وظیفه مدیریت سفارش ها، اطلاعات مشتریان، هزینه های ارسال، محاسبه مبلغ نهایی و ارتباط با درگاه های پرداخت را بر عهده دارد.
بنابراین، پیش از طراحی صفحه تسویه حساب باید ووکامرس نصب و تنظیم شده باشد و محصولات فروشگاه نیز به درستی تعریف شده باشند.
۳. نصب و فعال بودن المنتور
در این آموزش از المنتور برای طراحی چیدمان صفحه استفاده می کنیم. بنابراین، باید این صفحه ساز روی سایت نصب و فعال باشد.
همچنین لازم است تنظیمات المنتور به گونه ای باشد که بتوانید چیدمان های مربوط به قالب وودمارت را ویرایش کنید.
۴. آماده بودن تنظیمات خرید و پرداخت
پیش از طراحی صفحه، بهتر است تنظیمات اصلی ووکامرس را بررسی کنید؛ از جمله:
- تنظیم کشور و موقعیت فروشگاه
- تعریف روش های ارسال
- تنظیم فیلدهای اطلاعات مشتری
- پیکربندی درگاه پرداخت
- تعیین برگه تسویه حساب در تنظیمات ووکامرس
این موارد کمک می کنند پس از طراحی، صفحه تسویه حساب را با شرایط واقعی فروشگاه آزمایش کنید.
آموزش ساخت صفحه تسویه حساب در وودمارت با المنتور
برای طراحی صفحه تسویه حساب اختصاصی، باید از بخش چیدمان های قالب وودمارت استفاده کنیم. این بخش با برگه های معمولی وردپرس تفاوت دارد؛ زیرا چیدمان ایجادشده برای جایگزینی قسمت مشخصی از فروشگاه به کار می رود.
مرحله اول: ورود به بخش چیدمان های وودمارت
ابتدا وارد پیشخوان وردپرس شوید.
از منوی پیشخوان، بخش «چیدمان ها» را باز کنید. در این قسمت می توانید چیدمان های اختصاصی مربوط به بخش های مختلف سایت را مدیریت کنید.
برای طراحی صفحه تسویه حساب، باید بخش مربوط به فرم پرداخت یا Checkout را پیدا کنید.
نام دقیق گزینه ها ممکن است با توجه به نسخه قالب و زبان نصب شده متفاوت باشد.
مرحله دوم: ساخت چیدمان جدید تسویه حساب
پس از ورود به بخش مربوط به تسویه حساب، گزینه افزودن چیدمان جدید را انتخاب کنید.
در این مرحله، باید نوع چیدمان را مشخص کرده و نام مناسبی برای آن در نظر بگیرید.
برای مثال، می توانید نام «تسویه حساب اختصاصی فروشگاه» را انتخاب کنید تا در آینده هنگام مدیریت چیدمان ها به راحتی آن را پیدا کنید.
اگر قالب امکان استفاده از طرح های آماده را در این بخش فراهم کرده است، می توانید یکی از آن ها را انتخاب کنید. در غیر این صورت، ساخت چیدمان خالی به شما آزادی عمل بیشتری می دهد.
پس از انجام تنظیمات اولیه، چیدمان را ایجاد کنید.
مرحله سوم: ورود به ویرایشگر المنتور
پس از ایجاد چیدمان، وارد محیط ویرایش آن شوید.
اگر المنتور به درستی برای ویرایش چیدمان های وودمارت تنظیم شده باشد، می توانید از این صفحه ساز برای طراحی ساختار موردنظر خود استفاده کنید.
در محیط ویرایش، عناصر اختصاصی مرتبط با وودمارت و ووکامرس در اختیار شما قرار می گیرند. این عناصر برای نمایش اطلاعات واقعی سفارش و فرم تسویه حساب استفاده می شوند.
به همین دلیل، لازم نیست اطلاعات مشتری یا مبلغ سفارش را به صورت دستی وارد کنید؛ اطلاعات موردنیاز باید از طریق عناصر و فرایندهای مربوط به ووکامرس مدیریت شوند.
مرحله چهارم: طراحی ساختار اصلی صفحه
پیش از افزودن عناصر، بهتر است ساختار کلی صفحه را مشخص کنید.
یکی از چیدمان های مناسب برای صفحه تسویه حساب، ساختار دو ستونه است. در این ساختار، فرم اطلاعات مشتری در یک ستون و خلاصه سفارش در ستون دیگر قرار می گیرد.
ساختار پیشنهادی صفحه می تواند شامل بخش های زیر باشد:
- عنوان صفحه تسویه حساب
- فرم اطلاعات صورتحساب مشتری
- اطلاعات ارسال سفارش، در صورت نیاز
- انتخاب روش ارسال
- خلاصه محصولات و هزینه های سفارش
- انتخاب روش پرداخت
- بخش قوانین و شرایط خرید، در صورت نیاز
- دکمه ثبت سفارش
- پیام ها و اعلان های ووکامرس
می توانید با استفاده از بخش ها یا کانتینرهای المنتور، ساختار موردنظر را ایجاد کنید و عناصر اختصاصی تسویه حساب را در محل مناسب قرار دهید.
نکته مهم این است که تمام بخش های ضروری فرایند خرید باید حفظ شوند. حذف یا جابه جایی نامناسب عناصر ممکن است باعث اختلال در ثبت سفارش شود.
آشنایی با بخش های مختلف صفحه تسویه حساب
پس از ایجاد ساختار اصلی، باید عناصر موردنیاز را در محل مناسب قرار دهید. هر بخش وظیفه مشخصی دارد و باید با توجه به نیاز فروشگاه تنظیم شود.
فرم اطلاعات صورتحساب مشتری
فرم اطلاعات صورتحساب یکی از اصلی ترین قسمت های صفحه تسویه حساب است.
در این بخش، اطلاعات موردنیاز برای ثبت سفارش از مشتری دریافت می شود. این اطلاعات با توجه به تنظیمات فروشگاه و نوع محصولات می توانند شامل موارد زیر باشند:
- نام و نام خانوادگی
- کشور یا منطقه
- استان و شهر
- نشانی
- کد پستی
- شماره تماس
- نشانی ایمیل
همه این فیلدها برای تمام فروشگاه ها ضروری نیستند. برای مثال، فروشگاه هایی که محصولات مجازی یا فایل های دانلودی عرضه می کنند، ممکن است به اطلاعات کمتری نیاز داشته باشند.
بنابراین، بهتر است فقط اطلاعات موردنیاز برای پردازش سفارش را دریافت کنید.
در طراحی این بخش، به ترتیب فیلدها، اندازه ورودی ها، فاصله میان آن ها و مشخص بودن فیلدهای اجباری توجه داشته باشید.
فرم اطلاعات ارسال سفارش
اگر محصولات فروشگاه شما به صورت فیزیکی ارسال می شوند، ممکن است لازم باشد اطلاعات مربوط به نشانی تحویل سفارش نیز از مشتری دریافت شود.
ووکامرس امکان مدیریت اطلاعات ارسال را فراهم می کند و نحوه نمایش این بخش به تنظیمات فروشگاه و گزینه های انتخاب شده توسط مشتری بستگی دارد.
هنگام طراحی صفحه، مطمئن شوید که فیلدهای مربوط به ارسال در صورت نیاز نمایش داده می شوند و مشتری می تواند اطلاعات موردنیاز را به درستی وارد کند.
اگر فروشگاه شما فقط محصولات مجازی می فروشد، ممکن است نیازی به نمایش اطلاعات ارسال نداشته باشید.
خلاصه سفارش و مبلغ قابل پرداخت
خلاصه سفارش به مشتری کمک می کند پیش از پرداخت، محصولات انتخاب شده و هزینه های مربوط به آن ها را بررسی کند.
این بخش معمولاً شامل اطلاعات زیر است:
- نام محصولات سفارش
- تعداد محصولات
- قیمت محصولات
- تخفیف های اعمال شده
- هزینه ارسال، در صورت وجود
- مالیات، در صورت فعال بودن
- مبلغ نهایی سفارش
اطلاعات این قسمت باید به صورت پویا از ووکامرس دریافت شوند تا با تغییر محصولات، کد تخفیف یا روش ارسال، مبلغ سفارش نیز متناسب با شرایط جدید به روزرسانی شود.
بهتر است خلاصه سفارش در محلی قرار بگیرد که مشتری به راحتی بتواند آن را مشاهده کند.
همچنین، مبلغ نهایی باید خوانا و قابل تشخیص باشد تا مشتری پیش از ثبت سفارش، هزینه پرداختی خود را به وضوح ببیند.
روش های ارسال سفارش
در فروشگاه هایی که محصولات فیزیکی عرضه می کنند، انتخاب روش ارسال یکی از مراحل مهم تسویه حساب است.
روش های موجود و هزینه هرکدام به تنظیمات حمل ونقل ووکامرس، نشانی مشتری و شرایط سفارش بستگی دارند.
اگر چند روش ارسال در فروشگاه فعال باشد، مشتری باید بتواند گزینه مناسب را انتخاب کند.
هنگام طراحی این بخش، توضیحات روش های ارسال و هزینه آن ها را به صورت واضح نمایش دهید. همچنین، بررسی کنید که با تغییر روش ارسال، مبلغ نهایی سفارش به درستی محاسبه شود.
روش های پرداخت
بخش پرداخت به مشتری امکان می دهد روش موردنظر خود را برای پرداخت سفارش انتخاب کند.
با توجه به تنظیمات فروشگاه، ممکن است روش هایی مانند پرداخت اینترنتی یا پرداخت هنگام تحویل در دسترس باشند.
در طراحی این قسمت، نام روش های پرداخت، توضیحات مربوط به آن ها و وضعیت انتخاب هر روش باید واضح باشد.
اگر از درگاه پرداخت اینترنتی استفاده می کنید، پس از انتخاب روش پرداخت و ثبت سفارش، فرایند انتقال به درگاه نیز باید به درستی انجام شود.
توجه داشته باشید که نمایش ظاهری یک روش پرداخت در صفحه به معنای فعال بودن صحیح آن نیست. برای اطمینان از عملکرد درگاه، باید سفارش آزمایشی ثبت کنید.
دکمه ثبت سفارش
دکمه ثبت سفارش، یکی از مهم ترین عناصر صفحه تسویه حساب است؛ زیرا مشتری با استفاده از آن فرایند نهایی خرید را انجام می دهد.
این دکمه باید به راحتی قابل مشاهده باشد و با سایر عناصر صفحه اشتباه گرفته نشود.
برای طراحی بهتر آن، به موارد زیر توجه کنید:
- استفاده از رنگ متناسب با هویت بصری فروشگاه
- انتخاب اندازه مناسب برای نمایش در موبایل
- استفاده از نوشته واضح مانند «ثبت سفارش» یا «پرداخت و ثبت سفارش»
- ایجاد فاصله مناسب با سایر عناصر
- حفظ عملکرد اصلی دکمه در فرایند ثبت سفارش
همچنین، بررسی کنید که دکمه در صورت ناقص بودن اطلاعات ضروری، رفتار صحیحی داشته باشد و پیام های موردنیاز به مشتری نمایش داده شوند.
پیام ها و اعلان های ووکامرس
در فرایند تسویه حساب ممکن است پیام های مختلفی به مشتری نمایش داده شوند؛ برای مثال، پیام مربوط به فیلدهای ناقص، خطای پرداخت یا وضعیت ثبت سفارش.
این پیام ها برای راهنمایی مشتری اهمیت دارند و نباید صرفاً برای زیباتر شدن ظاهر صفحه حذف شوند.
بهتر است محل نمایش آن ها به گونه ای باشد که مشتری بتواند بدون جست وجوی زیاد، علت بروز مشکل را متوجه شود.
اگر از عناصر اختصاصی وودمارت یا ووکامرس برای نمایش پیام ها استفاده می کنید، پس از طراحی بررسی کنید که پیام های موفقیت و خطا به درستی نمایش داده می شوند.
تنظیم ظاهر صفحه تسویه حساب در المنتور
پس از قرار دادن عناصر موردنیاز، نوبت به تنظیم ظاهر صفحه می رسد.
در این مرحله می توانید اندازه بخش ها، فاصله ها، رنگ ها، فونت ها و نحوه نمایش عناصر را مطابق با طراحی فروشگاه خود تغییر دهید.
تنظیم عرض ستون ها
اگر از ساختار دو ستونه استفاده می کنید، باید عرض هر ستون را متناسب با محتوای آن تنظیم کنید.
فرم اطلاعات مشتری به فضای کافی برای نمایش فیلدها نیاز دارد. در مقابل، ستون خلاصه سفارش باید به اندازه ای باشد که نام محصولات، قیمت ها و مبلغ نهایی بدون فشردگی نمایش داده شوند.
در نمایشگرهای کوچک می توانید ستون ها را زیر یکدیگر قرار دهید تا مشتری برای تکمیل فرم با مشکل مواجه نشود.
انتخاب رنگ و پس زمینه
برای ایجاد هماهنگی بیشتر، از رنگ های اصلی فروشگاه خود استفاده کنید.
بهتر است پس زمینه صفحه ساده باشد و بخش هایی مانند خلاصه سفارش یا روش پرداخت، در صورت نیاز با استفاده از تفاوت ملایم رنگ یا حاشیه از سایر قسمت ها متمایز شوند.
رنگ دکمه ثبت سفارش نیز باید به اندازه کافی قابل تشخیص باشد.
تنظیم فونت و اندازه نوشته ها
خوانایی نوشته ها در صفحه تسویه حساب اهمیت زیادی دارد؛ زیرا مشتری باید بتواند اطلاعات واردشده، قیمت ها و توضیحات پرداخت را به درستی بررسی کند.
در فروشگاه های فارسی، استفاده از فونت مناسب و اندازه نوشته متناسب با نمایشگر می تواند تجربه کاربری را بهبود دهد.
همچنین، مطمئن شوید که عنوان فیلدها، متن پیام ها و توضیحات روش های پرداخت به درستی نمایش داده می شوند.
طراحی فیلدها و دکمه ها
فیلدهای اطلاعات مشتری باید ظاهر یکپارچه ای داشته باشند و ورود اطلاعات در آن ها ساده باشد.
برای طراحی این بخش می توانید موارد زیر را تنظیم کنید:
- ارتفاع و عرض فیلدها
- فاصله میان فیلدها
- ضخامت و رنگ حاشیه ها
- گردی گوشه ها
- رنگ متن و پس زمینه
- ظاهر دکمه ثبت سفارش
در عین حال، تفاوت میان فیلدهای ورودی، گزینه های انتخابی و دکمه های عملیاتی باید برای مشتری واضح باشد.
تنظیم نمایش در موبایل
بخش زیادی از کاربران فروشگاه های اینترنتی از تلفن همراه خرید می کنند؛ بنابراین، طراحی واکنش گرا برای صفحه تسویه حساب ضروری است.
پس از تکمیل طراحی، پیش نمایش موبایل و تبلت را در المنتور بررسی کنید.
به موارد زیر توجه داشته باشید:
- فیلدهای فرم از عرض صفحه خارج نشوند.
- نوشته ها و توضیحات قابل خواندن باشند.
- گزینه های پرداخت به راحتی انتخاب شوند.
- خلاصه سفارش فضای مناسبی داشته باشد.
- دکمه ثبت سفارش به آسانی پیدا شود.
- پیام های خطا به طور کامل نمایش داده شوند.
اگر فرم در موبایل بیش از اندازه طولانی به نظر می رسد، بررسی کنید که آیا امکان حذف فیلدهای غیرضروری وجود دارد یا خیر.
تفاوت صفحه سبد خرید با صفحه تسویه حساب
صفحه سبد خرید و صفحه تسویه حساب دو بخش متفاوت از فرایند خرید هستند؛ هرکدام وظیفه مشخصی دارند و نباید آن ها را با یکدیگر اشتباه گرفت.
در صفحه سبد خرید، مشتری می تواند محصولات انتخاب شده را بررسی کند، تعداد آن ها را تغییر دهد، محصولات را حذف کند و هزینه سفارش را ببیند.
در مقابل، صفحه تسویه حساب برای دریافت اطلاعات مشتری، انتخاب روش ارسال و پرداخت و تکمیل سفارش استفاده می شود.
اگر می خواهید هر دو بخش فروشگاه خود را به صورت اختصاصی طراحی کنید، پیشنهاد می کنیم مقاله آموزش ساخت صفحه سبد خرید در قالب وودمارت با المنتور را نیز مطالعه کنید.
با طراحی هماهنگ این دو صفحه، می توانید مسیر خرید را برای مشتری ساده تر کنید و ظاهر یکپارچه تری در فروشگاه خود داشته باشید.
بررسی عملکرد صفحه تسویه حساب پس از طراحی
پس از انتشار چیدمان، صرفاً به ظاهر صفحه اکتفا نکنید. لازم است تمام مراحل ثبت سفارش را با دقت آزمایش کنید.
برای انجام این کار، یک سفارش آزمایشی ثبت کنید و مراحل زیر را بررسی کنید:
۱. مطمئن شوید فرم اطلاعات مشتری به درستی نمایش داده می شود.
۲. فیلدهای ضروری را خالی بگذارید و بررسی کنید که پیام های راهنما نمایش داده می شوند.
۳. اطلاعات مشتری را وارد کنید و از عملکرد صحیح فرم مطمئن شوید.
۴. روش های ارسال موجود را بررسی کنید و تغییر هزینه سفارش را آزمایش کنید.
۵. مطمئن شوید محصولات، تخفیف ها و مبلغ نهایی سفارش به درستی نمایش داده می شوند.
۶. روش پرداخت موردنظر را انتخاب کنید و عملکرد آن را بررسی کنید.
۷. روی دکمه ثبت سفارش کلیک کنید و مطمئن شوید فرایند ثبت سفارش به درستی انجام می شود.
۸. پیام های موفقیت یا خطای مربوط به سفارش را بررسی کنید.
۹. تمام مراحل را در تلفن همراه و تبلت نیز آزمایش کنید.
۱۰. اگر از افزونه های جانبی برای تغییر فیلدهای تسویه حساب استفاده می کنید، سازگاری آن ها با چیدمان جدید را بررسی کنید.
برای آزمایش درگاه پرداخت، از روش تست ارائه شده توسط درگاه یا محیط آزمایشی آن استفاده کنید. در صورت نبود محیط آزمایشی، می توانید پس از هماهنگی با ارائه دهنده درگاه، یک سفارش واقعی با مبلغ مناسب ثبت و وضعیت آن را بررسی کنید.
نکات مهم برای بهبود تجربه خرید در صفحه تسویه حساب
برای طراحی یک صفحه تسویه حساب کاربردی، بهتر است علاوه بر ظاهر، به ساده بودن فرایند خرید نیز توجه کنید.
فقط اطلاعات ضروری را دریافت کنید. هر فیلد اضافی می تواند فرایند تکمیل فرم را طولانی تر کند. بنابراین، فیلدهای موردنیاز را متناسب با نوع محصولات و روش ارسال انتخاب کنید.
هزینه نهایی را شفاف نمایش دهید. مشتری باید پیش از ثبت سفارش بتواند مبلغ قابل پرداخت و هزینه های مرتبط را بررسی کند.
پیام های خطا را قابل فهم کنید. اگر مشتری اطلاعاتی را اشتباه وارد کرده است، باید بتواند به راحتی محل مشکل را پیدا کند.
از شلوغ کردن صفحه خودداری کنید. بنرهای تبلیغاتی، پیشنهادهای اضافی و محتوای غیرضروری نباید توجه مشتری را از تکمیل سفارش منحرف کنند.
عملکرد صفحه را در شرایط مختلف آزمایش کنید. ثبت سفارش با محصولات مختلف، کد تخفیف، روش های ارسال متفاوت و روش های پرداخت موجود می تواند به شناسایی مشکلات احتمالی کمک کند.
جمع بندی
طراحی صفحه تسویه حساب در قالب وودمارت با المنتور به شما کمک می کند ظاهر این بخش مهم از فروشگاه را متناسب با نیازهای خود تغییر دهید و فرایند ثبت سفارش را برای مشتریان ساده تر کنید.
با استفاده از قابلیت ساخت چیدمان اختصاصی وودمارت، می توانید فرم اطلاعات مشتری، خلاصه سفارش، روش های ارسال و پرداخت و دکمه ثبت سفارش را در ساختاری مناسب قرار دهید.
بااین حال، هنگام طراحی این صفحه باید علاوه بر زیبایی ظاهری، به عملکرد صحیح فرم ها، محاسبه هزینه ها، نمایش پیام ها و سازگاری با تلفن همراه نیز توجه داشته باشید.
اگر می خواهید طراحی فروشگاه خود را کامل تر کنید، پیشنهاد می کنیم در کنار این آموزش، مقاله طراحی صفحه سبد خرید و دوره آموزش قالب وودمارت را نیز دنبال کنید تا با امکانات بیشتری برای شخصی سازی فروشگاه اینترنتی خود آشنا شوید.
0
هیچ دیدگاهی وجود ندارد
شما می‌توانید اولین نفری باشید که دیدگاه خود را ثبت می‌کند.