De volledige handleiding voor het ontwikkelen van aangepaste betaalvelden in WooCommerce: van basisbeginselen tot praktijkervaring.

Waarom zijn customiserbare afrekenvelden nodig?

De standaardafrekeningspagina van WooCommerce biedt basisgegevens zoals naam, adres en e-mailadres aan, maar voor veel specifieke bedrijfsomstandigheden zijn deze gegevens niet voldoende. Denk hierbij aan een winkel die custom cakes verkoopt en gegevens over de opdracht (bijv. wensen voor op de cake) nodig heeft, een B2B-winkelierswebsite die de bedrijfsidentificatienummer van de klanten vereist, of een evenementenwebsite die de identiteitsgegevens van de deelnemers nodig heeft voor verificatie. In dergelijke gevallen moeten ontwikkelaars zelf afrekeningsvelden aanpassen om de unieke behoeften van het bedrijf te kunnen vervullen.

Aanpasbare velden niet alleen het gebruikersgemak verbeteren en de afrekeningsprocedure meer in overeenstemming brengen met de bedrijfsprocessen, maar bieden ook belangrijke gegevens voor het latere beheer van klanten, het verwerken van bestellingen en zelfs marketingacties. Door deze velden op de backend en in e-mails correct weergeven, wordt de volledigheid van de informatie tijdens het hele bestelproces gewaarborgd.

Uitlegging van de kernmethoden en hooks

WooCommerce beschikt over een krachtig en flexibele systeem van hooks, waardoor we de afrekeningspagina op diepe manier kunnen aanpassen zonder de kerncode te hoeven bewerken. Het toevoegen van aangepaste velden omvat in principe drie belangrijke stappen: het toevoegen van de velden, het verifiëren van de gegevens en het opslaan en weergeven van deze gegevens. Elke stap correspondeert met een specifiek WooCommerce-action-hook of filter-hook.

Filter voor het toevoegen van velden

De toevoeging van velden gebeurt voornamelijk via… woocommerce_checkout_fields Dit wordt gerealiseerd met een filter. Met deze filter kunnen we nieuwe invoervelden, vervolgkeuzemenu's of keuzevakken toevoegen aan verschillende delen van het afrekenformulier, zoals het “rekening”-gebied, het “levering”-gebied of het aangepaste “orderextra informatie”-gebied.

De ontwikkelaar moet een callback-functie schrijven die een bestaande array met velden ontvangt en deze array na aanpassingen teruggeeft. Binnen de functie kan men nauwkeurig bepalen welke type, labels, plaatshouders, vereisten (of niet), prioriteiten (voor sortering) en CSS-klassen de nieuwe velden moeten hebben.

UltaHost WordPress-hosting

30-daagse garantie voor het terugbetalen van het geld, onbeperkt bandbreedte- en databestand, gratis DDoS-beveiliging, en een prijsvoordeel van 50% bij een aankoop van 3 jaar.

toegangspagina

Hook voor het valideren van velden

Wanneer een gebruiker het afrekeningsformulier indient, moeten we ervoor zorgen dat de gegevens in de aangepaste velden voldoen aan de vereisten. Hiervoor is het nodig om… woocommerce_checkout_process Action hook. In de callback-functie van deze hook kunnen we toegang krijgen tot… $_POST De door de globale variabelen ingediende gegevens worden verstuurd en vervolgens gevalideerd.

Als voorbeeld kan worden gecontroleerd of een vereist veld leeg is, of of de formatie van een telefoonnummer correct is. Als de verificatie mislukt, kan er worden gehandeld volgens de vastgestelde procedure. wc_add_notice() De functie toont de gebruiker een foutmelding, waardoor de afsluitingsprocedure niet verder kan gaan.

Hooken die worden gebruikt om gegevens op te slaan en weergeven

Nadat de gebruiker een bestelling heeft ingediend, moeten de gegevens van de aangepaste velden veilig worden opgeslagen in de metadata van de bestelling. Dit wordt gerealiseerd door... woocommerce_checkout_update_order_meta De actie wordt afgerond met behulp van een ‘action hook’. In de callback-functie van deze hook kunnen we verschillende dingen gebruiken. update_post_meta() De functie slaat de gevalideerde formulierwaarden op in de corresponderende bestelling. wp_postmeta In de database-tabel.

Na het opslaan moeten de gegevens meestal op drie plaatsen worden weergegeven: op de orderdetailspagina in het administratieve backend, in de bevestigingse-mail die de gebruiker ontvangt, en in het overzicht van de orders in het klantenaccount. Dit betekent dat er aanpassingen worden gemaakt aan de beheerinterface, de e-mailtemplates en de front-end-klantenpagina's.

Praktijk: toevoegen van een veld voor “giftboodje”

Hieronder laten we zien hoe je met een volledig voorbeeld een tekstvak voor “giftboodje” kunt toevoegen aan een online bloemwinkel. Dit veld zal zich bevinden in het deel met de orderinformatie en is optioneel. De inhoud van dit veld wordt opgeslagen en wordt zowel in de achtergrond als in de e-mail weergegeven.

Step 1: Voeg de velden toe aan de afrekeningspagina

Allereerst moeten we gebruikmaken van... woocommerce_checkout_fields We gebruiken een filter om dit nieuwe veld te registreren. We voegen het toe naast het veld “Opmerkingen over de bestelling”. Hier is de implementatiecode die moet worden toegevoegd aan het subthema: functions.php Het kan worden toegevoegd in de bestand of via een aangepaste functie-/plug-in.

add_filter( 'woocommerce_checkout_fields', 'add_custom_checkout_field' );
function add_custom_checkout_field( $fields ) {
    $fields['order']['gift_message'] = array(
        'type'        => 'textarea',
        'class'       => array('form-row-wide'),
        'label'       => __('礼品祝福留言', 'your-text-domain'),
        'placeholder' => __('请输入您想写在贺卡上的祝福语（可选）', 'your-text-domain'),
        'required'    => false,
        'priority'    => 25, // 显示在订单备注（priority 21）之后
    );
    return $fields;
}

Deze code maakt een… textarea Een veld van type “type”, met de label ‘Geschenkwoorden en gelukwensen’, is voorzien van de corresponderende plaatshouders en CSS-klassen.priority De parameters bepalen waar de inhoud wordt weergegeven.

Stap 2: Opslaan van veldgegevens in de bestelling

Volgens de beschrijving moeten we de berichtjes die de gebruikers invullen bij het maken van een bestelling opslaan. Hiervoor kunnen we een aantal stappen ondernemen: woocommerce_checkout_update_order_meta Het wordt gerealiseerd met een hook.

hosting.com gedeelde hosting

Hoge prestaties met AMD EPYC CPU's, NVMe SSD opslag en LiteSpeed, 24/7 deskundige interne ondersteuning, geavanceerde beveiligingsmaatregelen waaronder SSL, bescherming tegen brute kracht, malware en DDoS, besparingen tot 73%

toegangspagina

add_action( 'woocommerce_checkout_update_order_meta', 'save_custom_checkout_field' );
function save_custom_checkout_field( $order_id ) {
    if ( ! empty( $_POST['gift_message'] ) ) {
        update_post_meta( $order_id, '_gift_message', sanitize_textarea_field( $_POST['gift_message'] ) );
    }
}

Hier controleren we… $_POST['gift_message'] Is er een waarde? Als er een waarde is, moet deze worden gebruikt. sanitize_textarea_field() Na dat de functie de veiligheidsmaatregelen heeft uitgevoerd, wordt het proces vervolgd. update_post_meta() Sla dit op als ordermetadata, met de meta-keynaam: _gift_message。

Stap 3: Weergeven van de gegevens in de backend en in de e-mails

Nadat de gegevens zijn opgeslagen, moeten ze zichtbaar worden voor de gebruikers. De volgende code toont hoe dit kan worden gerealiseerd: op de orderdetailspagina in het administratieve backend en in de e-mails van de klanten.

// 在管理员订单详情页显示
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_custom_field_admin' );
function display_custom_field_admin( $order ) {
    $gift_message = get_post_meta( $order->get_id(), '_gift_message', true );
    if ( $gift_message ) {
        echo '<p><strong>' . __( '礼品留言:', 'your-text-domain' ) . '</strong><br />'`. esc_html($gift_message)`.'</p>';
    }
}

// 在订单确认邮件中显示
add_filter( 'woocommerce_email_order_meta_fields', 'display_custom_field_in_email', 10, 3 );
function display_custom_field_in_email( $fields, $sent_to_admin, $order ) {
    $gift_message = get_post_meta( $order-&gt;get_id(), '_gift_message', true );
    if ( $gift_message ) {
        $fields['gift_message'] = array(
            'label' =&gt; __( '礼品留言', 'your-text-domain' ),
            'value' =&gt; wptexturize( $gift_message ),
        );
    }
    return $fields;
}

De eerste functie toont de berichtjes onder de factuuradressen van de achtergrondbestellingen. De tweede functie voegt de berichtjes als nieuwe rijen van data toe aan de bevestigingse-mails voor de bestellingen die door WooCommerce worden verzonden.

Advanced tips en aandachtspunten

Nadat we de basismethoden onder de knie hebben, kunnen we meer complexe toepassingsgevallen en optimalisatieopties onderzoeken, zodat onze aangepaste velden sterker en gemakkelijker te gebruiken zijn.

Creëer een conditie om bepaalde velden te weergeven.

Soms hangt het af van de waarde van een ander veld of een bepaald veld wel of niet wordt weergegeven. Bijvoorbeeld wordt het veld “Factuuradres” alleen weergegeven als de gebruiker “Factuur nodig” heeft gekozen. Dit kan alleen worden gerealiseerd met JavaScript voor de front-end-interactie. We kunnen bijv. een event toevoegen aan het veld dat de actie triggert (bijvoorbeeld een checkbox), zodat de gewenste reactie wordt afgerond. change Een eventlistener die de weergave of het verbergen van het doelveld dynamisch beheert. Hierop moet ook worden gereageerd in de verificatielogica op de serverkant.

De veiligheid en schoonmaak van veldgegevens

Veiligheid is van het grootste belang. Bij het verwerken van gebruikersinvoer moet deze altijd worden gevalideerd en gereinigd. Voor tekstvakken moet hiervoor een speciale methode worden gebruikt. sanitize_text_field() 或 sanitize_textarea_field()Wat betreft e-mailadressen: sanitize_email()Wanneer je gegevens naar de front-end verzendt, moet je ervoor zorgen dat je de juiste methoden en protocollen gebruikt. esc_html() 或 wp_kses_post() Functies als escape moeten worden gebruikt om cross-site scripting (XSS)-aanvallen te voorkomen.

InterServer gedeelde hosting

Shared hosting $2.50 USD per maand, eerste maand $0.1 USD promo code tryinterserver, 461 cloud apps scripts, een klik te installeren.

toegangspagina

Kompatibiliteit met derde-partijextensies en thema's

Tijdens het toevoegen van custom fields kan het gebeuren dat er conflicten ontstaan met de stijl of scripts van bepaalde thema's of andere plugins (met name plugins voor betere afsluiting van de aankoopprocedure). Het is aan te raden om altijd te ontwikkelen in een subtheme, en om unieke CSS-classnamen te toevoegen aan de container-elementen van de custom fields. Voorafgaand aan de officiële implementatie is het belangrijk om het onder verschillende omstandigheden te testen, inclusief met verschillende thema's en actieve plugins. Het gebruiken van de browser-developer-tools is een goede manier om fouten in elementen en scripts op te sporen, waardoor compatibiliteitsproblemen kunnen worden verholpen.

Samenvatting

Met de gids in dit artikel begonnen we bij het begrijpen van de vereisten en zijn we stap voor stap verdergegaan in het ontwikkelen van aangepaste afrekenvelden voor WooCommerce. We hebben geleerd hoe we deze velden kunnen gebruiken. woocommerce_checkout_fields、woocommerce_checkout_process 和 woocommerce_checkout_update_order_meta Deze drie belangrijke “hooks” worden gebruikt om velden te toevoegen, te verifiëren en te bewaren. Met een praktische case over ‘gift messages’ wordt het hele proces van het creëren van velden tot het weergeven van data volledig gedemonstreerd. Ten slotte worden er gesprekken gevoerd over geavanceerde onderwerpen als conditieven voor velden, beveiliging en compatibiliteit.

Door deze technieken te beheersen, kun je flexibel omgaan met de unieke vereisten voor datacollectie in verschillende e-commerceomgevingen. Je kunt zo een professioneler en persoonlijker WooCommerce-winkel opbouwen, waardoor de conversiepercentages en de tevredenheid van je klanten worden verbeterd.

Veelgestelde vragen (FAQ)

Waar worden de gegevens van aangepaste velden opgeslagen?

De gegevens van aangepaste velden worden meestal opgeslagen als “ordermetadata” in de WordPress-database. wp_postmeta In de tabel: elke gegevensregel bevat de corresponderende order-ID.post_idDe metakeys die je hebt gedefinieerd (zoals…) _gift_messageJe kunt de meta-waarden en de bijhorende waarden gebruiken via de methoden van het WooCommerce-orderobject. $order->get_meta(‘_gift_message’) Of een WordPress-functie get_post_meta() Om deze gegevens te verkrijgen…

Hoe voeg je front-end-verificatie (bijvoorbeeld formatverificatie) toe aan aangepaste velden?

Naast het gebruik van... woocommerce_checkout_process Naast serverkantige verificatie met hooks, kun je ook HTML5-native attributen toevoegen aan velden voor basisverificatie. pattern Voor reguliere expressiestype=”email” Dit wordt gebruikt voor het opmaken van e-mailadressen. Voor een complexere, realtime-verificatie van e-mailadressen is het nodig om JavaScript/jQuery-code te schrijven die de veranderingen in de invoerfielden bijhoudt. blur 或 input De gebeurtenis controleert of de waarden voldoen aan de regels en geeft onmiddellijk feedback.

Is het mogelijk om custom fields (aangepaste velden) toe te voegen aan de gebruikersregistratiepagina?

Ja, dat is mogelijk, maar de procedure is enigszins anders. De betaalvelden-hooks van WooCommerce zijn speciaal ontworpen voor de betaalpagina. Als je wilt dat velden worden toegevoegd op de registratiepagina van “Mijn account”, moet je gebruikmaken van andere hooks die WordPress en WooCommerce bieden. woocommerce_register_form Voeg een veld toe.woocommerce_created_customer Deze functie wordt gebruikt om veldgegevens op te slaan in de gebruikersmetagegevens. Het principe is vergelijkbaar met dat van de afrekeningsvelden, maar de doelgroep en de opslagplek van de gegevens (de gebruikersmetagegevens) verschillen.

Waarom worden mijn eigen gedefinieerde velden niet weergegeven?

Allereerst: controleer of je code correct is toegevoegd. functions.php Er zijn geen grammaticale fouten. Daarnaast moet je controleren of de sleutels van het veldarray correct zijn; bijvoorbeeld of je ze op de juiste plek hebt toegevoegd. $fields[‘order’] Of toch niet? $fields[‘billing’] Een deel van de problemen kan worden veroorzaakt door andere plugins of thema’s die de code van je eigen functies hebben overschreven of verwijderd. Controleer dit nogmaals. Probeer ook de cache van je website en browser te wissen, aangezien oude CSS- en JS-bestanden de weergave van de website kunnen beïnvloeden.