نحوه نمایش محصولات سبد خرید در کنار سایت با WooCommerce Side Cart

نحوه نمایش محصولات سبد خرید در کنار سایت با WooCommerce Side Cart

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

نحوه نمایش محصولات سبد خرید در کنار سایت

افزونه Side Cart For WooCommerce یک افزونه برای اضافه کردن آیکون سبدخرید بصورت شناور در کنار و یا گوشه فروشگاه آنلاین است. از این رو برای اینکه سبدخرید وبسایت فروشگاهی خود را در معرض دید قرار دهید همراه ما باشید با نحوه نمایش سبد خرید در کنار سایت با افزونه WC Side Cart…

نصب افزونه Side Cart WooCommerce

نمایش سبد خرید
نمایش سبد خرید

نصب افزونه Side Cart WooCommerce بسیار ساده است. ابتدا باید فایل زیپ افزونه موردنظر را از مخزن وردپرس دانلود کنید. پس از دانلود کردن فایل زیپ، باید از پنل مدیریتی وردپرس به بخش افزونه‌ها رفته سپس روی افزودن کلیک کنید.
قدم بعدی، کلیک بر دکمه “افزودن” و سپس دکمه “بارگذاری” در بالای صفحه است.
مرحله بعد بارگذاری فایل زیپ افزونه است که قبلا دانلود کردید. برای این کار، روی Choose File کلیک کنید و سپس فایل زیپ افزونه را روی سیستم یافته و بارگذاری کنید. همچنین میتوینید با مقاله آموزش قدم به قدم نصب افزونه وردپرس همراه ما باشید.

نصب نهایی افزونه Side Cart WooCommerce

بعد از انجام این مراحل، روی دکمه “هم اکنون نصب کن” کلیک کنید تا افزونه بارگذاری شود. تبریک می‌گوییم! توانستید افزونه Side Cart WooCommerce را روی وردپرس نصب کنید. تنظیمات افزونه Side Cart WooCommerce در منوی سمت راست قابل مشاهده است. و از این طریق میتوانید تنظیمات دلخواه را روی این افزونه پیاده کنید. و در نهایت به نمایش محصولات سبد خرید در کنار سایت برسید.

بخش‌های مختلف افزونه Side Cart WooCommerce

نصب افزونه روی وردپرس
نصب افزونه روی وردپرس

تنظیمات افزونه Side Cart WooCommerce در چهار بخش General، Style، Advanced و Premium دسته بندی شده‌اند که در ادامه به تنظیمات هر دسته می‌پردازیم.

تنظیمات General یا کلی

بررسی تنظیمات کلی افزونه
بررسی تنظیمات کلی افزونه

 تنظیمات کلی سبد خرید کناری SIDE CART

  • Auto Open: درصورتی که مربع این قسمت را تیک بزنید، لیست سبد خرید بلافاصله پس از اضافه شدن محصول، در سمت راست صفحه، باز می‌شود.
  • Ajax Add to Cart: درصورتی که مربع این قسمت را تیک بزنید، آیتم موردنظر بدون بازنشانی (Refresh) سایت، به لیست سبد خرید اضافه می‌شود.
  • Loading Icon: درصورتی که مربع این قسمت را تیک بزنید، علامتی به معنای پردازش اطلاعات به کاربر نمایش داده می‌شود.
  • Reset Cart Form: درصورتی که مربع این قسمت را تیک بزنید، میتوانید از دکمه ریست کردن مقادیر موجود درلیست استفاده کنید. در این صورت دکمه View Cart حذف می شود.
  • Head Title: در این بخش می‌توانید برای سبد خرید خود نام دلخواه خود را انتخاب کنید
تعریف نام سبد خرید
تعریف نام سبد خرید
  • Shipping Text: درصورتی که تمایل دارید درمورد پست کردن محصولات، نکته‌ای را برای کاربر به نمایش بگذارید، متن مورد نظر خود را در این بخش وارد کنید.
نکاتی درباره محصول
نکاتی درباره محصول
  • Cart Button Text: در این بخش، متنی را که برای دکمه بازکردن صفحه سبدخرید درنظر دارید را وارد کنید تا به کاربر نمایش داده شود.
مشاهده سبد خرید
مشاهده سبد خرید
  • Checkout Button Text: در این بخش، متنی را که برای دکمه بازکردن صفحه تسویه حساب در نظر دارید را وارد کنید تا به کاربر نمایش داده شود.
  • Continue Button Text: در این بخش، متنی را که برای دکمه ادامه دادن در نظر دارید، وارد کنید تا به کاربر نمایش داده شود. در صورتی که این بخش را خالی رها کنید، این دکمه در نمایش محصولات سبد خرید در کنار سایت، حذف می‌شود.
  • Cotinue Button URL: دراینجا، آدرسی که میخواهید کاربر پس از کلیک دکمه “ادامه خرید” به آن هدایت شود، وارد کنید. درصورتی که # را وارد کنید، کاربر به صفحه‌ای که باز بود، هدایت می‌شود.
تعیین باکس‌های مختلف
تعیین باکس‌های مختلف
  • Product total: درصورتی که مربع این قسمت را تیک بزنید، جمع هزینه محصول سفارش داده شده، در سبد خرید کناری نمایش داده می‌شود.
جمع هزینه های موجود
جمع هزینه های موجود
  • Redirect to Cart: درصورتی که مربع این قسمت را تیک بزنید، پس از اضافه کردن محصول جدید، سبد خرید کناری باز می‌شود.

تنظیمات کلی آیکن سبد خرید Cart basket

  • Enable Basket: درصورتی که مربع این قسمت را تیک بزنید، در تمام صفحات سایت، یک آیکون سبد خرید کوچک در پایین سمت چپ صفحه‌، نمایش داده می‌شود.
فعال‌سازی سبد خرید
فعال‌سازی سبد خرید
  • On Cart & Checkout Page: درصورتی که مربع این قسمت را تیک بزنید، آیکون سبد خرید در صفحات سبد خرید و تسویه حساب هم نمایش داده می‌شود.
  • Basket on mobile: درصورتی که مربع این قسمت را تیک بزنید، آیکون سبد خرید، برای کاربرانی که از تلفن‌همراه استفاده می‌کنند، نیز نمایش داده می‌شود.
  • Hide Basket Pages: دراین بخش، میتوانید تمامی صفحاتی که نمیخواهید آیکون سبد خرید در آن‌ها به نمایش دربیاید، را وارد کنید. برای این کار می‌توانید از نوع پست، شناسه صفحه و یا نامک صفحه موردنظر خود استفاده کنید. برای جداکردن، از علامت کاما استفاده کنید.
  • Product Count: درصورتی که تیک مربع این قسمت را بردارید، آیکن سبدخرید تعداد محصولات موجود در سبدخرید را نشان نمیدهد.

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

تنظیمات Style یا سبک

در این بخش به ظاهر می‌پردازیم.

تنظیمات استایل سبد خرید کناری SIDE CART

  • Head Font Size: در این بخش، اندازه فونت عنوان سبد خرید کناری را مشخص می‌کنید.
  • Open From: سبد خرید کناری، بصورت پیش‌فرض از سمت راست باز می‌شود. اما می‌توانید در این بخش با انتخاب گزینه Left آن را از سمت چپ باز کنید.
نمایش جمع محصولات خریداری شده
نمایش جمع محصولات خریداری شده
  • Container Height: با انتخاب گزینه Auto Adjust، ارتفاع سبد خرید کناری متناسب با اندازه صفحه نمایش، تغییر می‌کند. و در صورت انتخاب Full Screen، ارتفاع سبد خرید کناری به اندازه ارتفاع صفحه‌نمایش خواهد بود.
  • Container Width: در این بخش، ضخامت سبد خرید کناری را می‌توانید مشخص کنید. واحد اندازه‌گیری پیکسل است.
  • Body Font Size: در این بخش می‌توانید اندازه فونت متون درون سبد خرید کناری را مشخص کنید.
  • Product Image Width: در این بخش می‌توانید عرض عکس محصول را مشخص کنید. توجه داشته باشید که طول عکس به نسبت عرض ان تغییر می‌کند.
  • Footer Buttons Margin: در این بخش می‌توانید مارجین دکمه‌های پایینی سبد خرید کناری را تعیین کنید.

تنظیمات کلی آیکن سبد خرید Cart basket

  • Basket Position: در این بخش می توانید محل قرارگیری آیکن سبد خرید را مشخص کنید.

Bottom fixed آیکن در پایین صفحه قرار می‌گیرد. Top و Top Fixed آیکن در بالای صفحه قرار می‌گیرد.

  • Basket Background Color: در این بخش می‌توانید رنگ زمنه ایکن را تغییر دهید.
رنگ‌بندی سبد خرید
رنگ‌بندی سبد خرید
  • Basket Icon Color: در این بخش می‌توانید رنگ سبد موجود در آیکن را تغییر دهید.
  • Basket Icon Size: در این بخش اندازه آیکن را مشخص می‌کنید.
  • Count Background Color: در این بخش، رنگ زمینه شمارنده را مشخص می‌کنید.
  • Count Text Color: در این بخش، رنگ عدد شمارنده را تعیین می‌کنید.

تنظیمات Advanced

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

با کمک افزونه WooCommerce Side Cart چه می‌توان کرد؟

در واقع شما می‌توانید به نوعی دسترسی سریع در سایت خود ایجاد کرده و به کاربر این امکان را بدهید که در بخش کناری سایت، تمامی خریدهای خود را مشاهده کند. با کمک این افزونه نمایش محصولات سبد خرید در کنار سایت در صفحه کناری سایت قابل رویت بوده و مشتری می‌تواند محصولات موجود در سبد خرید را به راحتی در ساید سایت مشاهده کرده یا آن را حدف کند. مجموع هزینه خرید نیز در این بخش قابل مشاهده است. همچنین ممکن است علاقه داشته باشید که ووکامرس خود را با افزونه wooCustomizer سفارشی سازی کنید یا اینکه سبدهای خرید رها شده را با افزونه Woo Cart Abandonment بازیابی کنید.

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

دیدگاهتان را بنویسید