שדות בעמוד תשלום בווקומרס, איך להוסיף, להסיר ולשנות אותם?

ווקומרס הוא אחד הפתרונות הפופולריים ביותר לניהול חנויות אינטרנטיות בוורדפרס. עם זאת, ברירת המחדל של שדות בעמוד תשלום אינה תמיד מתאימה לכל חנות. ייתכן שתרצו להסיר שדות לא רלוונטיים, להפוך שדות מסוימים לאופציונליים או להוסיף שדות מותאמים אישית.

במאמר אני אלמד אתכם כיצד לבצע התאמות אישיות לשדות בעמוד תשלום של ווקומרס באמצעות קוד PHP פשוט שאותו תדביקו בקובץ functions.php של ערכת הבת שלכם, כך שהשינויים לא יימחקו בעת עדכון התבנית הראשית.

התאמה אישית של שדות בעמוד תשלום

ניתן לשנות את השדות בעמוד תשלום על ידי שימוש בפילטרים ופעולות של ווקומרס. הקוד הבא יאפשר לכם:

• להסיר שדות מיותרים
• להפוך שדות מסוימים ללא חובה ולהיפך
• להוסיף שדה מותאם אישית ולקבוע את מקומו בטופס

הסרת שדות בעמוד תשלום והפיכתם ללא חובה

במקרים רבים, ייתכן שתרצו להסיר שדות מסוימים מהטופס או להפוך אותם לאופציונליים כדי להקל על הלקוחות. לדוגמה, בקוד הבא אנו מסירים את השדות:

• כתובת נוספת (billing_address_2)
• מחוז/מדינה (billing_state)

בנוסף, אנו מגדירים שהשדה “מדינה” לא יהיה חובה:

function eliko_customize_woocommerce_fields( $fields ) {
    // להפוך את השדות ללא חובה לפני ההסרה
    if ( isset( $fields['billing']['billing_address_2'] ) ) {
        $fields['billing']['billing_address_2']['required'] = false;
    }
    if ( isset( $fields['billing']['billing_state'] ) ) {
        $fields['billing']['billing_state']['required'] = false;
    }

    // כעת להסיר את השדות
    unset( $fields['billing']['billing_address_2'] );
    unset( $fields['billing']['billing_state'] );

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

איך זה עובד?

הנה הסבר קטן על החלקים של הקוד בשביל שאתם תדעו לשנות אותו בהתאם לצורך.

איך מסירים שדה קיים בשדות בעמוד תשלום?

כדי להסיר שדה, משתמשים בפונקציה unset(), שמוחקת את השדה מהמערך של ווקומרס. לדוגמה:

unset( $fields['billing']['billing_address_2'] ); // הסרת השדה "כתובת נוספת"

אם תרצו להסיר שדות אחרים, פשוט שנו את שם השדה המתאים.

איך הופכים שדה ל-“לא חובה”?

אם יש שדה שתרצו להשאיר אבל לא להפוך לחובה, משנים את המאפיין required לערך false:

$fields['billing']['billing_state']['required'] = false; // הפיכת השדה "מדינה/מחוז" ללא חובה

כמובן שניתן לשלב את שתי הפעולות (שינוי חובה והסרה) יחד לפי הצורך. כמו שעשיתי בקוד המלא למעלה.

הוספת שדה חדש מותאם אישית

במקרים מסוימים, תיהיו זקוקים לשדה חדש נוסף להזנת מידע ייחודי, כמו מספר עוסק. ניתן להוסיף שדה זה בקלות. ואפילו קבעתי בקוד שהוא יהיה מיד אחרי השדה “שם החברה” עם הקוד הבא.

$fields['billing']['dealer_number'] = array(
    'label'       => __('מספר עוסק', 'woocommerce'),
    'placeholder' => __('הכנס מספר עוסק', 'woocommerce'),
    'required'    => false, // לא חובה
    'class'       => array('form-row-wide'), // השדה יתפרס על כל השורה
    'clear'       => true,
    'priority'    => 30, // מיקום מיד אחרי 'billing_company'
);

בשביל שהקוד הזה יעבוד, כמובן שתצטרכו להכניס אותו בתוך הפונקצייה eliko_customize_woocommerce_fields שלמעלה. הנה הקוד המלא כולל הוספת השדה החדש

function eliko_customize_woocommerce_fields( $fields ) {
    // להפוך את השדות ללא חובה לפני ההסרה
    if ( isset( $fields['billing']['billing_address_2'] ) ) {
        $fields['billing']['billing_address_2']['required'] = false;
    }
    if ( isset( $fields['billing']['billing_state'] ) ) {
        $fields['billing']['billing_state']['required'] = false;
    }

    // כעת להסיר את השדות
    unset( $fields['billing']['billing_address_2'] );
    unset( $fields['billing']['billing_state'] );
    
    
    // הוספת שדה מותאם אישית: "מספר עוסק"
    $fields['billing']['dealer_number'] = array(
        'label'       => __('מספר עוסק', 'woocommerce'),
        'placeholder' => __('הכנס מספר עוסק', 'woocommerce'),
        'required'    => false, // לא חובה
        'class'       => array('form-row-wide'), // השדה יתפרס על כל השורה
        'clear'       => true,
        'priority'    => 30, // מיקום מיד אחרי 'billing_company'
    );

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

שמירת הנתון של השדה החדש והצגתו בממשק ניהול ההזמנות

אבל עדיין לא סיימנו,, אנחנו רוצים שהשדה הזה יהיה שמור בתוך מסד הנתונים של ווקומרס ובנוסף שיהיה מוצג בממשק ניהול ההזמנות של ווקומרס וככה המנהלים יוכלו לראות את הנתונים. ולכן נוסיף שתי פונקציות חדשות שאחראיות לכך

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

function eliko_display_dealer_number_on_admin_order( $order ) {
    $dealer_number = get_post_meta( $order->get_id(), '_dealer_number', true );

    if ( ! empty( $dealer_number ) ) {
        echo '<p><strong>' . __('מספר עוסק', 'woocommerce') . ':</strong> ' . esc_html( $dealer_number ) . '</p>';
    }
}
add_action( 'woocommerce_admin_order_data_after_billing_address', 'eliko_display_dealer_number_on_admin_order' );

רשימת השדות של ווקומרס

להלן, רשימת השדות של ווקמרס לפי הדוקומנטציה של ווקומרס לשימושכם להורדת ולשינוי השדות.

• Billing
  • billing_first_name
  • billing_last_name
  • billing_company
  • billing_address_1
  • billing_address_2
  • billing_city
  • billing_postcode
  • billing_country
  • billing_state
  • billing_email
  • billing_phone
• Shipping
  • shipping_first_name
  • shipping_last_name
  • shipping_company
  • shipping_address_1
  • shipping_address_2
  • shipping_city
  • shipping_postcode
  • shipping_country
  • shipping_state
• Account
  • account_username
  • account_password
  • account_password-2
• Order
  • order_comments
    

סיכום

התאמה אישית של השדות בעמוד הצ׳קאאוט בווקומרס מאפשרת שיפור משמעותי בחוויית המשתמש ובהתאמת תהליך הרכישה לצרכים של העסק שלכם. וכאן יצרנו קוד שמטפל בשדות עמוד התשלום בצורה פשוטה ובלי צורך בתוספים מיותרים.

• למדנו להסיר שדות לא נחוצים
• למדנו לשנות שדות קיימים ולהפוך אותם ללא חובה
• למדנו להוסיף שדה מותאם אישית ולשמור את הנתון בהזמנה

שימוש נכון בשינויים הללו יכול להפוך את חוויית הרכישה לחלקה ומקצועית יותר, ולסייע בשיפור שיעורי ההמרה באתר!

בהצלחה תותחים! 💪 😃