Categorie archief: WooCommerce

WooCommerce 2.1 ‘Toevoegen aan winkelwagen’ tekst wijzigen

In het bericht “WooCommerce ‘Toevoegen aan winkelwagen’ tekst wijzigen” beschrijf ik hoe binnen WooCommerce de ‘Toevoegen aan winkelwagen’ tekst gewijzigd kan worden. Helaas heeft WooThemes in versie 2.1 van de WooCommerce plugin wijzigingen doorgevoerd waardoor deze oplossing niet meer werkt.

Vanaf WooCommerce 2.1 is namelijk de ‘add_to_cart_text’ filter verwijderd:
https://github.com/woothemes/woocommerce/blob/v2.0.20/templates/loop/add-to-cart.php#L46

In plaats daarvan is er in WooCommerce 2.1 de ‘woocommerce_product_single_add_to_cart_text’ filter:
https://github.com/woothemes/woocommerce/blob/v2.1.0/includes/abstracts/abstract-wc-product.php#L449

function prefix_add_to_cart_text( $text ) {
	$text = __( 'Add', 'text_domain' );

	return $text;
}

add_filter( 'woocommerce_product_single_add_to_cart_text', 'prefix_add_to_cart_text' );

Bovenstaande code kan toegevoegd worden aan het WordPress functies thema bestand (functions.php). Vaak kan de code zonder problemen aan het eind van dit bestand toegevoegd worden. Als je niet werkt met een maatwerk thema dan kan het overigens handig zijn om deze toevoeging binnen een child thema of plugin te definiëren. Op die manier kun je zonder problemen je thema blijven bijwerken.

Tekst Filter GitHub
Add to cart woocommerce_product_single_add_to_cart_text GitHub
Read more woocommerce_product_add_to_cart_text GitHub

WooCommerce bestellingen met iDEAL Basic automatisch geannuleerd

Een aantal WordPress gebruikers die met WooCommerce een webwinkel hebben opgezet en een iDEAL Basic aansluiting hebben zullen opgemerkt hebben dat betaalde bestellingen soms automatisch geannuleerd worden. Dit wordt veroorzaakt een automatisch systeem van WooCommerce die bestellingen met de status ‘in afwachting’ (pending) na een bepaalde tijd annuleert.

De WooCommerce ‘woocommerce_cancel_unpaid_orders()‘ functie regelt het annuleren van bestellingen met de status ‘in afwachting’. De werking van deze functie is te beïnvloeden met 2 instellingen, namelijk de ‘Voorraadbeheer’ (Manage Stock) en ‘Voorraad behouden (minuten)’ (Hold Stock (minutes)) instellingen. Op het moment dat voorraadbeheer is ingeschakeld en het aantal minuten van het vasthouden van de voorraad groter is dan 0 zullen bestellingen de status ‘in afwachting’ automatisch geannuleerd worden.

In principe zou een succesvolle iDEAL-betaling er direct voor moeten zorgen dat de WooCommerce bestellingstatus wordt bijgewerkt van ‘in afwachting’ (pending) naar ‘in verwerking’ (processing). In het geval van iDEAL Basic gebeurd dit echter niet als bezoekers vanuit iDEAL niet terug keren naar de webwinkel. WooCommerce gebruikers die werken met de iDEAL Basic variant adviseer ik daarom om de “Voorraad behouden (minuten)” instelling uit te schakelen.

Voorraad behouden (voor onbetaalde bestellingen) voor x minuten. Wanneer deze limiet is bereikt zal de in afwachting bestelling geannuleerd worden. Laat leeg om uit te schakelen.

WooCommerce voorraadbeheer iDEAL Basic

Het is immers niet netjes als klanten na een succesvolle iDEAL-betaling een uur later de melding krijgen dat de bestelling is geannuleerd.

WooCommerce ‘Sale!’ tekst wijzigen

In het bericht “WooCommerce ‘Toevoegen aan winkelwagen’ tekst wijzigen” beschreef ik al hoe de “Toevoegen aan winkelwagen” tekst gewijzigd kan worden. In dit bericht is te lezen hoe de “Sale!” tekst gewijzigd kan worden.

WooCommerce "Sale!" tekst wijzigen

De WooCommerce ontwikkelaars passen de filter ‘woocommerce_sale_flash’ toe op de “Sale!” tekst waardoor deze eenvoudig is aan te passen. In onderstaande code fragment is te zien hoe dit gerealiseerd kan worden:

Bovenstaande code kan toegevoegd worden aan het WordPress functies thema bestand (functions.php). Vaak kan de code zonder problemen aan het eind van dit bestand toegevoegd worden. Als je niet werkt met een maatwerk thema dan kan het overigens handig zijn om deze toevoeging binnen een child thema of plugin te definiëren. Op die manier kun je zonder problemen je thema blijven updaten.

WooCommerce LESS compile fout

Onlangs werden we bij Pronamic benaderd door een WooCommerce gebruiker die na een WooCommerce update van 2.0.12 naar 2.0.14 de volgende foutmelding te zien kreeg:

Kon woocommerce.less niet compileren: expected color value: failed at `color:fade( desaturate( @highlight, 75% ), 50% );` /wp-content/plugins/woocommerce/assets/css/woocommerce.less on line 181

Na een lange zoektocht kwamen we bij de WooCommerce ‘woocommerce_compile_less_styles’ functie terecht:

https://github.com/woothemes/woocommerce/blob/v2.0.14/admin/woocommerce-admin-functions.php#L415

Deze functie moet LESS omzetten naar CSS, maar daar ging blijkbaar iets fout met de ‘highlight’ kleur.

Na wat debug werk kwamen we er achter dat $colors variabele als volgt was gevuld:

array
  'primary' => string '#9D3ED5' (length=7)
  'secondary' => string '#EF7425' (length=7)
  'highlight' => string '#cccc' (length=5)
  'content_bg' => string '#ffffff' (length=7)
  'subtext' => string '#777777' (length=7)

De ‘highlight’ kleur bevatte een ongeldig kleur waarde ‘#cccc’, hier ontbraken twee tekens. Door de hightlight kleur even tijdelijke in te programmeren kon dit probleem opgelost worden:

$colors['highlight'] = '#CCCCCC';

Vervolgens konden we via de WordPress admin omgeving en WooCommerce instellingen pagina de foutieve kleur corrigeren.

WooCommerce LESS compile opmaak fout

Nederlandse vertaling WooCommerce 2.0.5

In WooCommerce versie 2.0.5 kunnen de vertalingen voor de WordPress beheerdersomgeving ingeladen vanuit een eigen bestand. Op die manier hoeven niet alle WooCommerce vertalingen altijd geladen te worden. In de WooCommerce ‘load_plugin_textdomain’ function is duidelijk te zien hoe dit is opgezet.

Om de vertalingen zo efficiënt mogelijk op te zetten moeten er 2 .PO of .POT bestanden aangemaakt worden. Normaliter scande ik altijd met behulp van Poedit naar alle vertaalbare teksten binnen een plugin. Echter kan ik met Poedit niet onderscheid maken tussen vertalingen binnen de admin omgeving.

Er zijn meerdere gebruikers van Poedit die wel graag van een dergelijke functionaliteit gebruik willen maken. De ontwikkelaar van Poedit geeft echter in een ticket het volgende aan:

 The scanning feature of Poedit is intended for basic, simple uses. If you have more demanding needs, they you should write a proper makefile and call xgettext in it to create a POT file from your sources; then use Poedit just to translate PO catalogs and update them from that POT file.

At this time, I don’t want additional complications in this part of Poedit. Maybe later, when all the other, more serious, problems are fixed.

Ik ben me daarom gaan verdiepen in de werking van xgettext:

Uiteindelijk heb ik de volgende twee commando’s geschreven waarmee we de WooCommerce vertalingen kunnen opdelen in verschillende bestanden.

WooCommerce admin

find ./admin -iname "*.php" -type f | xgettext \
--from-code=UTF-8 \
--keyword=__ \
--keyword=_e \
--keyword=_n:1,2 \
--keyword=_x:1,2c \
--keyword=_ex:1,2c \
--keyword=_nx:1,2,4c \
--default-domain=woocommerce \
--language=PHP \
--copyright-holder="Remco Tolsma" \
--package-name=WooCommerce \
--package-version=2.0.5 \
--msgid-bugs-address="Remco Tolsma <info@remcotolsma.nl>" \
--files-from=- \
--output=woocommerce-admin.pot

WooCommerce

find ./ -iname "*.php" -type f | xgettext \
--from-code=UTF-8 \
--keyword=__ \
--keyword=_e \
--keyword=_n:1,2 \
--keyword=_x:1,2c \
--keyword=_ex:1,2c \
--keyword=_nx:1,2,4c \
--default-domain=woocommerce \
--language=PHP \
--copyright-holder="Remco Tolsma" \
--package-name=WooCommerce \
--package-version=2.0.5 \
--msgid-bugs-address="Remco Tolsma <info@remcotolsma.nl>" \
--files-from=- \
--exclude-file=woocommerce-admin.pot \
--output=woocommerce.pot

Bovenstaande commando’s bestaan uit  2 delen, een ‘find’ commando waarmee alle PHP-bestanden binnen de plugin worden gevonden. En een ‘xgettext’ commando die alle vertalingen binnen deze bestanden op zoekt. Hier worden de WordPress vertaalfuncties als ‘keyword’ meegegeven.

Mocht je overigens bij het uitvoeren van het tweede commando een “Segmentation” fout krijgen dan moet je misschien je gettext pakket updaten. Ik kreeg op mijn Mac deze fout met gettext versie 0.18.1. Na het updaten van gettext via MacPorts naar versie 0.18.2 was dit probleem opgelost:

sudo port selfupdate
sudo port upgrade outdated

Vervolgens hebben we de gegenereerde .POT-bestanden toegevoegd aan onze GlotPress installatie.

Omgeving Aantal teksten
WooCommerce 1391
WooCommerce admin 1112

Waar in WooCommerce 1.6.6 nog 2058 teksten in één bestand stonden en altijd geladen werden is dit met deze wijziging bijna gehalveerd. Deze verbetering hebben we ook verwerkt in de “WooCommerce (nl)” plugin. Met behulp van een Makefile kunnen we eenvoudig de 2 .POT-bestanden aanmaken:

WOOCOMMERCE_DIR=../woocommerce/

# Make POT files
extract:
	cd $(WOOCOMMERCE_DIR) && \
	find ./admin -iname "*.php" -type f | xgettext \
	--from-code=UTF-8 \
	--keyword=__ \
	--keyword=_e \
	--keyword=_n:1,2 \
	--keyword=_x:1,2c \
	--keyword=_ex:1,2c \
	--keyword=_nx:1,2,4c \
	--default-domain=woocommerce \
	--language=PHP \
	--copyright-holder="Remco Tolsma" \
	--package-name=WooCommerce \
	--package-version=2.0.5 \
	--msgid-bugs-address="Remco Tolsma <info@remcotolsma.nl>" \
	--files-from=- \
	--output=$(CURDIR)/languages/woocommerce/woocommerce-admin.pot \

	cd $(WOOCOMMERCE_DIR) && \
	find ./ -iname "*.php" -type f | xgettext \
	--from-code=UTF-8 \
	--keyword=__ \
	--keyword=_e \
	--keyword=_n:1,2 \
	--keyword=_x:1,2c \
	--keyword=_ex:1,2c \
	--keyword=_nx:1,2,4c \
	--default-domain=woocommerce \
	--language=PHP \
	--copyright-holder="Remco Tolsma" \
	--package-name=WooCommerce \
	--package-version=2.0.5 \
	--msgid-bugs-address="Remco Tolsma <info@remcotolsma.nl>" \
	--files-from=- \
	--exclude-file=$(CURDIR)/languages/woocommerce/woocommerce-admin.pot \
	--output=$(CURDIR)/languages/woocommerce/woocommerce.pot

WooCommerce teksten wijzigen

In het bericht “WooCommerce ‘Toevoegen aan winkelwagen’ tekst wijzigen” schreef ik al hoe je een specifieke WooCommerce tekst kon wijzigen. Helaas zijn met behulp van deze oplossing niet alle WooCommerce teksten te wijzigen. Toch komt het wel eens voor dat ook andere teksten gewijzigd moet worden. Binnen bepaalde webwinkels is “Bestellen” bijvoorbeeld een betere vertaling voor  “Checkout”  in plaats van “Afrekenen”.

Met behulp van de volgende code kunnen alle WooCommerce teksten eenvoudig aangepast worden.

/**
 * Translate WooCommerce text
 *
 * @link http://codex.wordpress.org/Plugin_API/Filter_Reference/gettext
 */
function prefix_translate_woocommerce( $translated_text, $text, $domain ) {
	if ( $domain == 'woocommerce' ) {
		switch ( $text ) {
			case 'Checkout &rarr;' :
				$translated_text = 'Bestellen';
				break;
			case 'Add to Cart' :
			case 'Add to cart' :
				$translated_text = 'Bestellen';
				break;
		}
	}

	return $translated_text;
}

add_filter( 'gettext', 'prefix_translate_woocommerce', 20, 3 );

WooCommerce ‘Toevoegen aan winkelwagen’ tekst wijzigen

Gebruikers van WooCommerce weten dat de knop waarmee bezoekers een product kunnen toevoegen in het Engels standaard de tekst ‘Add to cart‘ bevat. Als we dit vertalen naar het Nederlands wordt dit ‘Toevoegen aan winkelwagen‘. Sommige mensen zijn geneigd om dit vertalen naar een kortere variant, bijvoorbeeld ‘Toevoegen’. Ik vind echter dat je geen informatie moet weglaten binnen een vertaling. Daarom hanteren we in de ‘WooCommerce (nl)‘ plugin de volledige vertaling.

Doordat de Nederlandse volledig vertaling echter vrij lang is in vergelijking met de Engelse tekst komt dit echter niet altijd mooi uit binnen WordPress/WooCommerce thema’s.

Daarom ging ik op zoek naar een methode waarmee we de tekst eenvoudig kunnen aanpassen. Gelukkig past WooCommerce een filter (‘add_to_cart_text’) toe op de betreffende tekst waarmee we de tekst eenvoudig kunnen aanpassen. Met onderstaand voorbeeld is daardoor de tekst te wijzigen naar een korte variant, bijvoorbeeld: ‘Add’.

function prefix_add_to_cart_text( $text ) {
	$text = __( 'Add', 'text_domain' );

	return $text;
}

add_filter( 'add_to_cart_text', 'prefix_add_to_cart_text' );

Update: Gebruik je WooCommerce 2.1 of hoger dan werkt bovenstaande filter niet meer, zie voor een nieuwe oplossing het bericht: “WooCommerce 2.1 ‘Toevoegen aan winkelwagen’ tekst wijzigen“.

Bovenstaande code kan toegevoegd worden aan het WordPress functies thema bestand (functions.php). Vaak kan de code zonder problemen aan het eind van dit bestand toegevoegd worden. Als je niet werkt met een maatwerk thema dan kan het overigens handig zijn om deze toevoeging binnen een child thema of plugin te definiëren. Op die manier kun je zonder problemen je thema blijven bijwerken.

Mocht je zelf ook tegen vergelijkbare problemen aanlopen en op zoek zijn naar een oplossing dan kun je altijd even contact met me opnemen.

WordPress Shopp (nl) plugin

Onlangs kwam ik een WordPress website met de Shopp webwinkel plugin tegen met daarop ook de “Tussendoor Shopp 1.2.* NL / Dutch plugin“. Aangezien ik zelf ook een aantal vertaal plugins in beheer heb was ik wel benieuwd naar de opzet van deze plugin. Na het doorbladeren van de code kwam ik er snel echter dat het ging om een aangepaste versie van de WooCommerce (nl) en/of Gravity Forms (nl) plugin.

Tussendoor heeft helaas niet even de moeite genomen om Pronamic hiervan op de hoogte te brengen. Ik ben niet helemaal bekend met de regels die beschreven in de GPL licentie, maar even vermelden dat de plugin op onze plugins is gebaseerd zou ik wel gewaardeerd hebben.

The work must carry prominent notices stating that you modified it, and giving a relevant date.

Ik heb Tussendoor nog even via Twitter gewezen op de ontbrekende credits, maar daar is helaas niet op gereageerd.

Ik weet dat onze Duitse buren ook een variant op de WooCommerce (nl) plugin hebben gemaakt, namelijk de WooCommerce (de) plugin. Deze ontwikkelaar geeft ons echter alle credits voor ons werk:

Danksagung und Copyright: Dieses Plugin ist ein Fork des hervorragenden “WooCommerce (nl)” Plugins von Pronamic, NL bzw. Remco Tolsma @pronamic. Es ist quasi die Deutsche Version davon. Es steht genauso wie die ursprüngliche Code-Basis unter GPLv2-Lizenz (oder höher). — Ein grosses Dankeschön an Pronamic, die den Weg geebnet haben! ;-)

Het is jammer om te zien dat onze concullega’s uit Friesland onze code zonder vermelding gebruiken. Het gaat hier natuurlijk niet om de meeste spannende plugin, maar ik dacht wel wat Tussendoor kan kunnen wij beter. Daarom hebben we recent de Shopp (nl) plugin gelanceerd. Deze plugin is inmiddels uitgerust met de vertaling voor de volgende Shopp versies:

  • 1.2
  • 1.2.2
  • 1.2.3

We hebben al veel vertalingen verbeterd, maar waarschijnlijk zijn er nog steeds veel verbeteringen mogelijk. Heb je zelf suggesties voor betere vertalingen dan horen we het graag. Mocht je geïnteresseerd zijn in een WordPress webwinkel met Shopp, WooCommerce, WP e-Commerce, WooCommerce, eShop of een andere WordPress webwinkel plugin dan kun je uiteraard ook altijd vrijblijvend een offerte aanvragen.

WooCommerce wijzigt CSS selectors

Om de vormgeving van de producten op WooCommerce product archief pagina’s aan te passen maakte WooCommerce in versie 1.5.5 (of lager) altijd gebruik van de volgende CSS selector:

ul.products li {

}

Dit is ook terug te vinden in het WooCommerce less bestand waarin de standaard opmaak staat gedefinieerd:

http://plugins.trac.wordpress.org/browser/woocommerce/tags/1.5.5/assets/css/woocommerce.less#L392

We gebruikten vaak een sterkere CSS selector om de opmaak van producten op archief pagina’s aan te passen:

body ul.products li {

}

Vanaf WooCommerce 1.5.6 wordt er echter standaard een nieuwe CSS selector gebruikt. Deze selector is sterker als de door ons toegevoegde CSS selector, waardoor eventuele aanpassingen na een update niet altijd meer zichtbaar zijn.

ul.products li.product {

}

http://plugins.trac.wordpress.org/browser/woocommerce/tags/1.5.6/assets/css/woocommerce.less#L393

Dit probleem is uiteraard eenvoudig op te lossen door de eigen gedefinieerde selector ook weer specifieker te maken:

body ul.products li.product {

}

Het is echter wel de vraag in hoeverre het verstandig is om kleine aanpassingen aan het standaard meegeleverde WooCommerce thema op deze manier te realiseren. In hoeverre zijn de WooCommerce ontwikkelaars zich bewust van de gevolgen van dergelijke wijzigingen? En in hoeverre moeten de WooCommerce ontwikkelaars rekening houden met dergelijke zaken?

WooCommerce betaalmethode toevoegen aan e-mail

Onlangs kreeg ik van een opdrachtgever de vraag of de door de klant gekozen betaalmethode ook weergegeven zou kunnen worden in de WooCommerce e-mail. Dit zodat de administratie eenvoudiger de betaling kan controleren en de bestelling kan afronden.

Na het doorbladeren van de WooCommerce e-mail sjablonen kwam ik al snel een aantal acties tegen waarop we kunnen inhaken. In de WooComemrce ‘admin-new-order.php‘ e-mail sjabloon kan de ‘woocommerce_email_after_order_table’ actie gebruikt worden om de e-mail uit te breiden met aanvullende informatie.

function prefix_woocommerce_email_display_payment_method( $order, $is_admin_email ) {
	if ( $is_admin_email ) {
		echo '<p>';
		echo '	<strong>' , __('Payment Method:', 'text-domain') , '</strong> ';
		echo '	' , $order->payment_method_title;
		echo '</p>';
	}
}

add_action( 'woocommerce_email_after_order_table', 'prefix_woocommerce_email_display_payment_method', 10, 2 );

Mocht je hulp nodig hebben bij het opzetten van WordPress webwinkel dan kun je altijd eens contact opnemen met Pronamic.