WooCommerce Productoverzicht - Zelf programmeren

De WooCommerce Shop Page is nogal beperkt. Er zijn diverse manieren om dit aan te passen, maar ik denk dat ik er nog het meest gelukkig van word, als ik dit rechtstreeks in code doe.

Twee manieren

Er lijken pakweg twee manieren te zijn om productoverzichten aan te passen:

Sjabloon overnemen & aanpassen

Bestand wp-content/plugins/woocommerce/templates/archive-product.php is vermoedelijk het complete sjabloon voor weergave van de winkelpagina, al of niet in combinatie met wp-content/plugins/woocommerce/templates/content-product.php (en misschien nog meer bestanden).

Dit bestand kun je kopiëren naar (bij voorkeur) je child theme en vervolgens aanpassen. Het lijkt sterk op hoe het werkte met Drupal theme-bestanden. Merk op dat er niet wordt gewerkt met hooks of events op de gebruikelijke manier, maar met do_action om functionaliteit te incorporeren.

Dit is wat WooCommerce er zelf over zegt [1]:

WooCommerce template files contain the markup and template structure for frontend and HTML 
emails of your store.

When you open these files, you will notice they all contain hooks that allow you to add/move 
content without needing to edit template files themselves. This method protects against 
upgrade issues, as the template files can be left completely untouched.

Template files can be found within the /woocommerce/templates/ directory.

Hooks & events

De tweede aanpak, is middels gebruik van hooks en events om onderdelen naar je hand te zetten. Vooralsnog gaat dit artikel vooral over deze aanpak.

Hierbij geldt:

PHP-code: in functions.php onder het child-theme
CSS-code: In style.css onder het child-theme.

Brainstorm:

Het lijkt erop dat zo'n productoverzicht wordt opgebouwd door een reeks van functies, al of niet gelardeerd met CSS-code om de boel een beetje leuk te laten smoelen
Deze functies worden aangeroepen via hooks of events die plaatsvinden bij de aanroep van zo'n productoverzicht
Je kunt je eigen functies schrijven, of gebruik maken van bestaande functies. In dat laatste geval hoef je vermoedelijk alleen de events aan te passen
Eigen functies zet je typisch in de theme-map in bestand functions.php
Voorbeelden: [2]

Wat het niet is:

WooCommerce short codes
WPBakery short codes
Non-PHP-API-dingen.

Overzicht

Businessbloomer.com heeft een fantastisch interactief overzicht. Enkele schermafdrukken hiervan:

Alle hooks bij elkaar. Bron

Standaard-actions-configuratie. Bron

Voorbeeld: Excerpt-veld toevoegen aan productoverzicht

WooCommerce Excerpt Alot-plugin:

<?php
function woocommerce_product_teaser_display_excerpt() 
{
    the_excerpt();
}

add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_product_teaser_display_excerpt', 40 );

Voorbeeld: Add-to-cart-button

Eerste versie: Keep it simple

function dvb_add_to_cart_button()
{
	# Make $product global
	######################################
	#
	global $product;

	# $product contains the actual product
	######################################
	#
	# var_dump($product->get_sku());
	#

	# Display stuff
	######################################
	#
	// echo esc_url( get_permalink( $product->id ) );
	// echo esc_url($product->add_to_cart_url())."<br>";
	// echo esc_html($product->add_to_cart_text());

	# Assemble stuff - Works ok
	######################################
	#
	// $tmp = 
	// 	'<a href="'.
	// 	esc_url(get_permalink($product->id)).
	// 	esc_url($product->add_to_cart_url()).
	// 	'">'.
	// 	esc_html($product->add_to_cart_text()).
	// 	'</a>';

	// var_dump($tmp);
	// print_r($tmp);
	// echo $tmp;

	# Now at once
	######################################
	#
	echo
	'<a href="'.
	esc_url(get_permalink($product->id)).
	esc_url($product->add_to_cart_url()).
	'">'.
	esc_html($product->add_to_cart_text()).
	'</a>';

}
add_action('woocommerce_after_shop_loop_item_title', 'dvb_add_to_cart_button', 10);

Dit zou ook moeten werken [3], maar dat lijkt niet het geval te zijn:

add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_add_to_cart', 10 );

Tweede versie: Inclusief knop + paar checks:

function dvb_add_to_cart_button_with_button($product)
{
	#
	############################################################################
	#
	global $product;

	if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) 
	{
		$html  = '<form action="';
		$html .= esc_url( $product->add_to_cart_url() );
		$html .= '" class="cart" method="post" enctype="multipart/form-data">';
		# $html .= woocommerce_quantity_input( array(), $product, false );
		$html .= '<button type="submit" class="button alt">';
		$html .= esc_html($product->add_to_cart_text());
		$html .= '</button>';
		$html .= '</form>';

		echo $html;
	}
	# var_dump($html);
}

En nu inclusief aantal-control. Helaas werkt het nog niet: Zo snel je aantal aanpast, wordt het formulier verzonden.

function dvb_add_to_cart_button_complete($product)
{
	# Werkt nog niet! Zo snel je 'aantal' aanpast, wordt het formulier verzonden
	############################################################################
	#
	if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) 
	{
		$html  = '<form action="';
		$html .= esc_url( $product->add_to_cart_url() );
		$html .= '" class="cart" method="post" enctype="multipart/form-data">';
		$html .= woocommerce_quantity_input( array(), $product, false );
		$html .= '<button type="submit" class="button alt">';
		$html .= esc_html($product->add_to_cart_text());
		$html .= '</button>';
		$html .= '</form>';
	}
	return $html;
}

WooCommerce Productoverzicht - Zelf programmeren

Inhoud

Twee manieren

Sjabloon overnemen & aanpassen

Hooks & events

Overzicht

Voorbeeld: Excerpt-veld toevoegen aan productoverzicht

Voorbeeld: Add-to-cart-button

Zie ook

Bronnen

Navigatiemenu

Zoeken