Het ervaringen van klanten tijdens het afrekenen zijn van cruciaal belang bij het bouwen van een online winkel. Het standaard afrekeningsformulier van WooCommerce voldoet misschien niet aan alle bedrijfsbehoeften, bijvoorbeeld het verzamelen van factuurgegevens, verjaardagswensen of specifieke verzendvoorkeuren. Hier komt een aangepast afrekeningsveld van pas: dit biedt niet alleen meer personalisatie voor de klant, maar verzamelt ook belangrijke bedrijfsgegevens, waardoor diensten en marketingstrategiën kunnen worden verbeterd.
Met het hook-systeem van WordPress en de uitgebreide API van WooCommerce kunnen ontwikkelaars relatief eenvoudig verschillende soorten velden toevoegen op de afrekeningspagina – zoals tekstvakken, keuzelijsten, vinkvakken en meer – op verschillende plaatsen (naast de velden voor de factuur- en verzendadressen, of zelfs in nieuwe blokken). Het gaat hier niet alleen om de front-end-weergave, maar vooral om de back-end-verwerking van de gegevens: hoe ervoor te zorgen dat de door de gebruiker ingevoerde gegevens nauwkeurig en veilig worden opgeslagen in de bestelling, en dat deze gegevens duidelijk worden weergegeven op de beheerinterface, de gebruikersprofielen en in de bestelbevestigingse-mails.
Methoden voor het implementeren van aangepaste afrekenvelden
WooCommerce biedt twee grote categorieën van hangouts (hooks) aan voor het verwerken van de afrekeningsgegevens:woocommerce_checkout_fields 和 woocommerce_checkout_update_order_metaHet eerste wordt gebruikt om velden te definiëren en weergeven, terwijl het tweede wordt gebruikt om de gegevens van deze velden op te slaan.
Aanbevolen leesmateriaal WordPress-pluginontwikkeling: van het begin tot de volmaaktheid: wij leren je hoe je je eigen unieke functies maakt。
Velden toevoegen met behulp van hooks
Het meest essentiële stap is om… woocommerce_checkout_fields Filterhook: voegt custom fields toe aan het array met afrekeningsgegevens. De structuur van dit array is duidelijk, waardoor je de fields gemakkelijk kunt plaatsen in de “rekening”.billing), “levering”shipping“Order Notes”orderBestaande partities zoals deze kunnen worden gebruikt, en je kunt zelfs nieuwe, aangepaste partities creeren.custom）。
Het volgende codevoorbeeld toont hoe je onder het deel met de “rekeninginformatie” een tekstveld voor de “firma’s belastingnummer” en een keuzelijst met de optie “of een factuur nodig is” kunt toevoegen.
/**
* 在结账页面添加自定义字段
*/
add_filter( 'woocommerce_checkout_fields', 'custom_add_checkout_fields' );
function custom_add_checkout_fields( $fields ) {
// 在“账单”字段组中添加一个“公司税号”文本字段
$fields['billing']['billing_vat_number'] = array(
'label' => __( '公司税号 / VAT Number', 'your-text-domain' ),
'placeholder' => _x( '请输入您的公司税号', 'placeholder', 'your-text-domain' ),
'required' => false, // 非必填
'class' => array( 'form-row-wide' ), // 宽度样式
'clear' => true, // 清除浮动
'priority' => 25, // 显示顺序，数字越小越靠前
);
// 在“账单”字段组中添加一个“是否需要发票”单选框
$fields['billing']['billing_invoice_needed'] = array(
'type' => 'radio',
'label' => __( '是否需要纸质发票？', 'your-text-domain' ),
'required' => true,
'class' => array( 'form-row-wide' ),
'clear' => true,
'priority' => 30,
'options' => array(
'yes' => __( '是，需要纸质发票', 'your-text-domain' ),
'no' => __( '否，不需要', 'your-text-domain' )
)
);
return $fields;
}De gegevens in de velden worden verifieerd en daarna gespeeld.
Na het toevoegen van velden moet er worden gezorgd dat de door de gebruiker ingevoerde gegevens worden opgeslagen in de corresponderende ordermetadata. Dit kan worden gerealiseerd door… woocommerce_checkout_update_order_meta Dit wordt gerealiseerd met action-hooks. Wanneer een gebruiker een bestelling indient, wordt de WooCommerce-action-hook uitgelokt, waardoor we de waarden van de aangepaste velden kunnen opvragen en opslaan.
/**
* 保存自定义结账字段的值到订单元数据
*/
add_action( 'woocommerce_checkout_update_order_meta', 'custom_save_checkout_fields' );
function custom_save_checkout_fields( $order_id ) {
if ( ! empty( $_POST['billing_vat_number'] ) ) {
// 使用 sanitize_text_field 进行清洁处理，防止恶意代码
update_post_meta( $order_id, '_billing_vat_number', sanitize_text_field( $_POST['billing_vat_number'] ) );
}
if ( ! empty( $_POST['billing_invoice_needed'] ) ) {
update_post_meta( $order_id, '_billing_invoice_needed', sanitize_text_field( $_POST['billing_invoice_needed'] ) );
}
}De veldgegevens worden weergegeven in de achtergrond en in de e-mails.
Het is niet voldoende om alleen de gegevens op te slaan; winkeliers moeten deze informatie kunnen zien bij het beheersen van bestellingen in de achtergrond. Klanten moeten ook de inhoud die ze hebben ingevuld kunnen zien in de bevestigingse-mail van de bestelling en op de pagina “Mijn account”.
Op de achtergrond wordt de orderbewerkingssite weergegeven.
Het is mogelijk om dit te doen. woocommerce_admin_order_data_after_billing_address Net zoals bij andere soorten “hooks” worden de waarden van de aangepaste velden weergegeven onder de kolommen “Rekeningadres” of ‘Afleveringsadres’ op de achtergrondpagina met de details van de bestelling.
Aanbevolen leesmateriaal Een introductie tot het ontwikkelen van WordPress-plug-ins: bouw je eerste functionele uitbreiding vanaf nul.。
/**
* 在后台订单详情页显示自定义字段
*/
add_action( 'woocommerce_admin_order_data_after_billing_address', 'custom_display_admin_order_meta', 10, 1 );
function custom_display_admin_order_meta( $order ) {
$vat_number = $order->get_meta( '_billing_vat_number' );
$invoice_needed = $order->get_meta( '_billing_invoice_needed' );
if ( $vat_number ) {
echo '<p><strong>' . __( '公司税号:', 'your-text-domain' ) . '</strong> '`.esc_html($vat_number)`.'</p>';
}
if ( $invoice_needed ) {
$display_text = ( $invoice_needed == 'yes' ) ? __( '是', 'your-text-domain' ) : __( '否', 'your-text-domain' );
echo '<p><strong>' . __( '需要纸质发票:', 'your-text-domain' ) . '</strong> '`. esc_html($display_text)`.'</p>';
}
}Weergeven in het bestel-e-mailbericht en op de bedankingspagina.
Zodat de klanten deze informatie ook kunnen zien, moeten we ze toevoegen aan de order-e-mail en de orderbevestigingspagina (bedankt). woocommerce_email_order_meta_keys De filter kan automatisch de specifieke meta-data-sleutels toevoegen aan alle notificatie-e-mails. woocommerce_order_details_after_order_table Action-hooks kunnen worden weergegeven in de details van de bestelling op de frontend.
/**
* 将自定义字段添加到订单邮件中
*/
add_filter( 'woocommerce_email_order_meta_keys', 'custom_add_order_meta_to_email' );
function custom_add_order_meta_to_email( $keys ) {
$keys[] = '_billing_vat_number';
$keys[] = '_billing_invoice_needed'; // 邮件中会以键的格式显示，通常需要进一步美化
return $keys;
}
/**
* 在前台订单详情（感谢页面、我的账户-订单详情）中显示自定义字段
*/
add_action( 'woocommerce_order_details_after_order_table', 'custom_display_order_data_frontend', 10, 1 );
function custom_display_order_data_frontend( $order ) {
$vat_number = $order->get_meta( '_billing_vat_number' );
if ( $vat_number ) {
echo '<h2>' . __( '附加信息', 'your-text-domain' ) . '</h2>';
echo '<table class="shop_table shop_table_responsive additional_info">';
echo '<tr><th>' . __( '公司税号:', 'your-text-domain' ) . '</th><td>'`.esc_html($vat_number)`.'</td></tr>';
echo '</table>';
}
}Advanced applications and field condition logic
Naast het toevoegen van basisgegevens, kunnen complexere interacties de gebruikerservaring aanzienlijk verbeteren. Denk hierbij aan het conditioneel weergeven van gegevens en het controleren van deze gegevens op basis van bestaande waarden.
Implementeren van conditionele weergave van velden
Met JavaScript/jQuery kun je dynamisch een ander veld weergeven of verbergen, afhankelijk van de waarde van een bepaald veld (bijvoorbeeld een land, staat of een keuze uit een menu). Als de gebruiker bijvoorbeeld “Papieren factuur nodig” selecteert, wordt pas een tekstgebied met instructies voor de factuurverzending weergegeven.
Om deze functionaliteit te realiseren, is het nodig om logica toe te voegen in het JavaScript-bestand van het thema, of om dit te doen via een andere methode. wp_enqueue_script Zet de scripten in een wachtrij en houd de veranderingen in de velden op de afrekeningspagina in de gaten, om de weergave van de gewenste velden te controleren.
Een gebruikersgedefinieerd valideringsregel toevoegen aan een veld
Hoewel WooCommerce standaard een functie voor “verplicht” (required) bevat...required => true）验证，但有时你需要更复杂的验证规则，比如税号的特定格式。可以通过 woocommerce_checkout_process Action hooks worden gebruikt om aangepaste validatielogica toe te voegen.
/**
* 在结账过程中验证自定义字段
*/
add_action( 'woocommerce_checkout_process', 'custom_validate_checkout_fields' );
function custom_validate_checkout_fields() {
// 如果“公司税号”字段不为空，则检查其格式（示例：假设是15位数字）
if ( ! empty( $_POST['billing_vat_number'] ) && ! preg_match( '/^d{15}$/', $_POST['billing_vat_number'] ) ) {
wc_add_notice( __( '错误：公司税号格式不正确，应为15位数字。', 'your-text-domain' ), 'error' );
}
}Prestatieoptimalisatie en beste praktijken
Als er te veel custom fields worden toegevoegd op een website, of als deze niet op de juiste manier worden verwerkt, kan dit de laad snelheid van de checkout-pagina en de gebruikerservaring negatief beïnvloeden.
Aanbevolen leesmateriaal Een geavanceerde ontwikkelingshandleiding voor WooCommerce-aangepaste velden: van creatie tot weergave.。
Optimaliseren van het laden en weergeven van velden
- Selectief laden van scripts: Op de afrekeningspagina worden alleen de JavaScript-scripts geladen die nodig zijn voor de weergave van de velden die afhankelijk zijn van bepaalde condities.
- Goede prioriteiten bepalen: hoe doe je dat?
priorityDe parameters moeten op een logische manier worden geordend, zodat de volgorde van de velden niet onnodig veranderd. - Versimpelen
classArray: Voeg alleen de nodige stijlklassen toe, bijvoorbeeld...form-row-wide或form-row-first。
Databeveiliging en -reiniging
- Always clean up and validate the data before saving it.
update_post_meta) en weergeven (echoVoor het gebruik van gebruikersgegevens moet u altijd...sanitize_text_field(),esc_html(),wp_kses_post()Functies zoals deze worden gebruikt voor verwerking en dit is cruciaal om cross-site scripting (XSS)-aanvallen te voorkomen. - Gebruik de juiste datatypen: voor cijfers of gegevens in een bepaald format moet worden gekeken of deze kunnen worden weergegeven met de geschikte datatypen.
sanitize_key()Of gebruik een zelfgemaakte reguliere expressie voor verificatie en schoonmaken.
Samenvatting
Het instellen van aangepaste afrekenvelden in WooCommerce is een krachtige functie die de communicatie tussen winkeliers en klanten op cruciale momenten van een transactie versoepelt. woocommerce_checkout_fields De hook definieert de front-end-velden, die vervolgens worden gebruikt. woocommerce_checkout_update_order_meta De gegevens worden veilig opgeslagen met behulp van ‘hooks’, en vervolgens worden deze gegevens via meerdere beheerhooks en e-mailfilters weergegeven in de backend, per e-mail en op het gebruikersfront. Het hele proces vormt een gesloten cyclus voor het verwerken van gegevens. Nadat je deze kernmethoden onder de knie hebt, kun je met behulp van geavanceerde technieken als conditiegebaseerde weergave en aangepaste verificatie een zeer persoonlijke, gebruikersvriendelijke en veilige afrekeningsprocedure bouwen. Dit bevordert de professionaliteit van je winkel en de tevredenheid van je klanten, aangezien het tegemoetkomt aan de diverse behoeften van het e-commerce-verkeer.
Veelgestelde vragen (FAQ)
Waar worden de gegevens van de aangepaste velden opgeslagen?
De gegevens van de aangepaste velden worden opgeslagen als “ordermetadata”. Dit gebeurt wanneer… update_post_meta( $order_id, ‘_field_key’, $value ); Tijdens het opslaan worden de gegevens opgeslagen in WordPress. wp_postmeta In de database-tabel zijn de gegevens over bestellingen (een soort aangepaste artikeltype) verbonden met... post_id Relatie. De namen van sleutels beginnen meestal met een onderstreep, wat aangeeft dat het om verborgen meta-data gaat.
Hoe zorg je ervoor dat custom fields (aangepaste velden) ook worden opgeslagen in het gebruikersaccount wanneer de gebruiker zich registreert?
Als je het mogelijk maakt om een account aan te maken tijdens het afrekenen en je de gegevens van velden (zoals “naam van het bedrijf”) ook wilt opslaan in de gebruikersgegevens, moet je de gebruikersgegevens bijwerken terwijl je de ordermetadata opslaat. Dit kan worden gerealiseerd met behulp van een geschikte software-oplossing. update_user_meta( $customer_id, ‘billing_company’, $value );Let op: hiervoor is meestal de juiste gebruikers-ID nodig, die wordt verkregen in het kader van het registreren of inloggen van de gebruiker.
Waarom worden mijn eigen gedefinieerde velden niet correct weergegeven in de e-mail?
Als de waarde van een veld niet is weergegeven in de e-mail, is de meest voorkomende reden dat men is vergeten dit te doen. woocommerce_email_order_meta_keys De filter voegt de namen van de sleutels toe aan de e-mailvariabelen. Bovendien wordt de del van het e-mailtemplate die de aangepaste metagegevens weergeeft mogelijk niet gebruikt. Zorg ervoor dat de namen van je veldsluitingen correct in het array van de filter zijn opgenomen, en dat het e-mailtemplate (bijvoorbeeld…) email-order-details.phpHet is mogelijk om algemene metagegevens weergeven.
Is het mogelijk om op verschillende plaatsen op de afrekeningspagina blokken met velden te toevoegen?
Ja. Naast de standaardopties… billing、shipping、order Groepen: je kunt hier… woocommerce_checkout_fields Maak in de filter een geheel nieuw groepje, bijvoorbeeld... custom_sectionEn vervolgens wordt dit gebruikt… woocommerce_checkout_after_customer_details 或 woocommerce_before_order_notes Action hooks die worden gecombineerd do_action(‘woocommerce_checkout_’ . $section); Je kunt de velden van deze nieuwe groep weergeven op welke plek op de pagina je maar wilt. Hiervoor moet je enige kennis hebben van de structuur van het afrekeningspatroon (checkout template) van WooCommerce.
De volgende stap, wat moeten we als volgende doen?
Voor meer informatie en praktische kennis
De volgende content is relevant voor het onderwerp van dit artikel en is geschikt voor verder lezen. Het kan vaak effectief zijn om eerst het artikel te lezen dat het dichtst bij uw huidige vraagstuk staat en vervolgens geleidelijk aan artikelen over aanverwante onderwerpen te bekijken.
- WordPress-pluginontwikkeling: van het begin tot de volmaaktheid: bouw je eerste eigen plugin
- WordPress-pluginontwikkeling vanaf nul: maak unieke functies en genereer efficiënt omzet
- Het ontwikkelen van WordPress plugins begint van nul en leidt tot een tool dat wereldwijd het populairste contentmanagement-systeem is.
- Ontwikkelingshandleiding voor WooCommerce: bouw een professionele e-commerce website vanaf nul
- Het ontwikkelen van WordPress-plug-ins vanaf nul: een gedetailleerde uitleg van de functionaliteit, normen en best practices.
Nederlands