۴ روش ویرایش و تغییر فیلدهای تسویه حساب ووکامرس

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

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

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

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

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

۴ روش ویرایش و تغییر فیلدهای تسویه حساب ووکامرس

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

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

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

کافی است کدهای مورد نظر را مطابق با نیازتان کپی کرده و بعد از ورود به هاست خود، روی File Manager کلیک کنید. سپس وارد مسیر public_html/themes شده و بعد از اینکه وارد پوشه قالب فعال سایت خود شدید، کدها را در جای مناسبی از فایل functions.php قرار دهید.

توجه: اگر از قالب فرزند(Child-Theme) استفاده می‌کنید، بهتر است کدها را درون فایل فانکشن این پوشه قرار دهید تا هنگام آپدیت قالب این تغییرات از دست نرود.

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

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

/**  Remove all woocommerce checkout fields **/
function swp_remove_checkout_fields( $fields ) {

    // Billing fields
    unset( $fields['billing']['billing_company'] ); // نام شرکت
    unset( $fields['billing']['billing_email'] ); // آدرس ایمیل
    unset( $fields['billing']['billing_phone'] ); // شماره موبایل
    unset( $fields['billing']['billing_state'] ); // خیابان
    unset( $fields['billing']['billing_first_name'] ); // نام
    unset( $fields['billing']['billing_last_name'] ); // نام خانوادگی
    unset( $fields['billing']['billing_address_1'] ); // آدرس ۱
    unset( $fields['billing']['billing_address_2'] ); // آدرس ۲ (ادامه آدرس)
    unset( $fields['billing']['billing_city'] ); // شهر
    unset( $fields['billing']['billing_postcode'] ); // کد پستی
    unset( $fields['billing']['billing_country'] ); // کشور

    // Shipping fields
    unset( $fields['shipping']['shipping_company'] ); // شرکت حمل‌ونقل
    unset( $fields['shipping']['shipping_phone'] ); // موبایل حمل‌ونقل
    unset( $fields['shipping']['shipping_state'] ); // خیابان حمل‌ونقل
    unset( $fields['shipping']['shipping_first_name'] ); // نام حمل‌ونقل
    unset( $fields['shipping']['shipping_last_name'] ); // نام خانوادگی حمل‌ونقل
    unset( $fields['shipping']['shipping_address_1'] ); // آدرس ۱ حمل‌ونقل
    unset( $fields['shipping']['shipping_address_2'] ); // ادامه آدرس حمل‌ونقل
    unset( $fields['shipping']['shipping_city'] ); // شهر حمل‌ونقل
    unset( $fields['shipping']['shipping_postcode'] ); // کد پستی حمل‌ونقل
    unset( $fields['shipping']['shipping_country'] ); // کشور حمل‌ونقل

    // Order fields
    unset( $fields['order']['order_comments'] ); // یادداشت‌های سفارش

    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'swp_remove_checkout_fields' );

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

اختیاری کردن فیلد ایمیل و شماره تلفن ووکامرس:

گاهی اوقات ممکن است که بخواهید برخی فیلدهای ضروری را اختیاری کنید. در این صورت می‌توانید از کد زیر استفاده کنید.

function swp_adjust_checkout_fields( $fields ) {
    $fields['billing_phone']['required']    = false;
    $fields['billing_email']['required']    = false;

    return $fields;
}

add_filter( 'woocommerce_billing_fields', 'swp_adjust_checkout_fields');

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

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

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

function swp_validate_national_code($code) {
    if( !preg_match('/^[0-9]{10}$/',$code) )
        return false;
    for( $i=0; $i<10; $i++ )
        if( preg_match('/^'.$i.'{10}$/',$code) )
            return false;
        for( $i=0,$sum=0;$i<9;$i++ )
            $sum += ((10-$i) * intval(substr($code, $i,1)));
    $ret = $sum%11;
    $parity = intval(substr($code, 9,1));
    if( ($ret<2 && $ret==$parity) || ($ret>=2 && $ret==11-$parity) )
        return true;
    
    return false;
}

function swp_add_national_code_checkout_field() {
    echo '<div class="form-row form-row-wide woocommerce-additional-fields__field-wrapper">
                <label for="billing_national_code">' . __('کد ملی', 'your-theme-domain') . ' <span class="required">*</span></label>
                <span class="woocommerce-input-wrapper"><input type="text" class="input-text" name="billing_national_code" id="billing_national_code" value="' . esc_attr(isset($_POST['billing_national_code']) ? $_POST['billing_national_code'] : '') . '" /></span>
        </div>';
}
add_action('woocommerce_after_checkout_billing_form', 'swp_add_national_code_checkout_field');

function swp_validate_national_code_checkout_field() {
    $code = isset($_POST['billing_national_code']) ? sanitize_text_field($_POST['billing_national_code']) : '';
  
    if (!empty($code) && ! swp_validate_national_code($code)) {
        wc_add_notice( __( 'کد ملی وارد شده معتبر نیست.' ), 'error' );
    }
}
add_action('woocommerce_checkout_process', 'swp_validate_national_code_checkout_field');

function swp_save_national_code_checkout_field($order_id) {
    if (!empty($_POST['billing_national_code'])) {
        update_post_meta($order_id, 'billing_national_code', sanitize_text_field($_POST['billing_national_code']));
    }
}
add_action('woocommerce_checkout_update_order_meta', 'swp_save_national_code_checkout_field');

function swp_display_national_code_admin_order_meta($order){
    echo '<p><strong>'.__('کد ملی').':</strong> ' . get_post_meta( $order->id, 'billing_national_code', true ) . '</p>';
}
add_action( 'woocommerce_admin_order_data_after_billing_address', 'swp_display_national_code_admin_order_meta', 10, 1 );

با فانکشن بالا هم یک فیلد در صفحه تسویه حساب ووکامرس برای پر کردن کد ملی افزونه می‌شود و هم اینکه در صفحه جزئیات سفارش برای مدیر نمایش داده می‌شود. توجه کنید که این فانکشن فقط ۱۰ رقمی بودن کد ملی را بررسی می‌کند و فاقد اعتبارسنجی درست بودن کد ملی است. برای درستی‌سنجی لازم است از یک API استفاده کنید.

تغییر چینش فیلدهای تسویه حساب ووکامرس:

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

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

• فیلدهای پرداخت(Billing):
  • billing_first_name: 10
  • billing_last_name: 20
  • billing_company: 30
  • billing_address_1: 40
  • billing_address_2: 50
  • billing_city: 60
  • billing_postcode: 70
  • billing_country: 80
  • billing_state: 90
  • billing_email: 100
  • billing_phone: 110
• فیلدهای حمل‌ونقل(Shipping):
  • shipping_first_name: 10
  • shipping_last_name: 20
  • shipping_company: 30
  • shipping_address_1: 40
  • shipping_address_2: 50
  • shipping_city: 60
  • shipping_postcode: 70
  • shipping_country: 80
  • shipping_state: 90

حالا با توجه به عدد این فیلدها باید فیلد مد نظر را به کمک کد زیر جابه‌جا کنید.

function swp_reorder_woocommerce_checkout_fields( $checkout_fields ) {
    $checkout_fields['billing']['billing_email']['priority'] = 5;
    return $checkout_fields;
}

add_filter( 'woocommerce_checkout_fields', 'swp_reorder_woocommerce_checkout_fields' );

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

۲. افزونه ویرایش صفحه تسویه حساب ووکامرس

اگر نمی‌خواهید از کدنویسی استفاده کنید، افزونه ویرایشگر فیلدهای صفحه پرداخت ووکامرس نیز از دیگر روش‌های مدیریت فیلدها است. برای ایت منظور می‌توانید از افزونه‌های مختلفی نظیر WooCommerce Checkout Manager، Checkout Field Editor for WooCommerce یا YITH WooCommerce Checkout Manager استفاده کنید.

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

• امکان نمایش یا عدم نمایش فیلدها
• امکان اختیاری یا اجباری کردن فیلدها
• قابلیت تغییر نوع فیلدها به متنی یا عددی
• امکان افزودن فیلد دلخواه
• امکان تغییر جایگاه و ترتیب نمایش فیلدها

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

1. از این بخش می‌توانید به ترتیب فیلدهای پرداخت، حمل‌ونقل و فیلدهای اختیاری را مدیریت کنید.
2. با کلیک روی دکمه Add field امکان افزودن فیلد دلخواه را در اختیار دارید.
3. با استفاده از Remove می‌توانید فیلد دلخواهی را حذف کنید.
4. با استفاده از Enable می‌توانید فیلدهای غیرفعال شده را فعال کنید.
5. با استفاده از Disable می‌توانید یک فیلد خاص را غیرفعال کنید.
6. با استفاده از این دکمه می‌توانید چینش و ترتیب فیلدها را تغییر دهید.
7. با کلیک روی دکمه Edit امکان ویرایش فیلدها را مانند تصویر زیر در اختیار خواهید داشت.

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

۳. شخصی سازی تسویه حساب ووکامرس با ویرایشگر بلوک

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

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

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

۴. تنظیمات سفارشی سازی صفحه پرداخت وردپرس

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

سپس مانند تصویر بالا از ستون سمت راست به مسیر ووکامرس> تسویه حساب مراجعه کنید. همانطور که می‌بینید در این صفحه امکان تغییرات زیر را برای فیلدهای صفحه تسویه حساب ووکامرس دارید:

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

جمع‌بندی نهایی

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

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

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