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

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

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

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

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

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

ویرایش صفحه تسویه حساب با کدنویسی (بدون افزونه)

استفاده از کدنویسی بهترین روش برای حفظ سرعت سایت است. افزونه‌های جانبی معمولاً فایل‌های CSS و JS سنگینی بارگذاری می‌کنند، اما با چند سطر کد PHP ساده می‌توانید مدیریت کاملی روی فرم تسویه حساب داشته باشید. برای دسترسی به گزینه‌های بیشتر می‌توانید از کدهای آماده وردپرس استفاده کنید.

نکته مهم: کدهای زیر را حتماً در فایل functions.php پوسته فرزند (Child Theme) یا از طریق افزونه‌های مدیریت کد مثل Code Snippets قرار دهید تا با آپدیت قالب، تغییرات شما از بین نرود.

۱. حذف فیلدهای غیرضروری فرم تسویه حساب

برای حذف فیلدهایی مانند نام شرکت، آدرس دوم، کدپستی یا یادداشت سفارش، از فیلتر woocommerce_checkout_fields استفاده کنید. تکه کد زیر مثال کاملی از این کار است:

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

function custom_override_checkout_fields( $fields ) {
    // حذف فیلد نام شرکت
    unset($fields['billing']['billing_company']);
    
    // حذف فیلد آدرس دوم
    unset($fields['billing']['billing_address_2']);
    
    // حذف فیلد کد پستی
    unset($fields['billing']['billing_postcode']);
    
    // حذف فیلد یادداشت‌های سفارش
    unset($fields['order']['order_comments']);
    
    return $fields;
}

شما نباید فیلدها را با CSS و دستور display: none; مخفی کنید. این کار باعث می‌شود اگر فیلدی ضروری (Required) باشد، کاربر بدون دیدن آن دکمه ثبت سفارش را بزند و با خطای نامرئی مواجه شود.

۲. اختیاری کردن فیلدهای اجباری

اگر نمی‌خواهید فیلدی مثل کدپستی را کلاً حذف کنید، اما تمایلی هم ندارید که پر کردن آن برای خریدار اجباری باشد، می‌توانید خصوصیت required آن را روی false تنظیم کنید:

add_filter( 'woocommerce_billing_fields', 'make_postcode_optional' );

function make_postcode_optional( $fields ) {
    $fields['billing_postcode']['required'] = false;
    return $fields;
}

۳. افزودن فیلد سفارشی (مانند کد ملی)

برای اضافه کردن یک فیلد جدید به بخش صورت‌حساب، کافی است خصوصیات آن فیلد را به آرایه فیلدها متصل کنید:

// افزودن فیلد به فرم
add_filter( 'woocommerce_checkout_fields' , 'add_national_id_checkout_field' );

function add_national_id_checkout_field( $fields ) {
    $fields['billing']['billing_national_id'] = array(
        'label'       => 'کد ملی',
        'placeholder' => 'کد ملی ۱۰ رقمی خود را وارد کنید',
        'required'    => true,
        'class'       => array('form-row-wide'),
        'clear'       => true,
        'priority'    => 25,
    );
    return $fields;
}

// ذخیره داده‌های فیلد در متای سفارش
add_action( 'woocommerce_checkout_update_order_meta', 'save_national_id_checkout_field' );

function save_national_id_checkout_field( $order_id ) {
    if ( ! empty( $_POST['billing_national_id'] ) ) {
        update_post_meta( $order_id, '_billing_national_id', sanitize_text_field( $_POST['billing_national_id'] ) );
    }
}

سفارشی‌سازی فرم پرداخت با افزونه‌های ووکامرس

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

• Checkout Field Editor (by ThemeHigh): یکی از پرکاربردترین افزونه‌ها با بیش از ۴۰۰ هزار نصب فعال که امکان کم یا زیاد کردن فیلدها و جابه‌جایی آن‌ها را با Drag & Drop فراهم می‌کند.
• CartFlows: ابزاری عالی برای ساخت قیف‌های فروش (Funnels) و طراحی مجدد و چند مرحله‌ای کردن صفحات تسویه حساب.
• صفحه‌ساز المنتور (Pro): ویجت تسویه حساب المنتور پرو به شما اجازه می‌دهد لایه و ظاهری کاملاً منحصر‌به‌فرد بدون نیاز به نصب افزونه جدید طراحی کنید.

مقایسه کدنویسی اختصاصی و استفاده از افزونه

جدول زیر به شما کمک می‌کند متناسب با وضعیت فنی و نیاز سایت خود، بهترین روش را انتخاب کنید:

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

در نسخه‌های جدید ووکامرس، سیستم تسویه حساب مبتنی بر بلوک‌های گوتنبرگ (WooCommerce Checkout Block) معرفی شده است. این بلوک بر پایه React توسعه یافته و سرعت اجرای بالایی دارد، اما یک تفاوت ساختاری مهم با فرم‌های قدیم (Shortcode) دارد:

کدهای سنتی PHP (مانند woocommerce_checkout_fields) روی بلوک جدید تسویه حساب کار نمی‌کنند. اگر صفحه تسویه حساب شما از بلوک گوتنبرگ استفاده می‌کند، برای ویرایش فیلدها یا باید از تنظیمات خود بلوک در ویرایشگر وردپرس استفاده کنید، یا با کدهای جاوااسکریپت (React) آن را تغییر دهید، و یا اینکه برگه را به شورت‌کد قدیمی [woocommerce_checkout] بازگردانید تا توابع PHP اجرا شوند.

بهینه‌سازی تجربه کاربری (UX) برای افزایش فروش

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

1. فعال‌سازی خرید مهمان: هرگز کاربر را مجبور به ثبت‌نام قبل از پرداخت نکنید. اجازه دهید ابتدا خرید کند، سپس حساب کاربری برای او ساخته شود.
2. بهینه‌سازی سرعت صفحه: کندی این صفحه به معنای انصراف آنی خریدار است. بررسی تکنیک‌های بهینه‌سازی سرعت صفحه پرداخت برای حفظ مشتریان حیاتی است.
3. ساده‌سازی پیش‌نیازها: قبل از ورود کاربر به این برگه، حتماً با رعایت اصول طراحی سبد خرید کاربرپسند، قیمت شفاف و پیش‌فاکتور دقیقی ارائه دهید.
4. تنوع در راه‌های پرداخت: مطمئن شوید که فرآیند اتصال درگاه پرداخت به ووکامرس بدون خطا انجام شده و درگاه‌های پشتیبان نیز فعال باشند.
5. طراحی لندینگ‌های اختصاصی: اگر کمپین خاصی دارید، مطالعه راهنمای طراحی صفحه فرود حرفه‌ای فروش می‌تواند دیدگاه جامعی برای طراحی فرم‌های کم‌حجم به شما بدهد. همچنین با استفاده از استایل‌های کاربردی CSS می‌توانید ظاهر استپ‌ها و دکمه پرداخت را برجسته کنید.

پرسش‌های متداول

عیب‌یابی سریع و رفع خطاهای رایج