Personnaliser WooCommerce afin qu’il s’intègre parfaitement au design de votre thème.
WooCommerce possède sa propre loop (boucle) pour afficher les produits dans les pages ainsi que ses propres fichiers de templates (modèles).
Rappel des fondamentaux
Dans un précédant article intitulé Installer WooCommerce, est expliqué comment procéder lorsque votre thème ne déclare pas le support de WooCommerce (voir paragraphe L’intégration du thème).
Le principe est de créer un nouveau modèle de page, est de substituer la boucle par défaut (la boucle du thème) par celle de WooCommerce.
Quelque soit thème choisi, les éléments propres à WooCommerce ont toujours le même aspect.
Pourquoi ? Tous simplement parce que WooCommerce possède ses propres fichiers de templating ainsi que son propre fichier CSS. Ce qui n’est pas toujours (jamais) en accord avec le reste du thème.
Modifier les fichiers de templating
Heureusement pour nos confrères Web Designers ce n’est pas à eux de s’adapter aux templates de WooCommerce, mais bien l’inverse.
Ces fichiers de templating se trouvent dans /wp-content/plugins/woocommerce/templates.
Pour les modifier sans prendre le risque de les perdre lors de la prochaine mise à jour de WooCommerce, rendez-vous à la racine de votre thème actif, créez un dossier nommé woocommerce (respectez bien la case), puis faites un copier/coller des fichiers à personnaliser du dossier /wp-content/plugins/woocommerce/templates vers /wp-content/votre_theme_actif/woocommerce/ et de faire les modifications dans ce dernier.
Ainsi, les fichiers contenus dans le thème actif seront prioritaires sur ceux de WooCommerce.
Attention toutefois à bien respecter les noms des fichiers. Pour ceux contenues dans des dossiers (ex: email), il faudra créer un dossier email à la racine du dossier /wp-content/votre_theme_actif/woocommerce/.
Personnaliser les Email de WooCommerce
Les différents Emails envoyés par votre site e-commerce via WooCommerce peuvent être eux aussi personnalisés.
Les templates par défaut se trouvent dans /wp-content/plugins/woocommerce/templates/emails.
Comme pour les fichiers de templatings, dupliquer le/les modèle(s) d’Email(s) à personaliser dans le thème actif. Plus précisément dans /wp-content/votre_theme_actif/woocommerce/emails.