Een diepgaande analyse van de aangepaste betaalvelden van WooCommerce: een volledige ontwikkelingsgids.

Overzicht van het systeem voor betalingsvelden in WooCommerce

De betaalpagina van WooCommerce is een belangrijk punt in het e-commerce-proces waarbij klantgegevens worden verzameld. De flexibiliteit en uitbreidbaarheid van deze pagina is gedeeltelijk te danken aan het modulaire veldsysteem van WooCommerce. Dit systeem ordent alle onderdelen die de gebruiker moet invullen – zoals naam, adres, contactgegevens, etc. – in een gestructureerde, meerdimensionale array. De array bepaalt niet alleen de labels en typen van de velden, maar reguleert ook de weergavevolgorde, de vereisten voor invulling, de validatieregels en de CSS-klassen.

Het hart van het hele systeem is… class-wc-checkout.php De bestanden en de inhoud daarvan WC_Checkout Klassen. Alle velden worden op basis van hun gebruik ingedeeld in enkele belangrijke “veldgroepen”, waarvan de meest gebruikte… billingRekeningveldenshipping(Distribution field) en order(Velden als ordernotities, etc.) Elke groep van velden is zelf een array die meerdere velddefinities bevat. Het begrijpen van deze hiërarchie is de eerste stap bij het uitvoeren van eventuele aanpassingen, omdat alle modificaties draaien om deze algemene array van velden. Ontwikkelaars hoeven de kernbestanden niet rechtstreeks te bewerken, maar kunnen de processen beïnvloeden door een reeks goed ontworpen acties en filterhaken te gebruiken. Dit zorgt voor de duurzaamheid van de aangepaste functies en de compatibiliteit met toekomstige versies.

Gebruik de ingebouwde hangmappen om velden te toevoegen en te bewerken.

WooCommerce biedt een krachtig en gemakkelijk te gebruiken systeem voor hooks, waardoor ontwikkelaars veilig kunnen toevoegen, verwijderen, bewerken en opvragen van afrekeningsgegevens. Dit is de standaardmanier van custom development en voorkomt problemen met het onderhouden van de core-templatebestanden.

Aanbevolen leesmateriaal Praktische gids voor het optimaliseren van de prestaties van een WooCommerce-winkelwebsite en het ontwikkelen van geavanceerde plugins。

Hoe voeg je een nieuw veld toe aan het afrekeningsformulier?

Om een nieuw veld toe te voegen aan de afrekeningspagina, bijvoorbeeld een keuzevak waar klanten de type van de factuurkop kunnen kiezen, moet je gebruikmaken van… woocommerce_checkout_fields Filter. Deze filter stuurt de volledige array met afrekeningsgegevens door aan de ontwikkelaarsfunctie, waardoor je toegang hebt tot alle beschikbare velden. billingEen nieuwe entry toevoegen in (…)

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

function add_invoice_title_field( $checkout_fields ) {
    $checkout_fields['billing']['billing_invoice_type'] = array(
        'type' => 'select',
        'label' => '发票抬头',
        'required' => true,
        'options' => array(
            'personal' => '个人',
            'company' => '单位'
        ),
        'class' => array('form-row-wide'),
        'priority' => 21, // 紧跟在“公司名称”字段之后
    );
    return $checkout_fields;
}
add_filter( 'woocommerce_checkout_fields', 'add_invoice_title_field' );

De bovenstaande code heeft in het gebied met rekeninggegevens een vervolgkeuzelijst (dropdown) gecreëerd. Elke rekeninggegevensdefinieering bestaat uit een associatieve array (een array waarin elementen met elkaar zijn verbonden). type, label, required De sleutel-waarde-paren bepalen het gedrag en het uiterlijk van het veld.priority De parameters zijn van cruciaal belang, aangezien ze bepalen in welke volgorde het veld wordt weergegeven in het formulier. Naarmate de cijfers kleiner zijn, wordt het veld eerder in de lijst weergegeven.

Eigenschappen van bestaande velden wijzigen of verwijderen

De bedrijfsbehoeften kunnen vereisen dat de standaardvelden worden aangepast. Op bepaalde plekken kan bijvoorbeeld het veld “postcode” worden gemaakt tot niet-verplicht, of het veld “staat/provincie” worden verborgen. Dit wordt ook gerealiseerd door de benodigde instellingen door te geven. woocommerce_checkout_fields Dit wordt gerealiseerd door een array van filters te gebruiken.

function adjust_default_fields( $fields ) {
    // 将账单邮编字段设为非必填
    $fields['billing']['billing_postcode']['required'] = false;

// 完全移除账单州/省字段
    unset( $fields['billing']['billing_state'] );

// 更改邮箱字段的占位符文本
    $fields['billing']['billing_email']['placeholder'] = '用于接收订单确认信';

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

passeren (een wetsvoorstel of inspectie enz.) unset() Een functie kan een veld volledig verwijderen. In de meeste gevallen gebeurt dit door een bepaald attribuut in een array te overschrijven. required, label, classOm het gedrag van het veld te wijzigen, wordt gebruik gemaakt van…

Fieldvalidatie en data-persistentie

Het weergeven van velden op de front-end is slechts het eerste stap. Om de kwaliteit van de gegevens te garanderen, is het nodig om de invoer van de gebruiker te verifiëren en de gevalideerde gegevens veilig op te slaan in de bestelling. De verificatieprocedure bestaat uit twee delen: verificatie op de front-end (optioneel, maar verbetert de gebruikerservaring) en verificatie wanneer de gegevens worden ingediend op de back-end (verplicht).

Aanbevolen leesmateriaal Ultimatumgids voor het optimaliseren van de prestaties van een WooCommerce-winkel: een volledige uitleg van configuratie tot caching。

Implementeer de backend-verificatielogica.

Als de gebruiker op de knop “Op bestellen klikken” drukt, zal WooCommerce de betaalproces verifiëren. Ontwikkelaars kunnen hier gebruik van maken. woocommerce_checkout_process Action hooks worden gebruikt om aangepaste validatieregels in te voegen. Als de validatie niet slaagt, moet een bepaalde actie worden uitgevoerd. wc_add_notice() De functie toont de gebruiker een foutmelding en belet de ordering.

function validate_custom_fields_during_checkout() {
    // 检查自定义的“发票抬头”字段
    if ( isset( $_POST['billing_invoice_type'] ) && $_POST['billing_invoice_type'] == 'company' ) {
        // 如果选择了“单位”发票，则检查是否填写了公司名称
        if ( empty( $_POST['billing_company'] ) ) {
            wc_add_notice( '选择“单位”发票抬头时，必须填写公司名称。', 'error' );
        }
    }

// 验证一个自定义的文本字段，确保其格式
    if ( ! empty( $_POST['billing_custom_id'] ) && ! preg_match( '/^CUSTd{6}$/', $_POST['billing_custom_id'] ) ) {
        wc_add_notice( '客户编号格式错误，应为 CUST 后接6位数字。', 'error' );
    }
}
add_action( 'woocommerce_checkout_process', 'validate_custom_fields_during_checkout' );

De waarde van het veld wordt opgeslagen in de ordermetadata.

Na het succesvolle verificeren is de volgende stap om de waarden van de custom fields permanent op te slaan bij het creeren van een order. Dit wordt gerealiseerd door… woocommerce_checkout_update_order_meta De actie-hook is voltooid. De hook wordt uitgevoerd nadat de bestelling is gemaakt en de ID van de bestelling wordt overgedragen. Je moet hier WordPress gebruiken. update_post_meta() De functie slaat de formuliergegevens op als ordergegevens op.

function save_custom_checkout_field_data( $order_id ) {
    // 保存发票类型
    if ( ! empty( $_POST['billing_invoice_type'] ) ) {
        update_post_meta( $order_id, '_billing_invoice_type', sanitize_text_field( $_POST['billing_invoice_type'] ) );
    }

// 保存客户编号
    if ( ! empty( $_POST['billing_custom_id'] ) ) {
        update_post_meta( $order_id, '_billing_custom_id', sanitize_text_field( $_POST['billing_custom_id'] ) );
    }
}
add_action( 'woocommerce_checkout_update_order_meta', 'save_custom_checkout_field_data' );

Gebruik bij het opslaan sleutelnamen met een onderstreping als prefix (bijvoorbeeld: _billing_invoice_typeDit is een overeenkomst die voorkomt dat het veld niet wordt weergegeven in het metaadresvak “Aanpasbare velden” op de pagina voor het bewerken van bestellingen in de backend, waardoor administratoren ongewenste acties kunnen voorkomen. Wees er dus zeker van dat je deze overeenkomst gebruikt. sanitize_text_field() Functies als deze worden gebruikt om gegevens te reinigen om veiligheidsrisico's te voorkomen.

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

Op de ordergerelateerde pagina worden aangepaste gegevens weergegeven.

Na het opslaan van de gegevens moeten deze meestal op verschillende plaatsen opnieuw worden weergegeven, waaronder: 1) de orderbeheerinterface van WordPress; 2) de orderdetailspagina in het gedeelte “Mijn account” voor gebruikers; en 3) e-mails met orders die naar klanten en beheerders worden verzonden. Dit zorgt voor de integriteit en transparantie van de transactiegegevens.

Op de achtergrond, op de orderdetailspagina, worden custom fields geïntegreerd.

Om het voor de beheerders gemakkelijk te maken om de door de klanten ingevulde informatie in de backend te kunnen bekijken, moet je de opgeslagen ordermetadata weergeven op de orderbeheerpagina. Dit kan worden gerealiseerd door… woocommerce_admin_order_data_after_billing_address 和 woocommerce_admin_order_data_after_shipping_address Deze hook kan worden gebruikt om inhoud te voegen achter de bestaande informatie.

function display_custom_order_meta_in_admin( $order ) {
    $invoice_type = get_post_meta( $order->get_id(), '_billing_invoice_type', true );
    if ( $invoice_type ) {
        $display_type = ( $invoice_type == 'company' ) ? '单位' : '个人';
        echo '<p><strong>Type van factuurontvanger:</strong> '`. esc_html($display_type)`.'</p>';
    }

$custom_id = get_post_meta( $order-&gt;get_id(), '_billing_custom_id', true );
    if ( $custom_id ) {
        echo '<p><strong>Klantnummer:</strong> '`.esc_html($custom_id)`.'</p>';
    }
}
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_custom_order_meta_in_admin' );

Data weergeven op de frontend en in de e-mail.

Om ook de klanten de door hen verstrekte informatie te laten zien, moet je de templates voor de besteloverzichten op de frontend en de inhoud van de e-mails nog aanpassen. Voor de besteldetailspagina kun je gebruikmaken van… woocommerce_order_details_after_order_table Hook. Voor e-mails moet dit worden gebruikt. woocommerce_email_order_meta_keys De filter vertelt het e-mailssysteem welke aangepaste meta-data-sleutels worden gebruikt, zodat deze automatisch worden opgenomen in de inhoud van de e-mail.

Aanbevolen leesmateriaal WordPress-pluginontwikkeling beheersen: van nul efficiënte, aangepaste functionaliteiten bouwen。

// 在前台“查看订单”页面显示
function display_custom_data_in_order_view( $order ) {
    $custom_id = get_post_meta( $order->get_id(), '_billing_custom_id', true );
    if ( $custom_id ) {
        echo '<h2>Extra informatie</h2><table class="shop_table custom-info"><tbody><tr><th>Klantnummer:</th><td>'`.esc_html($custom_id)`.'</td></tr></tbody></table>';
    }
}
add_action( 'woocommerce_order_details_after_order_table', 'display_custom_data_in_order_view' );

// 将自定义字段加入订单邮件
function add_custom_field_to_emails( $keys ) {
    $keys[] = '_billing_custom_id'; // 这个键对应的值会被加入到邮件中
    $keys[] = '_billing_invoice_type';
    return $keys;
}
add_filter( 'woocommerce_email_order_meta_keys', 'add_custom_field_to_emails' );

Samenvatting

Het definiëren van aangepaste afrekenvelden in WooCommerce betekent een volledige ontwikkelingsprocedure die van het weergeven van deze velden op het gebruikersinterface tot het opslaan van de gegevens loopt. Het belangrijkste aspect hierbij is om het hook-systeem van WooCommerce te begrijpen en flexibel in te zetten: woocommerce_checkout_fields Met filters wordt de structuur van velden gedefinieerd en gewijzigd. woocommerce_checkout_process De actie uitvoert de nodige verificatie-logica; met behulp van... woocommerce_checkout_update_order_meta De actie zorgt ervoor dat de geldige gegevens worden vastgelegd (persistence). Ten slotte worden er verschillende hook-functies gebruikt die te maken hebben met het weergeven van de gegevens. woocommerce_admin_order_data_after_billing_address 和 woocommerce_email_order_meta_keysDe gegevens worden weergegeven in de backend, frontend en via e-mails. Door dit model te volgen, kunnen ontwikkelaars een krachtige, stabiele en nauw aansluitende afrekeningservaring bouwen die volledig is aangepast aan de behoeften van de business. Tevens wordt de onderhoudsvriendelijkheid en de beveiliging van het codebeheer gewaarborgd.

Veelgestelde vragen (FAQ)

Kan er een bevestigingsregel worden toegevoegd aan een aangepast veld, bijvoorbeeld om alleen cijfers toe te staan?

Ja, zoals beschreven in het gedeelte “Veldvalidatie en data-persistentie” in dit artikel, kun je dit doen. woocommerce_checkout_process Je kunt alle PHP-verificatielogica opnemen in de callback-functie van de hook. Hierdoor wordt de verificatie uitgevoerd op het moment dat de hook wordt geroepen. is_numeric() Function of regular expression preg_match() Controleer of de waarde in het veld een enkel cijfer is. Als de validatie niet slaagt, roep dan de betreffende procedure op. wc_add_notice() Het is voldoende om de fout te weergeven.

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

Hoe kan ik zorgen dat een aangepast veld alleen voor bepaalde leveringsmethoden wordt weergegeven?

Dit vereist een combinatie van conditieonderzoek en logische beslissingen. Je kunt in de functie die velden toevoegt of wijzigt, controleren welke verzendmethode wordt gebruikt in de actuele winkelwagen of sessie. Bijvoorbeeld, door gebruik te maken van… WC()->session->get('chosen_shipping_methods') De ID van de geselecteerde leveringsmethode wordt opgehaald. Als deze niet voldoet aan de vereisten, kan een andere methode worden gebruikt. unset() Verwijder dit veld uit de array met velden, of voeg een specifieke CSS-klas toe (bijvoorbeeld)... hiddenDit wordt gedaan in samenwerking met JavaScript om elementen dynamisch te tonen of te verbergen.

Ik heb de velden gewijzigd, maar de betaalpagina is niet veranderd. Wat kan de reden zijn?

Allereerst: zorg ervoor dat je eigen code correct wordt uitgevoerd (bijvoorbeeld de code die is gebruikt voor het aanpassen van het thema). functions.php Er zijn geen syntactische fouten in het bestand. Daarnaast moet je de logische structuur van de code controleren om zeker te weten dat je de juiste sleutelnamen van de veldarray hebt gewijzigd (bijvoorbeeld)... billing Of toch niet? shippingVervolgens moet alle mogelijke caches worden verwijderd, inclusief objectcaches, paginacaches en browsercaches. Probeer daarna om te schakelen naar het standaardthema (bijvoorbeeld Storefront) en schakel andere plugins uit, om mogelijke conflicten uit te sluiten.

Kunnen de opgeslagen gegevens van de aangepaste velden worden gebruikt voor latere zoektochten naar bestellingen of rapportageanalyses?

Ja, dat is mogelijk, maar er kunnen extra stappen nodig zijn. Aangezien de gegevens als Post Meta-opmerkingen van de bestellingen zijn opgeslagen, kun je de bestellingen opvragen via de mogelijkheden voor meta-informatie in WordPress. Voor het zoeken in de bestellijst in de WooCommerce-beheeromgeving kun je een plugin gebruiken die het mogelijk maakt om aangepaste velden mee te zoeken, of je kunt zelf code schrijven om de standaardzoekfunctie uit te breiden. Voor het genereren van rapporten bieden geavanceerde rapportageplugins meestal de mogelijkheid om bestelmeta-informatie mee te nemen in de filter- en weergaveopties. Het exporteren van veldgegevens naar een CSV-bestand is afhankelijk van de exporttool; sommige tools ondersteunen het kiezen van aangepaste meta-velden.