Categorieën
PHP WooCommerce WordPress

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 <[email protected]>" \
--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 <[email protected]>" \
--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 <[email protected]>" \
	--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 <[email protected]>" \
	--files-from=- \
	--exclude-file=$(CURDIR)/languages/woocommerce/woocommerce-admin.pot \
	--output=$(CURDIR)/languages/woocommerce/woocommerce.pot
Categorieën
E-commerce PHP WooCommerce WordPress

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 );
Categorieën
PHP WooCommerce

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.

Categorieën
Geen categorie WooCommerce WordPress

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.

Categorieën
CSS E-commerce WooCommerce WordPress

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?

Categorieën
PHP WooCommerce WordPress

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.

Categorieën
E-commerce PHP WooCommerce WordPress

WordPress Google Conversion shortcode

Om Google Conversion doelen bij te houden moet je soms op bepaalde pagina’s een zogenaamde Google Conversion code plaatsen. Binnen WordPress installatie kan het toevoegen van dergelijke codes soms lastig zijn. Daarom heb ik een eenvoudig WordPress shortcode gemaakt waarmee je eenvoudig een Google Conversion code kunt toevoegen aan je WordPress pagina’s.

/**
 * Google Conversion Code
 */
function prefix_shortcode_google_conversion_code($atts) {
	extract(shortcode_atts(array(
		'id' => null , 
		'language' => 'en' , 
		'format' => 3 , 
		'color' => '666666' , 
		'label' => '' , 
		'value' => 0 , 
	), $atts));

	$crlf = "\r\n";

	$noScriptImageUrl = sprintf('http://www.googleadservices.com/pagead/conversion/%d/', $id);
	$noScriptImageUrl = add_query_arg(array(
		'label' => $label , 
		'guid' => 'ON' , 
		'script' => 0
	), $noScriptImageUrl);

	$output = '';

	$output .= '<!-- Google Code for Bezoekers Pagina Douchegoten Remarketing List -->' . $crlf;
	$output .= '<script type="text/javascript">' . $crlf;
	$output .= '/* <![CDATA[ */' . $crlf;
	$output .= sprintf('var google_conversion_id = %d;', $id) . $crlf;
	$output .= sprintf('var google_conversion_language = "%s";', $language) . $crlf;
	$output .= sprintf('var google_conversion_format = "%s";', $format) . $crlf;
	$output .= sprintf('var google_conversion_color = "%s";', $color) . $crlf;
	$output .= sprintf('var google_conversion_label = "%s";', $label) . $crlf;
	$output .= sprintf('var google_conversion_value = %d;', $value) . $crlf;
	$output .= '/* ]]> */' . $crlf;
	$output .= '</script>' . $crlf;

	$output .= '<script type="text/javascript" src="http://www.googleadservices.com/pagead/conversion.js">' . $crlf;
	$output .= '</script>' . $crlf;

	$output .= '<noscript>' . $crlf;
	$output .= '<div style="display:inline;">' . $crlf;
	$output .= sprintf('<img height="1" width="1" style="border-style:none;" alt="" src="%s"/>', esc_attr($noScriptImageUrl)) . $crlf;
	$output .= '</div>' . $crlf;
	$output .= '</noscript>' . $crlf;

	return $output;
}

add_shortcode('google_conversion_code', 'prefix_shortcode_google_conversion_code');

Deze shortcode is met name interessant zijn in combinatie met WordPress webwinkel plugins zoals WooCommerce of Jigoshop. Om de shortcode ook op de product categorieën te kunnen gebruiken zullen de shortcodes ook toegepast moeten worden op de product categorieën beschrijvingen.

/**
 * Add shortcode support to term description
 */
function prefix_term_description($description) {
	if(is_archive()) {
		$description = do_shortcode($description);
	}

	return $description;
}

add_filter('term_description', 'prefix_term_description');
Categorieën
WooCommerce WordPress

WooCommerce provincie veld verwijderen

WooCommere is een nieuwe, maar nu al erg populaire, webwinkel plugin voor WordPress. De plugin is inmiddels al rond de 18.000+ keer gedownload. Ook in Nederland lijkt WooCommerce terrein te winnen. Dit bleek al op het ideeën platform van WooThemes, waar de iDEAL betaalmethode meer dan 250 stemmen kreeg. Hier hebben we bij Pronamic op ingespeeld door de Pronamic iDEAL plugin uit te rusten met de iDEAL betaalmethode voor WooCommerce.

Inmiddels zijn we een aantal weken verder en zijn we bij Pronamic druk bezig met de implementatie van een aantal WooCommerce webwinkels. Doordat het een vrij nieuwe plugin is is altijd even uitzoeken wat er mee mogelijk is en wat de beperkingen zijn. Het verwijderen, toevoegen en/of aanpassen van velden in het afrekenen formulier blijkt in ieder geval heel eenvoudig te gaan. Voor Nederlandse webwinkeliers is het “provincie” veld in veel gevallen niet interessant. Met behulp van onderstaande code is deze eenvoudig te verbergen.

function prefix_woocommerce_billing_fields($fields) {
	if(isset($fields['billing_state'])) {
		$fields['billing_state']['class'][] = 'hidden';
		$fields['billing_state']['required'] = false;
	}

	return $fields;
}

add_filter('woocommerce_billing_fields', 'prefix_woocommerce_billing_fields');

Vervolgens kan met behulp van CSS het veld verborgen worden:

.form-row.hidden {
	visibility: hidden;
}

Met behulp van deze code wordt het veld overigens niet volledig verwijderd, maar enkel onzichtbaar gemaakt. Je kunt uiteraard het veld ook volledig verwijderen, maar dan zul je waarschijnlijk ook de andere velden moeten aanpassen om de opmaak van het formulier netjes te houden.