ساخت و طراحی صفحه سبد خرید با المنتور یکی از نکاتی است که هنگام طراحی سایت فروشگاهی ووکامرس با صفحه ساز المنتور با آن مواجه میشوید. در آموزش طراحی صفحه سبد خرید با المنتور به شما یاد میدهیم چگونه میتوانید صفحه سبد خرید ووکامرس را با المنتور بسازید.
سر فصلهای این مقاله:
نیازمندی طراحی صفحه سبد خرید با المنتور، نصب و فعال بودن افزونه المنتور و افزونه المنتور پرو است. برای استفاده از ویجت یا المانهای ووکامرس، فعال بودن المنتور پرو الزامی است. نسخۀ رایگان المنتور، امکانتر کمتر و بسیار محدود است.
مزایای طراحی صفحه سبد خرید با المنتور
طراحی صفحه سبد خرید با المنتور مزایای مهمی دارد! مثلاً شما میتوانید با کنترل بیشتری و شخصی سازی فوق العاده بالا به ساخت صفحه سبد خرید فروشگاهتان بپردازید. در ادامه به صورت با برخی از مزایای مهم طراحی صفحه سبد خرید با المنتور آشنا میشوید.
- طراحی ساده و منظم: از یک طراحی ساده و منظم استفاده کنید تا کاربران به راحتی محصولات خود را مشاهده و مدیریت کنند.
- استفاده از تیترهای واضح: تیترهایی مانند “سبد خرید شما”، “محصولات” و “جمع کل” را به وضوح مشخص کنید تا کاربران سریعاً متوجه محتوای صفحه شوند.
- نمایش تصاویر محصولات: تصاویر کوچک از محصولات را نمایش دهید تا کاربران به راحتی بتوانند محصولات خود را تشخیص دهند.
- جزئیات محصولات: نام محصول، قیمت واحد، تعداد و قیمت کل را به طور واضح نمایش دهید.
- گزینههای ویرایش: امکان تغییر تعداد، حذف محصول یا بازگشت به صفحه محصول برای ویرایش را فراهم کنید.
- نمایش جمع کل و هزینههای اضافی: مجموع هزینهها، شامل مالیات و هزینه حمل و نقل، را به صورت شفاف نمایش دهید.
- دکمههای اقدام (Call-to-Action): دکمههای “ادامه خرید”، “پرداخت یا تسویه حساب” و “بهروزرسانی سبد خرید” را به وضوح و در دسترس قرار دهید.
- پیامهای اطلاعرسانی: پیامهای اطلاعرسانی مانند “سبد خرید شما خالی است” یا “محصول با موفقیت اضافه شد” را به صورت برجسته نمایش دهید.
- طراحی واکنشگرا (Responsive Design): اطمینان حاصل کنید که صفحه سبد خرید در تمامی دستگاهها، از جمله موبایل و تبلت، به خوبی نمایش داده میشود.
- افزودن کوپن تخفیف: گزینهای برای وارد کردن کد تخفیف و مشاهده تغییرات قیمت فراهم کنید.
- افزودن یادداشت برای سفارش: امکان افزودن یادداشت یا پیام برای سفارشات خاص را به کاربران بدهید.
- نمایش موجودی انبار: نمایش موجودی انبار برای هر محصول به کاربران کمک میکند تا از موجود بودن محصولات اطمینان حاصل کنند.
- راهنمایی مراحل خرید: نمایش مراحلی مانند “سبد خرید”، “اطلاعات ارسال”، “پرداخت” به صورت نمودار یا نوار پیشرفت.
این دسترسیها و امکاناتی که المنتور میدهد موجب میشود که صفحه سبد خرید شما با Elementor کاربرپسندتر و بهینهتر باشد.
طراحی صفحه سبد خرید با المنتور
برای شروع کافیست به منوی برگهها از طریق پیشخوان وردپرس بروید و صفحۀ سبد خرید را ویرایش بزنید. اگر برگهها یا صفحات زیادی دارید، میتوانید از طریق نوار جستجوی سمت چپ صفحه، عنوان سبد خرید را جستجو کنید تا این برگه را پیدا کنید.
در حالت ویرایش صفحۀ سبد خرید، روی دکمۀ ویرایش با المنتور کلیک کنید تا به محیط ویرایشگر صفحه ساز المنتور هدایت شوید؛ به مانند تصاویر راهنما اعمال نمایید.
از آنجا که میخواهیم طراحی صفحه سبد خرید با المنتور را انجام دهیم، نیازی به المان و کد کوتاه پیشفرض ووکامرس نداریم و آن را حذف کنید.
پس از حذف کد کوتاه یا المان پیشفرض ووکامرس، در سمت راست صفحه و از طریق ویرایشگر پلاگین المنتور، در باکس جستجو، عنوان سبد خرید را جستجو کنید و المان سبد خرید را به داخل صفحه بکشید.
اگر محصولی داخل سبد خرید نداشته باشید، پیام سبد خرید خالی است نمایش داده میشود.
میتوانید یک یا چند محصول را به سبد خرید خود اضافه کنید و مجدد به محیط ویرایش صفحۀ سبد خرید با المنتور برگردید.
دو ستونه یا تک ستونه کردن سبد خرید
در تنظیمات محتوا و گزینۀ طرح بندی، شما میتوانید سبد خرید را دو ستونه یا تک ستونه کنید. پیشفرض روی حالت دو ستونه قرار دارد و سبد خرید در دو قسمت نمایش داده میشود.
اما اگر میخواهید تک ستونه کنید، ستون سمت راست (جمع کل سبد خرید) هم زیر ستون اول قرار میگیرد و به عبارتی صفحه سبد خرید به صورت تک ستونه قابل نمایش خواهد بود.
گزینۀ چسبان کردن ستون سمت راست، تنها در حالت دو ستونه بودن فعال است و اگر این گزینه را فعال کنید، در صورتی که کاربر در صفحه سبد خرید اسکرول کند، ستون سمت راست در هنگام اسکرول به صورت چسبیده حرکت میکند و پایین میآید.
شخصی سازی متنهای سبد خرید
در گزینۀ خلاصۀ سفارش شما میتوانید متن و موقعیت برخی از موارد داخل سبد خرید را شخصی سازی کنید. مثلاً میتوانید متن بهروز رسانی سبد خرید را به دلخواه خود تغییر دهید. این متن همان دکمۀ به روز رسانی سبد خرید است.
در ادامۀ طراحی صفحه سبد خرید با المنتور امکان ترازبندی یا همان تعیین جایگاه و موقعیت این دکمه وجود دارد. میتوان با این گزینه، دکمه را به موقعیت دلخواه خود (مثلاً وسط صفحه، سمت راست یا سمت چپ) ببرید.
توجه داشته باشید که این گزینه، تنها موقعیت دکمه را مشخص میکند و برای تغییر و تنظیم جایگاه دکمۀ بهروز رسانی سبد خرید است.
برای تغییر متن سایر بخشهای دیگر سبد خرید، میتوانید به قسمتهای کوپن، مجموع کل، دکمۀ پرداخت بروید تا بتوانید متن یا موقعیت آنها را به دلخواه خود تغییر دهید.
گزینههای اضافی ویجت سبد خرید
آپشن گزینههای اضافی ویجت سبد خرید برای طراحی صفحه سبد خرید با المنتور به شما کمک میکند که در صورت خالی بودن سبد خرید، محتوای آن را شخصی سازی کنید. همچنین امکان فعال کردن بهروز رسانی خودکار سبد خرید وجود دارد.
این بهروز رسانی خودکار، زمانی کاربرد دارد که کاربر، مقدار یا تعداد موارد داخل سبد خرید افزایش یا کاهش دهد و در همان صفحه سبد خرید، اطلاعات آپدیت و به روز میشود.
استایل دهی به صفحۀ سبد خرید با المنتور
در تب استایل ویرایشگر المنتور شما میتوانید به قسمتها، کادرها، متنها و سایر موارد و اطلاعات دیگر داخل صفحه سبد خرید، استایل بدهید یا استایل آنها را کاستوم کنید.
مثلاً اگر میخواهید به باکسهای سبد خرید، سایه بدهید، کافیست به تب استایل و گزینۀ بخشها بروید و روی آیکون سایه باکس کلیک کنید تا به سادگی بتوانید استایل مدنظرتان را روی صفحه سبد خرید پیاده سازی کنید.
همچنین قابلیت کاستوم کردن رنگها، تایپوگرافی (فونت)، رنگ دکمهها، فاصله بین متنها و بخشها از قسمت استایل المنتور در دسترس است.
اگر به شخصی سازی استایل خلاصه سفارش، کوپن و مجموع کل نیاز دارید، به آپشن شخصی سازی در بخش استایل بروید و هرکدام از مواردی که نیاز است استایل و ظاهر آن را سفارشی کنید را انتخاب نمایید.
بدون نصب افزونه جانبی و تنها با المنتور و المنتور پرو میتوان یک صفحه سبد خرید جذاب و مدرن ایجاد کرد. البته اگر به امکانات بسیار بیشتری نیاز دارید، پیشنهاد ما استفاده از افزونه Jet Woo Builder است که امکان طراحی صفحات ووکامرسی با المنتور را فراهم میسازد.
آیا آموزش طراحی صفحه سبد خرید با المنتور برای شما مفید بود؟ اگر هنوز سؤالی دارید، میتوانید از طریق بخش دیدگاهها در پایین همین صفحه، سؤال خود را بپرسید.
این مقاله چقدر براتون مفید بود؟
از ۱ تا ۵ امتیاز بدید
میانگین رتبه ۴.۸ / ۵. تعداد رای: ۵
همۀ تلاش مجموعهی تم فور اینه که بهترین آموزشها برای وردپرس رو به صورت کاملاً رایگان برای جامعهی وردپرس ایران تولید بکنه. امیدواریم آموزشهای ما براتون مفید واقع بشه :)