Utiliser les hooks WooCommerce

Il arrive dans certains cas que l'utilisation des éléments WooCommerce d'Oxygen ne suffisent pas pour nos besoins. Néanmoins il existe des solutions pour personnaliser nos modèles de pages WooCommerce grâce aux hook pour WooCommerce.

Il existe deux types de hook: les actions et les filtres. L'action vous permet d'ajouter du code personnalisé à différents endroits. Le filtre, en revanche, vous permet de manipuler, de remplacer et de renvoyer une nouvelle valeur de variable à la fin.

Si vous souhaitez utiliser un hook pour modifier ou ajouter un code personnalisé, vous pouvez l'ajouter dans le fichier functions.php d'OxyChild ou autre. L'utilisation avec le plugin Code Snippets est également possible sous forme de snippet avec l'avantage d'activer et désactiver plus simplement.

Si vous souhaitez modifier ou ajouter un code, vous devez d'abord aller dans le dossier du plugin. Vous pouvez le faire en accédant à woocommerce / templates / archive-product.php. Une fois que vous y êtes, vous devez vérifier les hooks que les auteurs du plugin ont implémentés ici.

Un bon lien pour visualiser l'archive des produits : https://www.businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/

Comment supprimer le fil d'ariane

Le code personnalisé ci-dessous supprime la fonction woocommerce_breadcrumb qui ajoute un balisage de fil d'Ariane. Nous avons défini la priorité sur 20, car il s'agit d'une valeur de priorité par défaut dans le fichier de modèle de plug-in.

/**
* Hook: woocommerce_before_main_content.
*
* @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
* @hooked woocommerce_breadcrumb - 20
* @hooked WC_Structured_Data::generate_website_data() - 30
*/
do_action( 'woocommerce_before_main_content' );

Et maintenant, nous devons définir le même afin de supprimer cette zone.

// Remove breadcrumbs
remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 );

Comment masquer le titre de la page

if ( ! function_exists( 'hide_woocommerce_page_title' ) ) {
/**
* Hide WooCommerce page title
*/
function hide_woocommerce_page_title() {
return false;
}
add_filter( 'woocommerce_show_page_title', 'hide_woocommerce_page_title' );
}

Comment modifier le nombre de produits pour la page de la boutique

if ( ! function_exists( 'change_woocommerce_products_per_page' ) ) {
/**
* Change number of products on main shop page
*/
function change_woocommerce_products_per_page() {
return 8;
}
add_filter( 'loop_shop_per_page', 'change_woocommerce_products_per_page', 20 );
}

Comment changer les positions des prix et des notes

Pour changer la position des éléments dans un certain balisage (dans ce cas, un article de produit), vous pouvez utiliser les fonctions remove_action et add_action avec des priorités. Si des éléments sont ajoutés avec le hook, les priorités définissent l'endroit où l'élément sera à l'intérieur du balisage. La priorité inférieure rendra cet élément comme le premier.

Le plugin WooCommerce a beaucoup de hooks et dans la plupart des cas, les éléments sont ajoutés avec les hooks. Par conséquent, cet article est une occasion idéale de vous montrer comment vous pouvez également le faire.

Ici, nous allons vous montrer comment changer la position des éléments de prix et de notation. Le code pour cela sera:

// Remove functions from woocommerce_after_shop_loop_item_title hook with original priority
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
// Added functions to woocommerce_after_shop_loop_item_title hook with new priority
add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 10 );
add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 5 );

Tout d'abord, nous supprimerons les deux éléments de la partie article du produit avec les fonctions et les priorités d'origine. Vous pouvez trouver les deux éléments dans le fichier content-product.php.

/**
* Hook: woocommerce_after_shop_loop_item_title.
*
* @hooked woocommerce_template_loop_rating - 5
* @hooked woocommerce_template_loop_price - 10
*/
do_action( 'woocommerce_after_shop_loop_item_title' );

Ensuite, nous ajouterons les mêmes fonctions sur le même hook avec de nouvelles priorités.

Liens de sources d'un article an anglais : https://wpklik.com/wordpress-tutorials/woocommerce-hooks/

Et avec Oxygen ?

Après avoir vu grâce à cet article les hook et leurs usages, nous allons pouvoir les utiliser dans Oxygen, sous forme de snippet/fontions ou dans des blocs de code, voir les modifier. Voici un exemple de snippet permettant d'afficher les dimensions d'un produit en dessous du titre sur la page d'archive (dans ce cas les produits étant des tableaux, nous voulons informer l'acheteur de la taille de celui-ci) ...

function taille_woo_attribute(){
    global $product;   
	$product_width = $product->get_width();
	$pruduct_length = $product->get_length();
	$product_dimensions = $product->get_dimensions();
	if (!empty($product_width) && !empty($product_length)) {
    echo '<div class="size_art">' . $product_length . ' de largeur sur  ' . $product_width . ' de hauteur.</div>';
	}
	if ( $product->has_dimensions() ) {
		echo '<div class="size_artdim">Dimensions : ' . $product_dimensions . '</div>';
	}
		
}
add_action( 'woocommerce_shop_loop_item_title', 'taille_woo_attribute', 10 );

Notez que $product_width et lenght peuvent être supprimé car non utilisés, mais il pourrait servir à retourner juste d'autres valeurs dans le "echo". Voir sur le lien suivant les valeurs récupérables sur un produit.

Liens des informations produits : https://www.businessbloomer.com/woocommerce-easily-get-product-info-title-sku-desc-product-object/

Dans un code bloc vous pouvez très bien récupérer le template par défaut de WooCommerc avec

<?php
global $product;

/**
 * Hook: woocommerce_before_single_product.
 *
 * @hooked woocommerce_output_all_notices - 10
 */
do_action( 'woocommerce_before_single_product' );

if ( post_password_required() ) {
	echo get_the_password_form(); // WPCS: XSS ok.
	return;
}
?>
<div id="product-<?php the_ID(); ?>" <?php wc_product_class( '', $product ); ?>>

	<?php
	/**
	 * Hook: woocommerce_before_single_product_summary.
	 *
	 * @hooked woocommerce_show_product_sale_flash - 10
	 * @hooked woocommerce_show_product_images - 20
	 */
	do_action( 'woocommerce_before_single_product_summary' );
	?>

	<div class="summary entry-summary">
		<?php
		/**
		 * Hook: woocommerce_single_product_summary.
		 *
		 * @hooked woocommerce_template_single_title - 5
		 * @hooked woocommerce_template_single_rating - 10
		 * @hooked woocommerce_template_single_price - 10
		 * @hooked woocommerce_template_single_excerpt - 20
		 * @hooked woocommerce_template_single_add_to_cart - 30
		 * @hooked woocommerce_template_single_meta - 40
		 * @hooked woocommerce_template_single_sharing - 50
		 * @hooked WC_Structured_Data::generate_product_data() - 60
		 */
		do_action( 'woocommerce_single_product_summary' );
		?>
	</div>

	<?php
	/**
	 * Hook: woocommerce_after_single_product_summary.
	 *
	 * @hooked woocommerce_output_product_data_tabs - 10
	 * @hooked woocommerce_upsell_display - 15
	 * @hooked woocommerce_output_related_products - 20
	 */
	do_action( 'woocommerce_after_single_product_summary' );
	?>
</div>

<?php do_action( 'woocommerce_after_single_product' ); ?>

Dans le cas de problèmes avec le module "Product Image" qui serait insérer dans un repeater, vous pouvez utiliser

<?php
	do_action( 'woocommerce_before_single_product_summary' );
?>

Attention que l'avantage de cette action est de récupérer également les badges associés aux produits. Utiliser un fonctions plus sélective peut vous rendre un contenu plus précis mais pas forcément la totalité du code voulu.

Liens des références des hook : https://docs.woocommerce.com/wc-apidocs/hook-docs.html