آموزش نمایش سبد خرید در تسویه حساب ووکامرس

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

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

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

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

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

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

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

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

تسویه حساب بلوکی ووکامرس چیه؟

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

تسویه حساب کلاسیک ووکامرس چیه؟

در روش کلاسیک، محتوای برگه تسویه حساب با شورت‌کد

چطور نوع صفحه تسویه حساب سایتتون رو تشخیص بدید؟

از پیشخوان وردپرس وارد «برگه‌ها» بشید و برگه تسویه حساب رو ویرایش کنید. اگه یک بلوک بزرگ با عنوان Checkout یا تسویه حساب می‌بینید، صفحه بلوکیه. اگه بلوک شورت‌کد و عبارت

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

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

ویرایش برگه تسویه حساب با ویرایشگر بلوکی

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

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

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

اگه تغییر تعداد داخل تسویه حساب برای شما ضروریه، اول قابلیت‌های فعلی بلوک رو روی سایت آزمایشی بررسی کنید. بعد فقط از افزونه‌ای کمک بگیرید که سازگاری روشن و قابل‌آزمایشی با Cart و Checkout Blocks داره.

محدودیت‌های ادغام کامل بلوک سبد خرید و تسویه حساب

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

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

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

پیش‌نیازهای اجرای قطعه‌کد

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

اضافه کردن امن قطعه‌کد بدون ویرایش مستقیم قالب

کد رو مستقیم داخل فایل functions.php قالب اصلی نذارید؛ چون با تغییر یا به‌روزرسانی قالب ممکنه از بین بره. اون رو داخل یک افزونه اختصاصی کوچک، قالب فرزند یا افزونه معتبر مدیریت قطعه‌کد قرار بدید. اگه با PHP آشنا نیستید، بهتره قبل از فعال‌کردن کد از یک توسعه‌دهنده کمک بگیرید.

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

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

add_action( 'woocommerce_before_checkout_form', 'mihanwp_cart_on_checkout_page_only', 5 );

function mihanwp_cart_on_checkout_page_only() {
    if ( is_wc_endpoint_url( 'order-received' ) ) {
        return;
    }

    echo do_shortcode( '[woocommerce_cart]' );
}

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

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

شرط is_wc_endpoint_url( 'order-received' ) بررسی می‌کنه که مشتری وارد صفحه تأیید سفارش شده یا نه. اگه پاسخ مثبت باشه، تابع متوقف می‌شه و سبد خرید بالای پیام ثبت سفارش نمایش داده نمی‌شه.

انتقال مستقیم مشتری به صفحه تسویه حساب

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

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

ریدایرکت کنترل‌شده از سبد خرید به تسویه حساب

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

add_action( 'template_redirect', 'mihanwp_redirect_cart_to_checkout' );

function mihanwp_redirect_cart_to_checkout() {
    if ( is_admin() || wp_doing_ajax() || ! is_cart() ) {
        return;
    }

    if ( WC()->cart && ! WC()->cart->is_empty() ) {
        wp_safe_redirect( wc_get_checkout_url() );
        exit;
    }
}

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

بررسی لینک‌های سبد خرید در منو، دکمه‌ها و قالب

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

تنظیم برگه‌های سبد خرید و تسویه حساب در ووکامرس

بررسی برگه‌های اختصاص‌داده‌شده در تنظیمات پیشرفته

از پیشخوان وارد «ووکامرس ← پیکربندی ← پیشرفته» بشید.

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

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

چرا نباید برگه سبد خرید رو حذف کنید؟

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

آزمایش فرایند خرید بعد از تغییرات

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

• محصول ساده و متغیر: افزودن هر دو نوع محصول و انتخاب ویژگی‌هایی مثل رنگ یا اندازه رو آزمایش کنید.
• تغییر تعداد و حذف محصول: مطمئن بشید مبلغ‌ها، ارسال و مالیات بعد از تغییر دوباره محاسبه می‌شن.
• کد تخفیف: یک کد معتبر، نامعتبر و منقضی‌شده رو جداگانه امتحان کنید.
• ارسال و مالیات: چند نشانی و روش ارسال متفاوت رو بررسی کنید.
• پرداخت: پرداخت موفق، ناموفق، لغوشده و دوباره‌پرداخت سفارش رو آزمایش کنید.
• درگاه و افزونه‌ها: افزونه‌های اشتراک، رزرو، فاکتور، کیف پول و فیلدهای سفارشی تسویه حساب رو بررسی کنید.
• موبایل: خوانایی خلاصه سفارش، اندازه دکمه پرداخت، بازشدن صفحه‌کلید و خطاهای فرم رو بسنجید.

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

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

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

قطعه‌کد روی تسویه حساب بلوکی کار نمی‌کنه

این رفتار طبیعیه؛ چون بلوک Checkout از ساختار قدیمی قالب تسویه حساب استفاده نمی‌کنه و همه هوک‌های کلاسیک داخل اون اجرا نمی‌شن. صفحه رو به شورت‌کد کلاسیک تبدیل کنید یا راهکاری انتخاب کنید که به‌طور مشخص از Checkout Block پشتیبانی می‌کنه.

صفحه تسویه حساب دوبار نمایش داده می‌شه

محتوای برگه رو بررسی کنید. نباید بلوک Checkout و شورت‌کد

تغییر تعداد محصول جمع سفارش رو به‌روز نمی‌کنه

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

درگاه پرداخت یا ریدایرکت بعد از خرید مشکل داره

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

آیا ادغام سبد خرید و تسویه حساب برای فروشگاه شما مناسبه؟

مزایا و محدودیت‌های مسیر خرید یک‌صفحه‌ای

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

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

مقایسه نتیجه با تست A/B

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

جمع‌بندی

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

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

برای یادگیری ووکامرس می‌تونید از دوره رایگان آموزش ووکامرس میهن وردپرس دیدن کنید.

سؤالات متداول

تیم تولید محتوا

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