Bouts de codes et astuces pour WooCommerce

Woo Commerce est LE plugin dedié au e-commerce de WordPress. Sans être expert Woocommerce, il est tout à fait possible de modifier sa boutique avec quelques fonctions pratiques.

Changer la présentation de sa boutique demande parfois de passer par le code car il n’est pas possible de le faire grâce aux options par defaut de WooCommerce ou avec les options de personnalisation prévues du thème.

Personnaliser des pages WooCommerce comme on le souhaite n’est pas toujours possible via l’interface, et il est parfois indispensable de passer par la modification du code PHP.

Pour ajouter ses modifications, il faut faudra soit créer un plugin ou plus simple : vous rendre dans le fichier functions.php de votre thème, où en créant un plugin. Notez que j’ai choisi de préfixer les fonction avec wc4591_ pour éviter les conflits, mais vous pouvez utiliser le votre biensur.

Woocommerce : changer le nombre de produits relatifs à afficher

Les related posts (ou articles relatifs) est une fonctionnalité que l’on croise très couramment sur les site e-commerce, et il est possible de changer le nombre de produits à afficher, voici le code à utiliser :

add_filter( 'woocommerce_output_related_products_args', 'wc4591_change_number_related_products', 9999 );
 
function wc4591_change_number_related_products( $args ) {

	$args['posts_per_page'] = 4; // Nombre de produits
	$args['columns'] = 4; // Nombre de colonnes par lignes

	return $args;
}

Changer le titre des produits relatifs dans WooCommerce

Une fois le nombre de produits affichés modifié, vous allez sans doutes vouloir modifier le titre des « related products » de WooCommerce, la fonction à utiliser est la suivante, vous noterez qu’elle est un peu différente des autres fonctions, elle utilise un « hook » de traduction des textes.

add_filter(  'gettext',  'wc4591_change_related_products_title', 10, 3 );

function wc4591_change_related_products_title( $translated, $text, $domain  ) {
    if( $text === 'Related products' && $domain === 'woocommerce' ){
        $translated = esc_html__( 'Autres produits intéressants', $domain );
    }
    return $translated;
}

Déplacer le lien « avis client » de Woocommerce

Sur votre fiche produit, entre le titre est le prix d’affiche un résumé des avis client sous forme de lien, avec des étoiles.
Dans un projet récent, j’ai eu besoin de déplacer les étoiles sous le prix, pour ce faire, il a fallu dans un premier temps désactiver son affichage grâce à un hook Woocommerce, pour le réafficher au bon endroit en jouant sur sa priorité, ici le chiffre 12 m’a permis d’afficher le lien renvoyant vers les avis, en dessous du tarif. Voici le code de la fonction :

function wc4591_remove_single_rating() {
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
}
add_action('woocommerce_single_product_summary', 'wc4591_remove_single_rating', 2 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 12 );

Ajouter du texte avant le bouton d’achat dans WooCommerce

Un autre hook très utile pour rajouter un texte juste avant le bouton d’ajout au panier.

function wc4591_before_add_to_cart_form(){
	echo 'Mon texte';
}
add_action('woocommerce_before_add_to_cart_form','wc4591_before_add_to_cart_form');

Indiquer des prix en TTC dans la fiche produit Woocommerce

J’ai trouvé une solution rapide pour afficher TTC ou HT à la suite du prix d’un article se trouve en CSS. Il faudra donc ajouter ce code au fichier style.css du theme de votre WordPress :

.woocommerce-Price-amount::after{
	content: " TTC";
}

Changer le message par défaut de livraison Woocommerce

Dans le processus commande de WooCommerce, une fois l’adresse de livraison saisie par le client, un message apparait selon les méthodes disponibles.
Cependant si aucune methode n’est disponible il peut être interessant de proposer par exemple d’appeler le comemrçant afin de

add_filter( 'woocommerce_cart_no_shipping_available_html', 'change_msg_no_available_shipping_methods', 10, 1  );
add_filter( 'woocommerce_no_shipping_available_html', 'change_msg_no_available_shipping_methods', 10, 1 );
function change_msg_no_available_shipping_methods( $default_msg ) {
    $custom_msg = "Applez-nous au 01 02 03 04 05";
    if( empty( $custom_msg ) ) {
      return $default_msg;
    }
    
    return $custom_msg;
}

Source : xadapter.com

---

Notez bien que certaines fonctions ne concernent que des thèmes précis, et comme vous aller pouvoir le constater ci dessous, le code partagé sur internet n’est pas valable pour tous les sites.

Personnellement j’apprécie le thème StoreFront, qui est developpé et maintenu par Automattic, la maison-mère de notre CMS préferé, ce qui est un gage de qualité du code selon moi.

Modifier le nombre de produits affichés sur le thème Storefront

Modifier le nombre de produits dans les pages archives

Les pages archives de WooCommerce sont celles qui présentent les produits d’une catégorie ou d’un tag particulier. Le filtre permettant de gérer le nombre de produits affiché est lié à WooCommerce et non au thème.

/**
 * Change number or products per row to 3
 * Source : https://docs.woocommerce.com/document/change-number-of-products-per-row/
 */
function wc4591_loop_columns() {
	return 5; // 5 products per row
}
add_filter('loop_shop_columns', 'wc4591_loop_columns', 999);

Modifier le nombre de produits sur la homepage Storefront

Dans le cas de l’utilisation du thème Storefront, la page d’accueil du thème propose plusieurs listes de produits comme les meilleures ventes, les produits les plus vendus, etc…
Par defaut Storefront affiche 4 produits sur chaque ligne.

Dans l’hypothèse où vous souhaiteriez modifier ce nombre pour la partie des derniers produits (« on sale products »), il vous faudra créer une fonction modifiant les arguments de la requêtes (args), comme celà :

/**
 * Change number or products per row to 3 in Home Page
 * Source : https://wooskins.com/use-theme-storefront/
*/
function wc4591_product_categories_args( $args ) {
 	$args = array(
 		'title' => 'MON TITRE',
 		'limit'   => 3,
		'columns' => 3,
 	);
  	return $args;
}
add_filter( 'storefront_on_sale_products_args', 'wc4591_product_categories_args' );

Modifier l’ordre d’affichage de la page d’accueil Storefront

Storefront utilise un large système hooks et de filtres pour organiser son contenu. Afin de modifier l’organisation des blocs de la page d’accueil il faut modifier la priorité des actions. Voici un exemple sur les produits mis en avant :

/**
* Functions hooked in to homepage action in /wp-content/themes/storefront/inc/woocommerce
*
* @hooked storefront_homepage_content      - 10
* @hooked storefront_product_categories    - 20
* @hooked storefront_featured_products     - 40
* @hooked storefront_popular_products      - 50
* @hooked storefront_on_sale_products      - 60
* @hooked storefront_best_selling_products - 70
*
*/

function wp1586_remove_featured_products_parent_theme() {
    remove_action('homepage', 'storefront_featured_products', 40 );
};
add_action( 'init', 'wp1586_remove_featured_products_parent_theme', 1);
add_action( 'homepage', 'storefront_featured_products', 70 );