راهنمای طراحی فیلدهای پرداخت سفارشی در ووکامرس: چگونه با “کوتاه کردن فرم”، فروش را “بلند” کنیم؟

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

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

• “آیا این سفارش هدیه است؟”

• “کد ملی (برای اداره پست) چیست؟”

• “کی خانه هستید تا تحویل دهیم؟”

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

فاز اول: استراتژی UX (چه چیزی را حذف و چه چیزی را اضافه کنیم؟)

قبل از دستکاری فنی، باید منطق را بچینیم.

۱. پاکسازی (Decluttering)

ووکامرس برای بازار جهانی ساخته شده، نه ایران. این فیلدها در ایران معمولاً قاتل نرخ تبدیل هستند و باید حذف یا غیرالزامی شوند:

• نام شرکت (Company Name): مگر اینکه سایت B2B (فروش عمده) باشید.

• آدرس خط دوم (Address Line 2): در ایران آدرس‌ها معمولاً در یک خط جا می‌شوند.

• کد پستی (Postal Code): اگر ارسال با پیک موتوری دارید، کد پستی لازم نیست (فقط برای پست پیشتاز اجباری است). اگر هر دو روش را دارید، آن را شرطی کنید.

۲. افزودن فیلدهای ارزشمند (Value-Add Fields)

برای خشکبار، این فیلدها تجربه خرید را ارتقا می‌دهند:

• زمان تحویل (Delivery Time Slot): “صبح” یا “عصر”؟ (مشتری آجیل نمی‌خواهد بسته‌اش پشت در بماند و مورچه بزند).

• گزینه هدیه (Gift Option): یک چک‌باکس: “آیا فاکتور قیمت حذف شود؟” (بسیار مهم برای مناسبت‌ها).

• توضیحات حساسیت: “آیا به گلوتن یا بادام زمینی حساسیت دارید؟” (نشان‌دهنده حرفه‌ای بودن شما).

روش اول: استفاده از افزونه (The Easy Way)

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

افزونه Checkout Field Editor for WooCommerce (توسط ThemeHigh)

این استانداردترین و محبوب‌ترین افزونه رایگان (با نسخه پرو) است.

امکانات کلیدی:

1. حذف و ویرایش: به راحتی با زدن دکمه “Disable”، فیلد “نام شرکت” را غیرفعال می‌کنید.

2. تغییر لیبل: به جای “کد پستی”، بنویسید: “کد پستی (الزامی برای شهرستان)”.

3. افزودن فیلد جدید: می‌توانید انواع فیلدها را اضافه کنید:

   • Text: برای کد ملی.

   • Select (منوی کشویی): برای انتخاب بازه زمانی ارسال.

   • Checkbox: برای “بسته‌بندی کادویی”.

   • Date Picker: برای انتخاب روز تحویل (در نسخه پرو).

نکته UX: ترتیب فیلدها را درگ‌ان‌د‌راپ (Drag & Drop) کنید. مثلاً “شماره موبایل” را به ابتدای فرم بیاورید، چون برای ایرانی‌ها مهم‌ترین شناسه است.

روش دوم: کدنویسی با هوک‌ها (The Developer Way)

امیررضا جان، به عنوان طراح وب، استفاده از کد در functions.php قالب (یا افزونه Code Snippets) سایت را سبک‌تر و حرفه‌ای‌تر می‌کند.

۱. حذف فیلدهای اضافی (Unset Fields)

این کد فیلدهای مزاحم را کامل حذف می‌کند:

add_filter( 'woocommerce_checkout_fields' , 'remove_extra_checkout_fields' );

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

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

می‌خواهید ایمیل را اختیاری کنید؟

add_filter( 'woocommerce_billing_fields', 'make_email_optional' );

function make_email_optional( $fields ) {
    $fields['billing_email']['required'] = false; // false برای اختیاری، true برای اجباری
    return $fields;
}

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

این کد یک فیلد جدید اضافه می‌کند و در سفارش ذخیره می‌کند:

// 1. افزودن فیلد به فرم
add_action( 'woocommerce_after_order_notes', 'add_national_code_field' );

function add_national_code_field( $checkout ) {
    echo '<div id="custom_checkout_field"><h3>اطلاعات تکمیلی</h3>';
    
    woocommerce_form_field( 'national_code', array(
        'type'          => 'text',
        'class'         => array('my-field-class form-row-wide'),
        'label'         => __('کد ملی'),
        'placeholder'   => __('برای صدور فاکتور رسمی و بیمه پست'),
        'required'      => true, // اجباری بودن
    ), $checkout->get_value( 'national_code' ));

    echo '</div>';
}

// 2. اعتبارسنجی فیلد (Validation)
add_action('woocommerce_checkout_process', 'validate_national_code');

function validate_national_code() {
    if ( ! $_POST['national_code'] )
        wc_add_notice( __( 'لطفاً کد ملی را وارد کنید.' ), 'error' );
    // اینجا می‌توان الگوریتم صحت کد ملی را هم اضافه کرد
}

// 3. ذخیره در دیتابیس سفارش
add_action( 'woocommerce_checkout_update_order_meta', 'save_national_code' );

function save_national_code( $order_id ) {
    if ( ! empty( $_POST['national_code'] ) ) {
        update_post_meta( $order_id, 'National Code', sanitize_text_field( $_POST['national_code'] ) );
    }
}

فاز سوم: طراحی بصری (CSS & Styling)

فرم پرداخت باید زیبا و خوانا باشد. فیلدها نباید خیلی ریز یا خیلی پهن باشند.

۱. طراحی دو ستونه (Two-Column Layout)

در موبایل، فیلدها زیر هم هستند. اما در دسکتاپ، بهتر است فیلدها (مثلاً استان و شهر) کنار هم باشند تا ارتفاع فرم کم شود.

• کد CSS: کلاس‌های form-row-first و form-row-last را به فیلدها بدهید تا ۵۰٪ عرض را بگیرند.

۲. اینپوت ماسک (Input Mask)

این یک تکنیک UX عالی است. کاری کنید که وقتی کاربر شماره موبایل می‌زند، خودکار فرمت شود (مثلاً 0912-123-4567).

• ابزار: این کار معمولاً با جاوااسکریپت (کتابخانه jQuery Mask Plugin) یا افزونه‌های پیشرفته فرم‌ساز انجام می‌شود. این کار خطای تایپی را به صفر می‌رساند.

فاز چهارم: چالش‌های خاص خشکبار و راهکارها

۱. آدرس‌دهی روی نقشه (Map Selection)

تایپ کردن آدرس برای کاربر سخت است.

• راهکار: از افزونه‌های “انتخاب آدرس از روی نقشه” (مثل افزونه‌های حمل‌ونقل ایرانی) استفاده کنید. کاربر لوکیشن را پین می‌کند و فیلدهای استان، شهر و آدرس به طور خودکار پر می‌شوند. این انقلاب UX در ایران است.

۲. اعتبارسنجی موبایل (OTP)

برای جلوگیری از سفارشات فیک (که در پرداخت درب منزل رایج است)، حتماً شماره موبایل را با کد تایید (OTP) اعتبارسنجی کنید. افزونه‌هایی مثل Digits این کار را عالی انجام می‌دهند و حتی ایمیل را از پروسه حذف می‌کنند (Login with Mobile).

بخش پرسش و پاسخ فنی (FAQ)

۱. آیا حذف فیلد ایمیل کار درستی است؟ در ایران، بله! اکثر مردم ایمیل ندارند یا چک نمی‌کنند. استفاده از شماره موبایل به عنوان شناسه اصلی (User ID) نرخ ثبت نام و خرید را به شدت افزایش می‌دهد.

۲. آیا این تغییرات با آپدیت ووکامرس پاک می‌شوند؟ اگر از افزونه استفاده کنید یا کدها را در functions.php قالب چایلد (Child Theme) بگذارید، خیر پاک نمی‌شوند. اما اگر مستقیم در هسته ووکامرس دست ببرید، بله پاک می‌شوند (که کار غلطی است).

۳. چگونه فیلدها را فقط برای محصولات خاصی نشان دهیم؟ مثلاً فیلد “متن کارت پستال” فقط وقتی نمایش داده شود که کاربر “پک هدیه” خریده است.

• راهکار: این نیاز به Conditional Logic (منطق شرطی) دارد. افزونه “Checkout Field Editor Pro” این قابلیت را دارد.

جمع‌بندی: هر فیلد، یک مانع یا یک فرصت؟

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

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