woocommerce_checkout_fields - 20 Code -Beispiele zum Anpassen von WooCommerce -Kasse

Passen Sie Ihre WooCommerce -Kasse ohne Plugin an? Es ist möglich - wenn Sie mit ein paar Php -Zeilen zufrieden sind. In diesem Beitrag finden Sie 20 Codes-Snippets, die mit dem Filter woocommerce_checkout_fields sorgen. Sie decken Fälle im realen Leben ab, wie das Entfernen von Feldern, das Umbenennen von Etiketten oder das Hinzufügen neuer Optionen.

Wenn Sie keine Codierung haben, machen Sie sich keine Sorgen - wir zeigen Ihnen auch, wie Sie das Plugin für flexible Checkout -Felder verwenden, um das gleiche Ergebnis visuell zu erzielen.

Was ist die Anpassung der Checkouts und wie hilft es, Conversions zu verbessern?

In Ihrer Kasse werden Besucher Kunden. Wenn es jedoch mit unnötigen Feldern überfüllt ist oder die Flexibilität fehlt, kann dies zu Reibung führen. Das Anpassen der Kasse hilft, das Ablassen zu verringern, Einkäufe zu beschleunigen und eine bessere Erfahrung zu schaffen.

WooCommerce verfügt über einen flexiblen Filter: woocommerce_checkout_fields . Sie können es verwenden, um die Abrechnung, den Versand oder zusätzliche Felder zu ändern. Es ist perfekt für Entwickler, die die Kontrolle über die Sichtbarkeit, den Reihenfolge und den Inhalt der Feldkontrolle wünschen.

20 Codebeispiele mit WooCommerce_Checkout_Fields -Filter

Nachfolgend finden Sie 20 Beispiele. Fügen Sie diese Snippets den functions.php Ihres Kindes oder einem benutzerdefinierten Plugin hinzu.

1. Entfernen Sie das zweite Adressfeld

 // This code allows disabling the second address field. add_filter('woocommerce_checkout_fields','hide_address_2_field_classic_checkout'); function hide_address_2_field_classic_checkout($fields) { unset ($fields['billing']['billing_address_2']); return $fields; }

2. Versteckt das Telefonfeld

 // This code allows hiding the phone field add_filter('woocommerce_checkout_fields', 'hide_billing_phone_field_classic_checkout'); function hide_billing_phone_field_classic_checkout($fields) { unset ($fields['billing']['billing_phone']); return $fields; }

3. Machen Sie das E -Mail -Feld optional

 // This code makes the email field optional add_filter('woocommerce_checkout_fields', 'optional_billing_email_field_classic_checkout'); function optional_billing_email_field_classic_checkout($fields) { $fields['billing']['billing_email']['required'] = false; return $fields; }

V.

 // This code allows adding the placeholder of the name and last name fields add_filter('woocommerce_checkout_fields', 'add_name_placeholders_classic_checkout'); function add_name_placeholders_classic_checkout($fields) { $fields['billing']['billing_first_name']['placeholder'] = 'Enter your name'; $fields['billing']['billing_last_name']['placeholder'] = 'Enter your surname'; return $fields; }

5. "Nachname" in "Nachname" umbenennen

 // This code allows changing the last name field's label add_filter('woocommerce_checkout_fields', 'change_last_name_label_classic_checkout'); function change_last_name_label_classic_checkout($fields) { $fields['billing']['billing_last_name']['label'] = 'Surname'; return $fields; });

6. Fügen Sie ein benutzerdefiniertes Textfeld hinzu

 // This code allows adding a new text field after the email field add_filter('woocommerce_checkout_fields', 'add_custom_text_field_classic_checkout'); function add_custom_text_field_classic_checkout($fields) { $fields['billing']['billing_extra_field'] = [ 'label' => 'Custom text field', 'type' => 'text', 'required' => false, 'priority' => 120, ]; return $fields; }

7. Fügen Sie eine TextArea für Lieferanweisungen hinzu

 // This code allows adding a textarea field after the email field and the custom field from the previous example - with further priority add_filter('woocommerce_checkout_fields', 'add_custom_textarea_field_classic_checkout'); function add_custom_textarea_field_classic_checkout($fields) { $fields['billing']['delivery_instructions'] = [ 'label' => 'Delivery instructions', 'type' => 'textarea', 'required' => false, 'priority' => 130, ]; return $fields; }

8. Setzen Sie die benutzerdefinierte CSS -Klasse

 // This code allows adding custom CSS classes to the first and last name fields add_filter('woocommerce_checkout_fields', 'add_custom_css_classes_classic_checkout'); function add_custom_css_classes_classic_checkout($fields) { $fields['billing']['billing_first_name']['class'] = ['form-row-wide primary']; $fields['billing']['billing_last_name']['class'] = ['form-row-wide secondary effect']; return $fields; }

9. E -Mail -Feld Priorität ändern

 /* This code allows moving email after the last name field. The default priority for billing fields: billing_first_name (10) billing_last_name (20) billing_company (30) billing_country (40) billing_address_1 (50) billing_address_2 (60) billing_city (70) billing_state (80) billing_postcode (90) billing_phone (100) billing_email (110) */ add_filter('woocommerce_checkout_fields', 'place_email_after_last_name_classic_checkout'); function place_email_after_last_name_classic_checkout($fields) { $fields['billing']['billing_email']['priority'] = 25; return $fields; }

10. Postleitfeld entfernen

 // This code allows disabling the postcode field. add_filter('woocommerce_checkout_fields','disable_postcode_field_classic_checkout'); function disable_postcode_field_classic_checkout($fields) { unset ($fields['billing']['billing_postcode']); return $fields; }

11. Vorname nach dem Nachnamen nachbestellen

 // This code allows moving the first name field after the last name field add_filter('woocommerce_checkout_fields', 'place_first_name_after_last_name_classic_checkout'); function place_first_name_after_last_name_classic_checkout($fields) { $fields['billing']['billing_first_name'] = array( 'priority' => 22, 'class' => 'form-row-last', 'label' => 'First name', ); $fields['billing']['billing_last_name']['class'] = 'form-row-first'; return $fields; }

12. Fügen Sie ein Kontrollkästchen für die Rechnungsanforderung hinzu

 // This code allows adding a custom checkbox for invoice request. add_filter('woocommerce_checkout_fields', 'add_custom_checkbox_field_classic_checkout'); function add_custom_checkbox_field_classic_checkout($fields) { $fields['billing']['request_invoice'] = [ 'label' => 'Request invoice', 'type' => 'checkbox', 'required' => false, 'priority' => 140, ]; return $fields; }

13. Hinzufügen von Dropdown für die Lieferzeit auswählen

 // This code allows adding a custom select field add_filter('woocommerce_checkout_fields', 'add_custom_select_classic_checkout'); function add_custom_select_classic_checkout($fields) { $fields['billing']['delivery_time'] = [ 'label' => 'Delivery time', 'type' => 'select', 'options' => [ '' => 'Select...', 'morning' => 'Morning', 'evening' => 'Evening', ], 'priority' => 150, ]; return $fields; }

14. Bestellkommentare vor dem Fill

 // This code allows adding a default field value for order notes add_filter('woocommerce_checkout_fields', 'add_default_value_extra_notes_classic_checkout'); function add_default_value_extra_notes_classic_checkout($fields) { $fields['order']['order_comments']['default']= 'No comments'; return $fields; }

15. Fügen Sie ein benutzerdefiniertes Feld hinzu

 // This code allows adding a custom number field add_filter('woocommerce_checkout_fields', 'add_custom_number_field_classic_checkout'); function add_custom_number_field_classic_checkout($fields) { $fields['billing']['number_field'] = [ 'label' => 'Number field', 'type' => 'number', 'validate' => 'number', 'required' => false, 'priority' => 200, ]; return $fields; }

16. Fügen Sie einen Date Picker hinzu

 // This code adds a custom date picker add_filter('woocommerce_checkout_fields', 'add_custom_datepicker_classic_checkout'); function add_custom_datepicker_classic_checkout($fields) { $fields['billing']['pickup_date'] = [ 'label' => 'Pickup date', 'type' => 'date', 'validate' => 'date', 'required' => false, 'priority' => 170, ]; return $fields; }

17. Deaktivieren Sie die Telefonvalidierung

 // This code removes the phone field validation add_filter('woocommerce_checkout_fields', 'remove_phone_field_validation_classic_checkout'); function remove_phone_field_validation_classic_checkout($fields) { $fields['billing']['billing_phone']['validate'] = false; return $fields; }

18. Machen Sie das Versandlandfeld zuletzt erscheinen

 /* This code allows moving shipping country after the last field. The default priority for shipping fields: shipping_first_name (10) shipping_last_name (20) shipping_company (30) shipping_country (40) shipping_address_1 (50) shipping_address_2 (60) shipping_city (70) shipping_state (80) shipping_postcode (90) */ add_filter('woocommerce_checkout_fields', 'place_country_after_last_field_classic_checkout'); function place_country_after_last_field_classic_checkout($fields) { $fields['shipping']['shipping_country']['priority'] = 999; return $fields; }

19. Entfernen Sie den Versandpostcode Feld

 // This code allows disabling the shipping postcode field. add_filter('woocommerce_checkout_fields','disable_shipping_postcode_field_classic_checkout'); function disable_shipping_postcode_field_classic_checkout($fields) { unset ($fields['shipping']['shipping_postcode']); return $fields; }

20. Fügen Sie ein benutzerdefiniertes Feld nach Bestelldetails hinzu

 // This code allows adding a new text field after the order notes add_filter('woocommerce_checkout_fields', 'add_custom_text_field_after_order_notes_classic_checkout'); function add_custom_text_field_after_order_notes_classic_checkout($fields) { $fields['order']['order_extra_field'] = [ 'label' => 'Text field', 'type' => 'text', 'required' => false, 'priority' => 20, ]; return $fields; }

So stellen Sie die Kasse ohne Codierung mit flexiblen Checkout -Feldern an

Kein Entwickler? Kein Problem. Mit dem Plugin Flexible Checkout Fields können Sie alle oben genannten - visuell, von Ihrem WordPress -Dashboard aus erledigen.

• Fügen Sie Felder mit Drag & Drop hinzu, entfernen und neu
  

  

• Bearbeiten Sie Etiketten, Platzhalter und Standardwerte
• Stellen Sie Felder nach Bedarf ein, optional oder versteckt
  

  

• Wenden Sie CSS -Klassen oder Validierungsregeln an
  

  

• Wählen Sie Abschnitt: Abrechnung, Versand oder zusätzliche Informationen
• Standardwerte für Tests oder UX -Zwecke zuweisen
• Alles ohne Bearbeitung von PHP oder Schreiben von benutzerdefiniertem Code

Ergebnisse ohne Entwicklungsaufwand.

Flexible Checkout Fields Pro - Erweiterte Funktionen

Willst du mehr Kraft und Flexibilität? Die Pro -Version fügt erweiterte Funktionen hinzu:

• Bedingte Logik zum Anzeigen/Versteck Felder basierend auf CART -Inhalten oder Benutzerdaten
• Unterstützung für zusätzliche Feldtypen: Datumspicker, Zeitpicker, Radio mit Farben oder Bildern und mehr
• Sichtbarkeitskontrolle für Benutzerrollen - Zeigen Sie verschiedene Felder auf B2B- und B2C -Benutzer an
• Feldanzeige basierend auf ausgewählter Versand- oder Zahlungsmethode
• Zusätzlicher Preis pro Feldeinstellungen

Möglicherweise sehen Sie die Plugin -Funktionen auf seiner Produktseite.

Zusammenfassung: Welche Methode ist am besten für Ihre Kasse geeignet?

Die Verwendung woocommerce_checkout_fields ist eine leistungsstarke Möglichkeit, die WooCommerce -Checkout anzupassen. Es erfordert jedoch sorgfältige Codierung und Tests. Außerdem muss man sich um die Code- und Themenaktualisierungen kümmern.

Wenn Sie zuversichtlich sind, Ihr Thema zu bearbeiten, sollten die 20 obigen Beispiele Ihnen helfen, die meisten häufigsten Szenarien zu bewältigen.

Für alle anderen bietet die flexiblen Checkout-Felder für WooCommerce-Plugin jedoch eine benutzerfreundliche Alternative ohne Code mit noch mehr Optionen in der Pro-Version.

Schlüsselpunkte

• Mit dem Filter woocommerce_checkout_fields können Sie das Checkout -Formular mit PHP anpassen
• Sie können es verwenden, um Felder hinzuzufügen, zu entfernen, umzubenennen, nachzuordnen oder zu stylen
• Flexible Checkout -Felder -Plugin erledigt das Gleiche - jedoch ohne Code erforderlich
• Die Pro -Version fügt bedingte Logik, zusätzliche Feldtypen und Feldpreisregeln hinzu
• Wählen Sie die Methode aus, die zu Ihrem Workflow: Code for Control, Plugin für Geschwindigkeit passt