Hoe kun je de conversiegraad en gebruikerservaring van een e-commerce-winkel verbeteren door te personaliseren de afrekeningsvelden in WooCommerce?

In de e-commerce-operatie is de afrekeningsprocedure een essentieel onderdeel van de conversieproces. Een langwierige, onduidelijke of niet op de bedrijfsbehoeften aangepaste afrekeningspagina is een van de belangrijkste redenen waarom winkelwagens worden verlaten. Hoewel WooCommerce basisafrekeningsvelden biedt, voldoen de standaardinstellingen vaak niet aan de vereisten van specifieke bedrijfsomstandigheden, zoals het verzamelen van cadeaainformatie, speciale leveringsvereisten of klantvoorkeuren. Op deze momenten zijn aangepaste afrekeningsvelden van groot belang.

Door goed te ontwerpen en aangepaste velden toe te voegen, verzamel je niet alleen waardevolle informatie voor je bedrijf, zodat je je klanten beter kunt bedienen en je marketing effectiever kunt inzetten, maar je vermindert ook de cognitieve belasting en het aantal stappen voor de gebruiker, waardoor de conversie en de gebruikerservaring aanzienlijk verbeteren.

Het begrijpen van de samenstelling van de afrekeningsvelden in WooCommerce

De betaalpagina van WooCommerce bestaat uit meerdere veldblokken, waaronder de factuuradressen, de leveringsadressen, opmerkingen bij de bestelling en de betaalgegevens. Deze velden zijn geen statische HTML, maar worden dynamisch generereerd met behulp van een reeks filterbare en bedienbare functies en hooks. Het begrijpen van de onderliggende structuur is een voorwaarde voor effectieve personalisatie.

Aanbevolen leesmateriaal WooCommerce Ultimate Optimization Guide: Praktische tips om de prestaties en conversiepercentages van je e-commercewebsite te verbeteren。

De beheer van kernvelden wordt voornamelijk gerealiseerd door twee 'hooks':woocommerce_checkout_fields 和 woocommerce_default_address_fieldsHet eerste wordt gebruikt om alle velden van het afrekenformulier te beheersen, terwijl het tweede speciaal is bedoeld voor het beheersen van de standaardinstellingen van adresvelden (zoals land, provincie, stad, etc.).

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

WooCommerce heeft de betaalgegevens opgesplitst in enkele logische groepen (secties):
- billingVelden met betrekking tot de factuuradressen.
- shippingVelden met betrekking tot de afleveringsadres.
- accountVelden voor het maken van een account (zoals het wachtwoord).
- orderOrdergerelateerde velden (zoals ordernotities).

在woocommerce_checkout_fields In de filter kun je toegang krijgen tot een groot array dat alle deze groepen bevat, en je kunt elk van de velden in deze array bewerken (bijv. bewerken, verwijderen of toevoegen).

De kernmethode voor het definiëren van aangepaste velden: het gebruik van code-hooks

De krachtigste en meest aanbevolen manier om dit te doen, is via thema’s (themes).functions.phpDeze functionaliteit kan worden gerealiseerd met bestanden of zelfgemaakte plugins, door gebruik te maken van de action hooks en filter hooks van WordPress. Dit is de meest performante methode, biedt goede compatibiliteit met updates van het core-systeem van WooCommerce en biedt de mogelijkheid om de functionaliteiten zeer gedetailleerd te bepalen.

Een nieuw tekst invoerveld toevoegen

Stel dat je een veld voor een “geschenkboodje” wilt toevoegen na de opmerkingen van de bestelling. Je kunt het volgende codevoorbeeld gebruiken:

Aanbevolen leesmateriaal Een volledige gids voor het opzetten en optimaliseren van een WooCommerce e-commerce website.。

add_filter( 'woocommerce_checkout_fields', 'custom_add_gift_message_field' );
function custom_add_gift_message_field( $fields ) {
    // 在 ‘order’ 分组中添加一个新字段
    $fields['order']['gift_message'] = array(
        'type'        => 'textarea', // 字段类型：文本框
        'label'       => '礼品寄语',
        'placeholder' => '如需赠送礼品，请在此输入您的祝福语。',
        'class'       => array('form-row-wide'), // CSS类，使其占满整行
        'clear'       => true, // 在该字段后清除浮动
        'required'    => false, // 是否为必填项
        'priority'    => 25, // 字段显示顺序（订单备注的priority是25）
    );
    return $fields;
}

Bestaanende velden wijzigen of verwijderen

Het kan zijn dat je het veld “Bedrijfsnaam” niet nodig hebt, of dat je het veld “Postcode” wilt maken tot een niet-verplicht veld. Dit kan worden gerealiseerd door toegang te nemen tot het corresponderende array van velden en de parameters daarin te wijzigen.

add_filter( 'woocommerce_checkout_fields', 'custom_modify_checkout_fields' );
function custom_modify_checkout_fields( $fields ) {
    // 删除账单地址和收货地址中的公司名字段
    unset( $fields['billing']['billing_company'] );
    unset( $fields['shipping']['shipping_company'] );

// 将邮编字段改为非必填
    $fields['billing']['billing_postcode']['required'] = false;
    $fields['shipping']['shipping_postcode']['required'] = false;

// 修改地址字段的显示顺序（优先级）
    $fields['billing']['billing_city']['priority'] = 70;
    $fields['billing']['billing_state']['priority'] = 80;

return $fields;
}

De waarden van de aangepaste velden controleren en opslaan.

Het is niet voldoende om alleen de velden te weergeven; er moet ook worden gezorgd dat de waarden correct worden opgeslagen in de bestelling. Dit vereist meestal twee stappen: validatie op de front-end en opslag op de back-end.

// 步骤1：处理字段值的保存
add_action( 'woocommerce_checkout_update_order_meta', 'custom_save_gift_message_field' );
function custom_save_gift_message_field( $order_id ) {
    if ( ! empty( $_POST['gift_message'] ) ) {
        // 将‘gift_message’字段的值保存为订单元数据
        update_post_meta( $order_id, '_gift_message', sanitize_textarea_field( $_POST['gift_message'] ) );
    }
}

// 步骤2：（可选）在后端订单详情页显示该字段值
add_action( 'woocommerce_admin_order_data_after_order_details', 'custom_display_gift_message_admin' );
function custom_display_gift_message_admin( $order ) {
    $gift_message = get_post_meta( $order->get_id(), '_gift_message', true );
    if ( $gift_message ) {
        echo '<p><strong>Gefeliciteeringsboodje:</strong> '`. esc_html($gift_message)`.'</p>';
    }
}

Customisatie zonder code met behulp van plugins

Voor winkeliers die weinig kennis hebben van code, is het gebruik van professionele plugins een snellere en veiligere optie. Deze plugins bieden meestal een intuïtieve drag-and-drop-interface, waarmee je gemakkelijk velden kunt toevoegen, verwijderen en bewerken. Bovendien zijn ze voorzien van built-in verificatie- en opslagmogelijkheden.

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 markt zijn enkele uitstekende plugins verkrijgbaar, zoals Checkout Field Editor voor WooCommerce of WooCommerce Checkout Manager. Deze plugins bieden je de mogelijkheid om:
Beheer alle kassavelden via een visuele interface.
Voeg verschillende soorten velden toe, zoals selectievakjes, keuzelijsten, vervolgkeuzemenu's en bestandsuploads.
Stel de logica voor de veldcondities in (bijvoorbeeld, toon het veld “Cadeau-boodschap” alleen als de dienst “Cadeauverpakking” is geselecteerd).
Exporteer/importeer veldconfiguraties met gemak.

De voordelen van het gebruik van plugins zijn de snelle implementatie en de gemakkelijke gebruikerservaring. Er kan echter een verlenging van de laadtijd van de pagina zijn, en de compatibiliteit in de toekomst is afhankelijk van de updates die de pluginontwikkelaar uitbrengt.

Beste praktijken en optimalisatie van de gebruikerservaring

Het toevoegen van aangepaste velden moet niet alleen een simpel samenvoegen van verschillende functies zijn, maar moet worden ontworpen met als centraal doel de verbetering van de conversie (het aantal verkochten producten of diensten).

Aanbevolen leesmateriaal Diepgravend onderzoek naar WooCommerce: een volledig handboek voor het opbouwen van een efficiënte e-commerce-website vanuit het niets。

Volg het principe “Less is more”.

Met elke toegevoegde field toeneemt het risico dat gebruikers de bestelling niet afsluiten. Het is belangrijk om de noodzaak van ieder field te beoordelen. Vraag alleen informatie op die absoluut essentieel is voor het uitvoeren van de bestelling of voor het aanbieden van vervolgens personaliseerde services (mits met toestemming van de gebruiker). Het verhouding tussen optionele en verplichte velden moet redelijk zijn.

Duidelijke labels en tips voor plaatshouders

Gebruiklabel和placeholderDe attributen bieden duidelijke richtlijnen. In plaats van de vage omschrijving “datum” zou je bijvoorbeeld “Wenste leveringsdatum (YYYY-MM-DD)” kunnen gebruiken. Goede tips helpen gebruikers om onduidelijkheden en invoerfouten 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

Implementeren van conditionele logische weergave

Dit is een handig hulpmiddel om de gebruikerservaring te verbeteren. Met JavaScript of plugins kunnen bepaalde velden alleen onder bepaalde omstandigheden worden weergegeven. Bijvoorbeeld: als de gebruiker “Thuisbezorging” kiest in plaats van “Ophalen in de winkel”, worden de details van het adres alleen getoond; wanneer “Factuur” wordt aangevinkt, worden de velden “Factuurontvanger” en “Taksnummer” alleen zichtbaar. Dit kan de weergave voor de meeste gebruikers aanzienlijk vereenvoudigen.

Optimaliseren van de weergave en invoer op mobiele apparaten

Zorg ervoor dat de toegevoegde velden gemakkelijk te bereiken en in te vullen zijn op mobiele apparaten. Gebruik daarbij de juiste invoertypen (bijvoorbeeld…)type="email", type="tel", type="date"Dit kan een geoptimaliseerde toetsenbordopstelling op mobiele apparaten activeren.

Actie ondernemen op basis van de verzamelde gegevens

De informatie die wordt verzameld uit de aangepaste velden moet duidelijk te zien zijn in de backend, en kan worden geïntegreerd in je orderverwerking, klantenservice of marketingprocessen. Bijvoorbeeld: synchroniseer het veld “Productvoorkeuren” met je CRM-systeem, zodat je in de toekomst personaliseerde productaanbevelingen kunt doen.

Samenvatting

WooCommerce biedt de mogelijkheid om zelf af te stemmen welke betaalvelden worden weergegeven tijdens het afrekenproces. Dit is een krachtige functie die zich bevindt aan de grens tussen de technische implementatie en het ontwerp van de gebruikerservaring. Met behulp van code-hooks of speciale plugins kunnen winkeliers de standaardinstellingen aanpassen, zodat het afrekenproces perfect aansluit bij de behoeften en processen van hun bedrijf.

Het essentieel van succes is strategisch denken: elke toevoeging of wijziging van een field dient te worden gericht op het verminderen van onnodige obstakels, het verkrijgen van belangrijke informatie en het verhogen van het vertrouwen van de gebruikers. Begin met het begrijpen van de structuur van de fields, kies een implementatiemethode die past bij de mogelijkheden van het team en houd altijd rekening met het gebruikerscentrische ontwerpprincipe. Als de afrekeningsprocedure soepel en persoonlijk wordt, zal de percentage klanten die hun winkelwagen achterlaten afnemen, terwijl de klanttevredenheid en de uiteindelijke omzet toenemen.

Veelgestelde vragen (FAQ)

Zullen custom fields de prestaties van de website beïnvloeden?

De minimale impact van aangepaste instellingen op de prestaties door het gebruik van code-hooks is nauwelijks merkbaar. Het gebruik van complexe derde-partij-plugins kan echter de laadtijd van de pagina verlengen, vanwege het laden van extra scripts en style sheets. Dit valt echter meestal nog binnen de acceptabele grenzen. Het is altijd aan te raden om voor het publiceren van de website snelheidstests uit te voeren.

Is het veilig om gegevens van toegevoegde custom fields op te slaan?

De veiligheid is afhankelijk van de manier van implementatie. Door de officiële hooks te gebruiken die in dit artikel worden beschreven en de ingebouwde desinfectiefuncties van WordPress/WooCommerce te benutten…sanitize_text_fieldDe verwerking van gegevens kan de basisveiligheid garanderen. Als je gevoelige informatie verzamelt (bijvoorbeeld een identiteitsnummer), moet je zeker een SSL-certificaat (HTTPS) gebruiken en moet je overwegen om een geavanceerder versleutelingsmechanisme voor het opslaan van gegevens te implementeren. Vergeet ook niet de gebruikers duidelijk te informeren over je privacybeleid.

Zullen de aangepaste velden verdwijnen nadat je WooCommerce hebt bijgewerkt?

Als je gebruikmaakt van subthema's...functions.phpDe bestanden of zelf ontwikkelde plugins worden geïmplementeerd via de officiële ‘hooks’. Wanneer de kern van WooCommerce wordt bijgewerkt, blijven de aangepaste velden meestal intact, omdat de hook-interfaces backwards-compatibel zijn. Als je derde-partij-plugins gebruikt, moet je ervoor zorgen dat deze compatibel zijn met de nieuwe versie van WooCommerce.

Is het mogelijk om voor verschillende producten verschillende afrekenvelden in te stellen?

De standaardveldhooks zijn wereldwijd ingesteld voor de hele betaalpagina. Om verschillende velden per product weer te geven, is er complexere logica nodig. Je kunt dit doen door de artikelen in het winkelwagentje te controleren en dit te combineren met voorwaardelijke uitspraken (bijvoorbeeld met behulp van <).is_product_in_cartJe kunt gebruikmaken van HTML, CSS en JavaScript om velden dynamisch te weergeven of te verbergen, of je kunt een speciale plugin gebruiken die deze functionaliteit biedt.

Hoe kun je de waarden van aangepaste velden weergeven in de bestelings-e-mail en de factuur?

Er is extra code nodig om de opgeslagen ordergegevens uit te wisselen in een e-mailtemplate en een PDF-factuur. Voor de e-mail kan dit bijvoorbeeld worden gedaan met behulp van een templategenerator of door de gegevens handmatig in de e-mail te plaatsen.woocommerce_email_order_meta_keysEen filter ofwoocommerce_email_order_detailsActies. Voor facturen hangt het af van het factuurplugin dat je gebruikt; meestal biedt dit plugin eigen mogelijkheden (‘hooks’) om gegevens van aangepaste velden toe te voegen.