⏰ فقط برای چند ساعت! 🎉 تخفیف ۵۰٪ ویژه حمایت از کسب‌وکارهای آنلاین
⚡ آپدیت خودکار از پیشخوان + نصب روی نامحدود سایت
آموزش طراحی صفحه سبد خرید با المنتور

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

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

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

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

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

  1. طراحی ساده و منظم: از یک طراحی ساده و منظم استفاده کنید تا کاربران به راحتی محصولات خود را مشاهده و مدیریت کنند.
  2. استفاده از تیترهای واضح: تیترهایی مانند “سبد خرید شما”، “محصولات” و “جمع کل” را به وضوح مشخص کنید تا کاربران سریعاً متوجه محتوای صفحه شوند.
  3. نمایش تصاویر محصولات: تصاویر کوچک از محصولات را نمایش دهید تا کاربران به راحتی بتوانند محصولات خود را تشخیص دهند.
  4. جزئیات محصولات: نام محصول، قیمت واحد، تعداد و قیمت کل را به طور واضح نمایش دهید.
  5. گزینه‌های ویرایش: امکان تغییر تعداد، حذف محصول یا بازگشت به صفحه محصول برای ویرایش را فراهم کنید.
  6. نمایش جمع کل و هزینه‌های اضافی: مجموع هزینه‌ها، شامل مالیات و هزینه حمل و نقل، را به صورت شفاف نمایش دهید.
  7. دکمه‌های اقدام (Call-to-Action): دکمه‌های “ادامه خرید”، “پرداخت یا تسویه حساب” و “به‌روزرسانی سبد خرید” را به وضوح و در دسترس قرار دهید.
  8. پیام‌های اطلاع‌رسانی: پیام‌های اطلاع‌رسانی مانند “سبد خرید شما خالی است” یا “محصول با موفقیت اضافه شد” را به صورت برجسته نمایش دهید.
  9. طراحی واکنش‌گرا (Responsive Design): اطمینان حاصل کنید که صفحه سبد خرید در تمامی دستگاه‌ها، از جمله موبایل و تبلت، به خوبی نمایش داده می‌شود.
  10. افزودن کوپن تخفیف: گزینه‌ای برای وارد کردن کد تخفیف و مشاهده تغییرات قیمت فراهم کنید.
  11. افزودن یادداشت برای سفارش: امکان افزودن یادداشت یا پیام برای سفارشات خاص را به کاربران بدهید.
  12. نمایش موجودی انبار: نمایش موجودی انبار برای هر محصول به کاربران کمک می‌کند تا از موجود بودن محصولات اطمینان حاصل کنند.
  13. راهنمایی مراحل خرید: نمایش مراحلی مانند “سبد خرید”، “اطلاعات ارسال”، “پرداخت” به صورت نمودار یا نوار پیشرفت.

این دسترسی‌ها و امکاناتی که المنتور می‌دهد موجب می‌شود که صفحه سبد خرید شما با Elementor کاربرپسندتر و بهینه‌تر باشد.

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

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

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

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

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

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

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

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

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

اگر محصولی داخل سبد خرید نداشته باشید، پیام سبد خرید خالی است نمایش داده می‌شود.

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

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

دو ستونه یا تک ستونه کردن سبد خرید

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

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

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

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

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

شخصی سازی متن‌های سبد خرید

در گزینۀ خلاصۀ سفارش شما می‌توانید متن و موقعیت برخی از موارد داخل سبد خرید را شخصی سازی کنید. مثلاً می‌توانید متن به‌روز رسانی سبد خرید را به دلخواه خود تغییر دهید. این متن همان دکمۀ به روز رسانی سبد خرید است.

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

در ادامۀ طراحی صفحه سبد خرید با المنتور امکان ترازبندی یا همان تعیین جایگاه و موقعیت این دکمه وجود دارد. می‌توان با این گزینه، دکمه را به موقعیت دلخواه خود (مثلاً وسط صفحه، سمت راست یا سمت چپ) ببرید.

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

توجه داشته باشید که این گزینه، تنها موقعیت دکمه را مشخص می‌کند و برای تغییر و تنظیم جایگاه دکمۀ به‌روز رسانی سبد خرید است.

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

برای تغییر متن سایر بخش‌های دیگر سبد خرید، می‌توانید به قسمت‌های کوپن، مجموع کل، دکمۀ پرداخت بروید تا بتوانید متن یا موقعیت آن‌ها را به دلخواه خود تغییر دهید.

گزینه‌های اضافی ویجت سبد خرید

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

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

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

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

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

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

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

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

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

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

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

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

بدون نصب افزونه جانبی و تنها با المنتور و المنتور پرو می‌توان یک صفحه سبد خرید جذاب و مدرن ایجاد کرد. البته اگر به امکانات بسیار بیشتری نیاز دارید، پیشنهاد ما استفاده از افزونه Jet Woo Builder است که امکان طراحی صفحات ووکامرسی با المنتور را فراهم می‌سازد.

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

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید

میانگین رتبه ۴.۸ / ۵. تعداد رای: ۵

تصویر تیم تولید محتوای تم فور
تیم تولید محتوای تم فور

همۀ تلاش مجموعه‌ی تم فور اینه که بهترین آموزش‌ها برای وردپرس رو به صورت کاملاً رایگان برای جامعه‌ی وردپرس ایران تولید بکنه. امیدواریم آموزش‌های ما براتون مفید واقع بشه :)

این مقاله را با دوستان خود به اشتراک بگذارید
ثبت دیدگاه
ارسال یک دیدگاه برای ارسال دیدگاه، نیاز است که وارد حساب کاربری خود شوید
اسکرول به بالا