Brontekst bekijken van WooCommerce Productoverzicht - Zelf programmeren

De ''WooCommerce Shop Page'' is nogal beperkt. Er zijn [[Productoverzichten (WooCommerce, algemeen) | 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 <code>wp-content/plugins/woocommerce/templates/archive-product.php</code> is vermoedelijk het complete sjabloon voor weergave van de winkelpagina, al of niet in combinatie met <code>wp-content/plugins/woocommerce/templates/content-product.php</code> (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 <code>do_action</code> om functionaliteit te incorporeren.

Dit is wat WooCommerce er zelf over zegt [https://docs.woocommerce.com/document/template-structure/]:

<pre>
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.
</pre>

=== 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: [https://theme.co/apex/forums/topic/woocommerce-stick-to-popup/]

Wat het niet is:

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

== Overzicht ==

[https://businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/ Businessbloomer.com] heeft een fantastisch interactief overzicht. Enkele schermafdrukken hiervan:

{|
|[[file:20190603-1134.png|thumb|Alle hooks bij elkaar. [https://businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/ Bron]]]
|[[file:20190603-1135.png|thumb|Standaard-actions-configuratie. [https://businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/ Bron]]]
|}

== Voorbeeld: Excerpt-veld toevoegen aan productoverzicht ==

[[WooCommerce Excerpt Alot-plugin]]:

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

add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_product_teaser_display_excerpt', 40 );    
</pre>

== Voorbeeld: Add-to-cart-button ==

Eerste versie: Keep it simple

<pre>
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);
</pre>

Dit zou ook moeten werken [https://stackoverflow.com/questions/15036157/adding-woocommerce-add-to-cart-button-to-related-products-and-product-listing], maar dat lijkt niet het geval te zijn:

<pre>
add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_add_to_cart', 10 );
</pre>

Tweede versie: Inclusief knop + paar checks:

<pre>
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);
}
</pre>

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

<pre>
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;
}
</pre>

== Zie ook ==

* [[Productoverzichten (WooCommerce, algemeen)]]
* [[PHP-API (WordPress)#add_action | PHP-API » add_action]]
* [[PHP-API (WordPress)#woocommerce_template_loop_add_to_cart | PHP-API » woocommerce_template_loop_add_to_cart]]

== Bronnen ==

* https://businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/ - Wonderful!
* https://businessbloomer.com/woocommerce-custom-add-cart-urls-ultimate-guide/
* https://theme.co/apex/forums/topic/woocommerce-stick-to-popup/
* https://stackoverflow.com/questions/22679674/woocommerce-code-for-cart-button
* https://stackoverflow.com/questions/28946715/woocommerce-add-to-cart-url-with-quantity