Woo hoo !
Qu’est-ce que WooCommerce ?
Woocommerce est l’une des solutions E-Commerce de WordPress, se présentant sous la forme d’un plugin.
à mon sens, il s’agit de l’une des meilleurs solutions ecommerce pour WordPress. Elle est loin d’être parfaite, mais présente un très bon écosystème :
Documentation
La documentation est très fournie : https://woocommerce.com/documentation/
Vous trouverez également des guides, vous aidant de vos premiers pas aux besoins les plus avancés, comme par exemple :
https://woocommerce.com/fr-fr/guides/new-store/
Thèmes
Que ce soit les thèmes gratuits disponibles sur le repo de WordPress
Les thèmes payants sur les différentes plateformes comme Theme forest ou sur le site de WooCommerce directement
Disponibles dans la plupart des thématiques ecommerce (vêtements, beauté, jouets, services, etc.)
https://woocommerce.com/product-category/themes?categoryIds=1033&collections=theme&page=1
Plugins
En plus des extensions proposées sur le site officiel de WooCommerce (https://woocommerce.com/fr-fr/products/), il existe une galaxie de plugins gratuits et payants pour répondre à vos besoins et ceux de vos clients.
Livraison & Paiement
Les principales solutions de paiements des banques (Crédit Agricole, crédit mutuel, etc), ou autre (paypal, stripe, etc) tout comme celle de livraison (Colissimo, chronopost, Relais, DHL, Fedex etc) ont un plugin WooCommerce pour une intégration facile à votre boutique WooCommerce
Communauté et confiance
Cette solution est développée par la même entreprise que WordPress, en Open-source. Ce qui est un gage de qualité et de tenue dans le temps.
Plus de 350 contributeurs, plus de 10 millions de téléchargement
Mes Retours d’expériences :
WooCommerce est une solution puissante pour faire du e-commerce, qui est très souple en terme de personnalisation graphique (ce n’est pas pour rien que les builders de sites comme Elementor permettent de personnaliser tout ou partie de WooCommerce) mais aussi en terme de développements spécifiques, que ce soit via des plugins ou du code personnalisé.
Perso, je m’en suis servi sur différents types de boutiques (beauté, puériculture, réservation, vêtements) avec chacune des problématiques propres, et à chaque fois WooCommerce ne m’a pas déçu.
Vous êtes coincés ? Il y a 9 chances sur 10* que quelqu’un ai déjà rencontré ce souci et vous trouverez la solution
Vous progressez et vous avez de nouvelles questions ? Il y a 9 chances sur 10* de trouver un article expliquant ce nouveau concept, comme tout à fait par hasard sur ce superbe blog !
Votre client a dans son projet des demandes qui vous font parler le Mandarin ancien de l’époque Ming, là encore, stupéfiante synchronicité des statistiques, Il y a 9 chances sur 10* de pouvoir répondre à sa demande via un plugin, ou via du code personnalisé, ou un mix des 2 (oui, là on sera plus dans le mésopotamien mais c’est possible !)
(* chiffres très officiels certifiés par le Soon7 Data institute of Mange tes chaussettes, all rights reserved respect my authority)
Comment le modifier visuellement ?
C’est l’une des premières questions sur laquelle vous risquez de vous heurter. Plusieurs personnalisations sont possibles via des réglages WooCommerce ou encore via du css, et sont basiques. Nous allons détailler ici des techniques un peu plus évoluées en fonction de vos besoins et de ce qui doit être personnalisé.
Piste 1 : Les plugins
Il existe plusieurs plugins vous permettant de personnaliser Woocommerce en fonction de vos besoins, comme par exemple « Customizer for WooCommerce » https://wordpress.org/plugins/woocommerce-customizer/ ou encore StoreCustomizer https://wordpress.org/plugins/woocustomizer/
Celui-ci vous permet de personnaliser les boutons, les labels, certains textes, etc. Ce type de plugin vous propose en fait une interface simple pour réaliser en arrière plan les traitements par du php, des filtres et des hooks. On ne va pas se mentir, ça fait gagner énormément de temps, toutefois, il est toujours bon de connaitre le fonctionnement des filtres ou des hooks afin de vous débrouiller si ce que vous souhaitez modifier n’a pas été prévu dans votre plugin magqiue.
Et tu filtres, et tu filtres !
Piste 2 : les filtres
Un filtre permet de modifier une ou plusieurs valeurs qui sont retournées à un moment donné lors de l’exécution de WooCommerce
Un filtre est codé en php, et sera généralement dans le functions.php du thème enfant.
Pour en savoir un peu plus, la documentation officielle : https://developer.wordpress.org/reference/functions/add_filter/
Exemple dans WooCommerce, nous allons modifier ce texte, à l’aide d’un filtre :
Exemple : Changer le texte « Related Products » – « Produits similaires »
// Fonction qui sera utilisé pour filtrer le texte, le modifier, avant de le renvoyer à WooCommerce pour être affiché
function chang_rp_text($translated, $text,$domain)
{
if ($text === 'Related products' && $domain ==='woocommerce'){
$translated = esc_html__('Explorer d\'autres senteurs',$domain);
}
return $translated;
}
// On applique notre filtre sur la fonction qui affiche des textes
add_filter('ngettext','chang_rp_text',10,3);
Et voici le résultat une fois le filtre appliqué, le texte est remplacé pour mieux coller à la thématique de la boutique
Exemple : Changer le nom d’un pays dans la liste de pays Select
On utilise un autre filtre, qui permet d’agir sur le tableau des codes pays / Nom pays. Le but ici est de bien préciser « France métropolitaine »
// Fonction qui sera utilisé pour filtrer le nom du pays, le modifier, avant de le renvoyer à WooCommerce pour être affiché
// WooCommerce stocke les pays dans un tableau, et donc on change la valeur du nom du pays avec la clé du pays FR dans le tableau
function renommer_france_metro($countries)
{
$countries['FR'] = 'France métropolitaine';
return $countries;
}
// On applique notre filtre sur lorsque WooCommerce ramène le tableau des pays
add_filter('woocommerce_countries','renommer_france_metro');
Mister bad bad hook !
Piste 3 : Les hooks
C’est quoi un hook ?
Les hooks sont des points d’entrée dans le code, qui vous permettent d’y accrocher le code que vous voulez, retirer ce qui y est déjà accroché, changer l’ordre de ce qui est accroché.
On hooke / on déhooke / on rehooke en fonction de ce que l’on veut faire
WC est construit sur ce principe
Storefront, le thème de base est construit sur ça
Des thèmes / plugins utilisent aussi beaucoup cette approche, qui permet d’agir sur ce qui est fait sans tout péter (même si des fois on y arrrive, et même très bien !)
Voici l’exemple dans le template par défaut d’un single product, on voit bien les actions (ex : woocommerce_before_main_content) et les actions qui sont déjà hookées dedans comme woocommerce_output_content_wrapper et woocommerce_breadcrumb.
Le chiffre donné en paramètres (10 ou 20 dans cet exemple) représente l’ordre d’exécution.
Ainsi le woocommerce_output_content_wrapper étant à 10, il s’exécutera avant le woocommerce_breadcrumb qui est à 20, quelle que soit l’ordre dans lequel ces fonctions sont définies dans WooCommerce.
Lorsque vous accrocherez vos propres actions, vous pourrez mettre le chiffre que vous voulez, tout en gardant à l’esprit qu’il sert à séquencer les appels. Plus ce chiffre est petit et plus il est prioritaire.
De plus, généralement pour être « déhooké », il faut indiquer également ce chiffre, d’où le fait de connaitre le chiffre du hook sur lequel on veut agir.
Comment avoir des informations sur les hooks ?
Plutot que d’aller voir à la main dans chaque fichier voir quels sont les points d’entrée, leur ordres, etc, un guide visuel a été créé et vous permet, pour chaque type de page, d’avoir de façon visuel où sont appelés les actions , sur quel hook et dans quel ordre.
Vous trouverez tout en ligne ici : https://www.businessbloomer.com/category/woocommerce-tips/visual-hook-series/
Voici un exemple pour la page catégorie de WooCommerce : https://www.businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/
Et il fournit en plus des exemples d’actions déjà en place
// These are actions you can unhook/remove!
add_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 );
add_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 );
add_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
add_action( 'woocommerce_archive_description', 'woocommerce_product_archive_description', 10 );
add_action( 'woocommerce_before_shop_loop', 'woocommerce_output_all_notices', 10 );
add_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );
add_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );
add_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10 );
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 );
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );
add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
add_action( 'woocommerce_after_shop_loop', 'woocommerce_pagination', 10 );
add_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 );
La surcharge qui agit sur WooCommerce… et le mental
Piste 4 : la surcharge
Pour personnaliser votre site l’une des solutions est d’utiliser la surcharge. En copiant le fichier php de la page que vous souhaitez personnaliser et en la copiant dans votre thème enfant, vous pourrez faire vos modifications sans craindre qu’elles soient écrasées à la prochaine mise à jour.
Cette technique a des avantages (« ça marche ! © ») mais aussi hélas des inconvénients, notamment devoir répercuter chacune des modifications à chaque mise à jour (On vous montre ça un peu plus loin.
Comment surcharger une page dans WooCommerce ?
Ce répertoire woocommerce dans votre thème enfant va vous permettre de stocker tous les fichiers que vous souhaitez surcharger.
Les fichier surchargeables de WooCommerce se trouvent dans le répertoire
/wp-content/plugins/woocommerce/templates/
et donc il faut aller dans ce répertoire et copier le fichier que vous souhaitez surcharger, ainsi que son répertoire
étape 3 : On colle le fichier dans le répertoire “woocommerce” du thème enfant en respectant la structure des répertoires (si les fichiers sont dans un répertoire)
Dans cette exemple :
/wp-content/plugins/woocommerce/templates/archive-product.php sera surchargé dans
/wp-content/themes/MonThemeEnfant/woocommerce/archive-product.php
/wp-content/plugins/woocommerce/templates/single-product/short-description.php sera surchargé dans
/wp-content/themes/MonThemeEnfant/woocommerce/single-product/short-description.php
Comment savoir quel fichier surcharger ?
Il existe plusieurs plugins pour ça qui affichent toute l’arborescence, comme par exemple Show Current Template : https://fr.wordpress.org/plugins/show-current-template/
Comment se passe les mises à jour lors d’une surcharge de template WooCommerce
Lors de chaque mise à jour, WooCommerce vérifie chaque fichier surchargé, et vous informe s’il vous faut mettre à jour ou pas le fichier.
Ne touchez surtout pas à tout ce qui est en commentaire en début de fichier lorsque vous surchargez un fichier
En effet, chaque fichier dispose d’un numéro de version, et lorsque celui change, vous devrez répercuter les modifications du fichier original dans le fichier surchargé.
