WooCommerce Blocks bestelknop tekst

Wijzigt de tekst van de bestelknop in de WooCommerce Checkout Block naar:

Bestellen en betalen

De oplossing is bedoeld voor WordPress-websites die de moderne WooCommerce Blocks checkout gebruiken. De klassieke PHP-filter woocommerce_order_button_text werkt daar niet, omdat de checkoutknop door WooCommerce Blocks via React wordt gerenderd.

Daarnaast kan dezelfde Sydney Pro II button layout worden toegepast op de WooCommerce Blocks winkelwagenknop:

Doorgaan naar afrekenen

Waarom deze knoptekst?

Voor webshops is het belangrijk dat de bestelknop duidelijk maakt dat de klant met het plaatsen van de bestelling ook een betalingsverplichting aangaat. Volgens Thuiswinkel.org moet de tekst op de knop ondubbelzinnig duidelijk maken dat er een betalingsverplichting ontstaat. De formulering Bestellen en betalen wordt daarbij genoemd als een tekst die nog wel mogelijk is.

Deze aanpassing helpt dus om de checkoutknop beter te laten aansluiten op de Europese consumentenrechtelijke eisen rondom de laatste stap in het bestelproces.

Bron: Thuiswinkel.org - De bestelknop: Wat mag wel, wat mag niet?

Wat doet deze snippet/plugin?

Deze code:

• registreert een vertaalbare WPML-string met context/textdomain wc-text-orderbutton;
• gebruikt als stringnaam order_button_text;
• gebruikt standaard de Nederlandse tekst Bestellen en betalen;
• haalt de actuele vertaling op via wpml_translate_single_string;
• valt automatisch terug op de Nederlandse tekst wanneer WPML niet actief is;
• laadt JavaScript alleen op de WooCommerce checkout- en winkelwagenpagina;
• past de checkoutknoptekst aan via de officiele WooCommerce Blocks placeOrderButtonLabel filter;
• laat WooCommerce Blocks de checkoutknop zelf opnieuw renderen;
• voegt de Sydney theme button class roll-button toe aan de echte checkoutknop en winkelwagenknop;
• laat Sydney Pro II de normale button styling, hover, disabled-state en loading-state bepalen.

Hierdoor blijft de checkoutknop dus niet hangen op bijvoorbeeld Confirm Donation, maar wordt deze netjes vervangen door de ingestelde en vertaalbare tekst.

Installatie als kleine plugin

1. Maak in wp-content/plugins/ een nieuwe map aan, bijvoorbeeld:

wc-blocks-order-button-text

2. Plaats het bestand wc-blocks-order-button-text.php in deze map.

3. Activeer de plugin in WordPress via:

Plugins > Geinstalleerde plugins

4. Open de checkoutpagina, bijvoorbeeld /checkout/, en controleer de bestelknop.
5. Open de winkelwagenpagina en controleer de knop Doorgaan naar afrekenen.

Installatie als Code Snippet

1. Open de plugin Code Snippets in WordPress.
2. Maak een nieuwe PHP-snippet aan.
3. Plak de volledige inhoud van wc-blocks-order-button-text.php.
4. Laat de snippet uitvoeren op de frontend.
5. Activeer de snippet.
6. Open de checkoutpagina en controleer de bestelknop.
7. Open de winkelwagenpagina en controleer de knop Doorgaan naar afrekenen.

WPML String Translation

De string wordt geregistreerd met:

Context / textdomain: wc-text-orderbutton
String name:          order_button_text
Standaardtekst:      Bestellen en betalen
Brontaal:            Nederlands (nl)

Na activatie kun je de tekst vertalen via:

WPML > String Translation

Zoek daar op wc-text-orderbutton of order_button_text.

Let op: string staat als Engels geregistreerd

Als WPML de string al eerder heeft geregistreerd terwijl de actieve taal Engels was, kan de Nederlandse tekst in String Translation met een Engelse vlag verschijnen. De plugin schakelt tijdens nieuwe registratie tijdelijk naar nl, zodat nieuwe registraties als Nederlands worden opgeslagen.

Voor een bestaande verkeerd geregistreerde string moet je in WPML eenmalig opschonen:

1. Ga naar WPML > String Translation.
2. Zoek op wc-text-orderbutton of order_button_text.
3. Verwijder de bestaande string die met de Engelse vlag geregistreerd staat, of wijzig de brontaal naar Nederlands als jouw WPML-versie die optie toont.
4. Laad daarna de checkoutpagina of een adminpagina opnieuw, zodat de plugin de string opnieuw registreert.
5. Controleer dat de string nu met de Nederlandse vlag/brontaal verschijnt.

Technische uitleg

WooCommerce Blocks bouwt de checkout met React. Daardoor wordt de bestelknop niet op dezelfde manier opgebouwd als bij de klassieke WooCommerce checkout. De bekende PHP-filter:

woocommerce_order_button_text

heeft daarom geen effect op de knoptekst in de Blocks checkout.

Deze oplossing gebruikt PHP om de juiste, vertaalbare tekst te bepalen en geeft die tekst vervolgens door aan een klein inline JavaScript via wp_add_inline_script().

Het JavaScript gebruikt de officiele WooCommerce Blocks filter:

placeOrderButtonLabel

Daardoor rendert WooCommerce Blocks de checkoutknoptekst zelf binnen React. De snippet wijzigt geen textContent, innerHTML, kleuren, achtergronden, borders of hover-styles.

Voor Sydney Pro II voegt de snippet daarnaast de class roll-button toe aan de echte WooCommerce Blocks checkoutknop en aan de winkelwagenknop Doorgaan naar afrekenen. Sydney gebruikt deze class voor theme buttons. De snippet zet zelf geen kleuren, achtergronden, borders of hover-styles; die blijven afkomstig van Sydney Pro II en WooCommerce.

Bron voor de gebruikte Blocks-filter: WooCommerce Developer Docs - Checkout and place order button

Controlepunten

Controleer na installatie:

• de checkoutpagina /checkout/ toont Bestellen en betalen;
• de winkelwagenpagina toont Doorgaan naar afrekenen met dezelfde Sydney Pro II button layout;
• de checkoutknoptekst blijft correct na interactie met checkoutvelden of betaalmethodes;
• de string verschijnt in WPML > String Translation;
• de context/textdomain is exact wc-text-orderbutton;
• de stringnaam is exact order_button_text;
• er ontstaan geen PHP-fouten wanneer WPML niet actief is.

Vereisten

• WordPress
• WooCommerce
• WooCommerce Checkout Block / Blocks layout
• WooCommerce Cart Block / Blocks layout
• Sydney Pro II, wanneer je de Sydney button layout wilt overnemen
• WPML String Translation, optioneel maar ondersteund

Bestanden

• wc-blocks-order-button-text.php: de volledige plugin/snippetcode.