Categorie archief: E-commerce

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 →' :
				$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 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?

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');

iDEAL voor Shopp 1.2

Op woensdag 6 juli 2011 werd door de ontwikkelaars van de Shopp plugin versie 1.2 aangekondigd. Er werd een indrukwekkende lijst aan verbeterpunten en nieuwe functionaliteiten genoemd. Ik had gehoopt dat na deze aankondiging binnen een aantal weken Shopp 1.2 gelanceerd zou worden. Helaas heeft dit iets meer tijd gekost, maar lijkt Shopp 1.2 er nu toch aan te komen.

Het team achter Shopp heeft blijkbaar toch erg veel moeite moeten doen om de nieuwe versie zo in te richten dat gebruikers probleemloos kunnen overstappen van Shopp 1.1 naar versie 1.2. Met de grote lijst aan nieuwe verbeteringen en nieuwe functionaliteit kan ik me goed voorstellen dat dit een erg lastig klus is (of was). Eind december 2011 werd gelukkig de eerste release candidate van Shopp 1.2 beschikbaar gesteld.

Dit betekende voor Pronamic werk aan de winkel om de Pronamic iDEAL plugin te testen in combinatie met Shopp 1.2. De nieuwe Shopp plugin is uitgerust met een compleet nieuw systeem voor het afhandelen van bestellingen en betalingen. Hierdoor moesten er ook een aantal aanpassingen worden gedaan aan de Pronamic iDEAL plugin.

Door de code van een plugin te bekijken is vaak wel te zien hoe bepaalde functionaliteiten werken. In het geval van Shopp 1.2 was het echter lastig te overzien hoe en wanneer functies werden aangeroepen. Daarom heb ik een stroomdiagram gemaakt waarin te zien is welke functies en actie worden aangeroepen na het plaatsen van een bestelling.

Download ODF tekening

Aan de hand van dit diagram hebben we de Pronamic iDEAL plugin bijgewerkt en werkt deze sinds vandaag ook in combinatie met Shopp 1.2. Alle Shopp gebruikers die werken met de Pronamic iDEAL plugin kunnen straks zonder problemen updaten naar versie 1.2.