Personnaliser votre page de produit Woocommerce

La page de produit Woocommerce est une étape essentielle du parcours de vente de votre boutique en ligne.  Si le modèle de produit de Woocommerce possède l’ensemble des éléments utiles à sa présentation, il est souvent nécessaire de le personnaliser afin d’homogénéiser le design du site ou d’y ajouter des fonctionnalités et autres contenus répondant aux besoins de votre e-commerce.

Dans cet article je vous propose de comprendre pourquoi et comment personnaliser votre page individuelle de produit Woocommerce avec Gutenberg, l’éditeur de WordPress basé sur les blocs d’édition.

Pourquoi personnaliser sa page de produit Woocommerce ?

Les outils proposés par l’éditeur de modèle Woocommmerce permettent de personnaliser les éléments essentiels du design de la page produit de votre boutique en ligne, afin qu’il colle au plus près de votre charte graphique et de votre image de marque. À l’aide de cet éditeur visuel, vous pourrez modifier en quelques clics les couleurs de textes et de fond, les marges et les styles typographiques, les liens ou encore le rendu des images de vos produits.

Redéfinir la mise en page du produit Woocommerce

L’éditeur de WordPress permet aujourd’hui de modifier largement la structure HTML de la page sans avoir à toucher au code du site internet. Il devient ainsi possible à l’utilisateur final de modifier la disposition des blocs Woocommerce dans la page (ajouter des sections, grouper des blocs, créer des colonnes, etc.) par simple glisser-déposer, afin de redéfinir l’architecture de votre page et de proposer une expérience utilisateur unique sur votre boutique en ligne.

Proposer des fonctionnalités complémentaires afin de renforcer le tunnel de vente

La personnalisation du modèle de produit Woocommerce à l’aide de l’éditeur Gutenberg permet d’ajouter facilement des fonctionnalités supplémentaires à vos pages de produits. 3 méthodes principales vous permettent ainsi désormais de personnaliser vos pages de produits Woocommerce : l’intégration de blocs natifs Woocommerce ou provenant  d’extensions complémentaires, l’utilisation des hooks Woocommerce pour développer vos fonctionnalités spécifiques et les intégrer dans des zones spécifiques de vos pages, ou le développement de vos propres blocs par un développeur spécialisé Woocomerce.

Parmi les fonctionnalités additionnelles les plus répandues, on retrouve notamment :  

• L’affichage des collections de produits natives de Woocommerce (produits suggérés, ventes croisées, produits en vedette, etc.)
• L’intégration d’options de commande aux produits Woocommerce, de formulaire de configuration ou de prise en charge de service,
• L’intégration de fonctionnalités complémentaires comme la création d’une whish-list ou la demande de devis.

Ajouter des éléments de communication à vos pages de produit

L’attractivité ou le référencement d’une page produit passe par l’ajout de contenus textuels ou médias en complément des descriptions proposées sur la page de produit Woocommerce.

Là encore le recours aux blocs d’édition tierce partie ou au développement complémentaire vous permettra d’intégrer la fonctionnalité répondant précisément aux besoins de votre site e-commerce :

• Des vidéos de promotion du produit
• De nouvelles photos d’échantillons ou des variations de vos produits
• Une barre de partage sur les réseaux sociaux
• Une FAQ permettant d’augmenter l’engagement du visiteur et de renforcer le référencement de la page du produit,
• Etc.

Les réglages des produits Woocommerce sur l’écran d’édition du produit

Bien que la création de produit Woocommerce ne rentre pas dans le cadre de cet article, il peut être utile de comprendre quelle incidence sur ses options de présentation, auront les réglages définis lors de cette étape. Sans toutefois rentrer dans les détails, voici une brève présentation des modalités de création d’un produit sur la plateforme Woocommerce.

N.B. Le nouvel éditeur de produit Woocommerce étant encore à ce jour sous sa version bêta, je vous présente ici l’écran d’édition traditionnel d’un produit Woocommerce.

5 zones principales de champs sont proposées sur la page d’édition de produit. Ce sont ces informations qui seront affichées sur la page de présentation permettant à vos visiteurs – vos clients – de faire le choix d’acheter vos articles sur votre boutique en ligne.

Titre et descriptions : des champs descriptifs

Le titre et les deux descriptions (courte et longue) seront très importants pour le référencement de vos produits. Ils permettront à vos visiteurs de trouver votre produit et de valider qu’il correspond bien à leur recherche.

En tête de page, le champ titre ainsi que la description longue du produit vous permet de travailler précisément votre SEO. Attention néanmoins, la description courte du produit, parfois affichée sur les pages de catalogues produit se trouve en bas de l’écran d’édition.

Le bloc de données du produit

Le bloc de données comporte par défaut 7 onglets de réglages permettant de définir :

• La catégorie de taxes applicables au produit ;
• Le code de référence du produit
• Les informations physiques liées au produit et les éventuelles classes d’expédition
• Les produits lés à afficher sur la page de présentation Woocommerce du produit
• Les attributs de variation présentée (taille, poids, couleurs modèles, etc.)
• Les variations elles-mêmes et notamment leur prix, stocks, référence, etc.
• Une éventuelle note de commande et position du produit dans le menu.

Bien sûr, il sera aussi possible d’y trouver des onglets de fonctionnalités ou données supplémentaires, développées par un développeur ou intégrées à votre boutique Woocommerce à l’aide d’extensions tierce partie.

Les blocs image et galerie

Vous pourrez intégrer ici l‘image principale du produit ainsi que les images de la mini galerie présentée sur la page Woocommerce du produit.

Les blocs de taxonomie : les catégories et étiquettes du produit

Les catégories et étiquettes de vos produits Woocommerce vont vous permettre de les classer afin qu’ils soient correctement indexés et référencés sur votre site e-commerce ainsi que sur les pages de résultats de Google.

Personnalisation du template de votre page produit Woocommerce ?

La personnalisation du modèle de produit unique de Woocommerce (single product template) vous permettra d’apporter des modifications de mise en page et des styles de base au rendu de l’ensemble de vos pages, en éditant chaque élément composant votre page produit.  Woocommerce propose ainsi 3 moyens de personnaliser un modèle de produit (un template).

L’éditeur de thème basé sur les blocs propose aussi 2 méthodes de modifications des règles de styles CSS, en addition de la feuille de style globale de votre thème WordPress.

Enfin, les hooks PHP bien connus des développeurs WordPress restent en grande partie compatibles avec l’édition du modèle de produit sur l’éditeur Gutenberg, et permettent de modifier significativement vos pages de produit Woocommerce en y ajoutant programmatiquement de nouvelles fonctionnalités, des médias ou tout autre contenu additionnel.

Woocommerce a développé son propre set de blocs pour les thèmes Full Site Editing (FSE) de WordPress (les thèmes basés sur les blocs). Le template Woocommerce chargé d’afficher vos pages de produits est composé de ces blocs qui permettent d’afficher les différents composants de vos pages. Fil d’Ariane, Image et galerie d’images du produit, description, prix, référence du produit, bouton d’ajout au panier, etc., sont autant d’éléments de composition que vous pourrez plus ou moins personnaliser à l’aide de l’éditeur de WordPress.

Pour commencer, rendez-vous dans le menu « Apparence » -> « Éditeur » de votre site e-commerce, puis recherchez le menu « Modèles » (templates). Depuis la page des modèles existants, vous pourrez alors accéder au template de « Produit unique » que nous allons étudier ensemble.

N.B. Les blocs d’édition sont cliquables. Un clic sur celui que vous souhaitez personnaliser vous donnera accès, à une série d’options plus ou moins étendue, permettant de modifier les réglages de typographie, de couleur, de marge, etc., et/ou de définir les éléments dynamiques à afficher.

Modification des blocs Woocommerce

Le fil d’Ariane (breadcrumb)

Le bloc du fil d’ariane (breadcrumb) ne propose actuellement que des options de dimensionnement (accessible depuis la barre d’outils), la personnalisation des couleurs de texte et des liens, ainsi que des réglages typographiques (depuis la barre latérale – l’inspecteur de propriétés).

N.B. Ici la couleur d’arrière-plan est définie sur un bloc de groupe enveloppant le fil d’Ariane.
N.B. Les modification liées au contenu du fil d’Ariane restent accessibles à l’aide d’un filtre PHP woocommerce_breadcrumb_default que nous voyons plus bas dans cet article.

Image produit et galerie

Le bloc Product Image Gallery du modèle de produit Woocommerce ne propose encore aucun réglage. Il vous faudra ainsi définir vos images et leur nombre en amont, depuis l’écran d’édition du produit. Vous pourrez toutefois travailler l’apparence de ce bloc d’images en intégrant du code CSS à vos pages.

Exemple de stylisation CSS de la galerie d’image du produit Woocommerce

À titre d’exemple, je vous propose ici 10 lignes CSS vous permettant de repositionner le bloc de galerie verticalement et en superposition.
N.B. cet exemple ne couvre que le rendu dans l’éditeur et il vous faudra retranscrire votre code CSS pour le rendu en front de votre boutique en ligne.

.wc-block-editor-product-gallery {

position: relative;

}

.wc-block-editor-product-gallery__other-images {

position: absolute;

top: 5%;

left: -55px;

display: flex;

flex-direction: column;

z-index: 99;

}

.wc-block-editor-product-gallery__other-images img {

box-shadow: 0 0 15px #00000022;

}

Bloc des détails du produit

Le bloc de détails du produit est un tableau de données permettant d’afficher tant ses informations de poids et de taille, que les avis ou toute autre informations personnalisées. Ici le seul et unique réglage proposé par l’interface de l’éditeur est une option permettant d’afficher le titre de chaque onglet dans le corps du texte (dont l’intérêt est assez relatif), alors que l’onglet de réglages de style dans l’inspecteur latéral de propriétés vous donnera à l’option des marges externes afin de mieux positionner ce bloc vis-à-vis des autres dans la page.

Si l’interface de l’éditeur WordPress permet de positionner le bloc à l’aide en jouant sur ses marges, il vous faudra là encore passer par une intégration CSS ou un plugin tiers pour transformer l’apparence de ces onglets sur votre page produit Woocommerce.  

N.B. Le contenu du tableau reste quant à lui modifiable en PHP à l’aide du hook woocommerce_product_tabs. Ici, un onglet personnalisé est ajouté au modèle, son rendu est visible en front office du site e-commerce.

Les informations textuelles : Titre, description et prix du produit

BlockControls. :la barre d’outils des blocs de contenus textuels

Le template de produit individuel (unique) de Woocommerce bénéficie des fonctionnalités natives de l’éditeur de WordPress (Gutenberg). Tous les blocs textuels proposent ainsi une barre d’outils permettant a minima, d’aligner le contenu dans son bloc, de remonter ou descendre celui-ci dans la hiérarchie des blocs de la page (2 chevrons verticaux) et pour certains, de boutons de gestion de la graisse et de l’italique. Le bloc de titre dispose quant à lui d’un sélecteur de niveau, correspondant aux niveaux de titre disponible en HTML (de 1 à 6).

Inspecteur de propriété des blocs de contenus textuels

La barre latérale de l’éditeur de WordPress donne accès à un certain nombre d’options relatives au bloc sélectionné. Celles-ci vont donc varier en fonction du bloc édité.

À titre d’exemple, un clic sur le bloc de titre vous permettra de choisir, depuis l’inspecteur latéral de créer (ou pas) un lien sur celui-ci et d’ouvrir la page dans un nouvel onglet. Nous garderons à l’esprit que cette option n’est pas très pertinente puisqu’elle se contente de cibler la page en cours…

Plus intéressant, l’inspecteur latéral propose un onglet de gestion des styles propres à chaque bloc édité. Les options de styles sont similaires pour l’ensemble des blocs textuels.

Réglages Gutenberg par défaut des blocs textuels

Les réglages de couleur des blocs WordPress et Woocommerce

Les réglages de couleur vous permettent de choisir celle du texte et du fond du bloc sélectionné. Quel que soit le bloc, vous pourrez aussi définir un dégradé à assigner en fond du bloc WordPress.

Options de typographie des blocs WordPress

Les options de réglages typographiques correspondent aux possibilités offertes par les éditeurs de texte habituels. Vous pourrez ici travailler sur :

• La font (son apparence) ;
• L’interlignage ;
• L’interlettrage (espacement entre les lettres du bloc) ;
• La décoration (souligné, barré, etc.)
• La casse (capitale, capitalisé, minuscule)

Travaille des marges : padding et margin

Nous l’avons évoqué plus haut dans cet article : la définition des marges internes et externes au bloc sélectionné est directement accessible dans l’onglet des styles. Là encore, ce contrôle vous permettra d’affiner votre mise en page et la position des blocs les uns par rapport aux autres.

Bordure et rayon des blocs de composition

Les options de style vous permettent de travailler des encadrés afin d’intégrer plus facilement vos maquettes graphiques.

À titre d’exemple, nous avons ici défini une marge interne, un fond jaune ainsi qu’un rayon de 15px pour l’ensemble de nos titres de page de produit Woocomerce.

Bouton d’ajout au panier Woocommerce

Le bouton « d’ajout du produit au panier Woocommerce » propose des options de variation dépendant du produit affiché. Peu d’options, si ce n’est l’affichage de sélecteurs « + » et « – », sont actuellement disponibles à ce stade. Les futures mises à jour de Woocommerce devraient cependant proposer rapidement davantage d’options de stylisation dudit bouton. Nous pouvons néanmoins personnaliser ce bouton call-to-action avec quelques lignes de CSS, afin de l’intégrer au mieux dans notre charte graphique.

.woocommerce div.product form.cart div.quantity .qty {
  background: #f3f3f2;
  border: none;
  padding: 0.16em 1em;
  margin-right: 0;
  font-size: 1.5rem;
  border-radius: 5px 0 0 5px;
}
.woocommerce div.product form.cart button.single_add_to_cart_button, .woocommerce div.product form.cart button[name="add-to-cart"] {
    padding: 1.75em;
    background: #efd527;
    color: #333;
    font-size: 1.5rem;
    border-radius: 0 5px 5px 0;
    text-transform: uppercase;
    &:focus {
        outline-width: 0px;
        outline-style: none;
    }
}

N.B. Le bloc de bouton d’ajout au panier est cependant stratégique sur les pages de présentation de produit Woocommerce. En effet, il est généralement ciblé par des développements ou extensions tierce partie afin d’afficher, immédiatement au-dessus de celui-ci, des fonctionnalités additionnelles.

Un bloc de taxonomie pour la catégorie, les étiquettes et la marque du produit

Woocmmerce offre la possibilité de choisir quelle « variation » afficher pour son bloc de taxononomie de produit, c’est-à-dire le type de taxonomie (catégorie, étiquette, marque) pour laquelle nous souhaitons afficher les termes.

Les 3 blocs de catégorisation du produit

Les blocs de catégorie, d’étiquettes et de marque du produit sont des éléments dynamiques permettant d’afficher des liens de navigation transversaux sur le site. Un clic sur l’un ou l’autre vous permettra de choisir la « Variation », c’est-à-dire la taxonomie à présenter (catégorie, étiquette marque). Vous avez donc ici un excellent moyen de créer (par duplication) un bloc supplémentaire pour compléter les taxonomies à afficher sur la page.

Bloc des produits similaires

Le bloc des produits similaires correspond à une variation d’un bloc générique d’affichage dynamique dit de « collections » de produits Woocommerce. Il s’agit d’un bloc « de requête », destiné à interroger la base de données et afficher, en front, les articles choisis pour les ventes croisées, les produits suggérés, etc. Là encore, il sera possible de dupliquer le bloc afin d’ajouter un ou plusieurs éléments de suggestion d’achat au modèle de vos pages produit.

La barre d’outils du bloc de collection Woocommerce

Le bloc de « produits similaires » de Woocommere est en fait une variation du bloc générique de « collection de produit ». Outre un bouton de réglage de dimsension du bloc dans la page, la première option de ce bloc consiste donc à permettre le choix du « type » de collection à afficher sur le template. Un clic sur le bouton « Choisir la collection » dans la barre d’outils (la barre de contrôle), permettra d’ouvrir un popup présentant la liste des options disponibles :

• Les produits mis en avant seront considérés comme les « têtes de gondoles », cet état leur sera attribué dans la page d’édition du produit.
• Les nouveautés correspondant aux derniers produits intégrés à la boutique Woocommerce
• Les produits en promo se voient appliquer une réduction tarifaire sur une période donnée
• Les meilleurs produits sont les plus vendus sur la plateforme e-commerce
• Les mieux notés bénéficient des avis clients et notations les plus favorables
• Les produits triés sur le volet vous permettent d’établir vos propres règles de tri
• Les produits similaires correspondent à l’option d’affichage par défaut
• Les produits suggérés sont souvent appelés « upsells » et proposent une montée en gamme par rapport au produit dont la page est visitée par le client
• Les ventes croisées sont généralement appelées « cross-sells » et proposent des achats en complément du produit choisis.

N.B. On notera un bouton « créer les vôtres » qui permettra aux utilisateurs Woocommerce confirmés de créer leur propre collection en fonction de règles et de conditions spécifiques à leur boutique en ligne.

En fonction du choix de collection effectué, les associations de produits pourront ensuite être définies sur la base de leur catégorie ou des étiquettes de produit.

La barre d’outils du bloc permettra finalement de choisir entre un affichage des produits en « grille » (c’est-à-dire alignés) ou en « liste » (de façon superposée).

L’inspecteur de propriété du bloc collection Woocommerce

Association des produits à afficher

Il s’agit ici de déterminer la règle d’affichage automatique des produits de la collection Woocommerce. Par défaut Woocommerce propose 2 sélecteurs :

• Sélection par catégorie
• Sélection par étiquette

Produits à afficher

De même, cette association pourra être effectuée à partir du produit affiché, ou arbitrairement sur la base d’un autre produit à promouvoir sur le site.

• À partir du produit actuel
• Un produit spécifique (popup de recherche de produit)

Option de tri pour l’affichage des produits

Le tri des produits correspond à l’ordre dans lequel ils apparaissent sur le page Woocommerce. Cette option pourra être relativement utile pour un réglage fin des promotions de produits sur le tunnel de vente.

Affichage par empilement ou en grille

Cette option n’est qu’une entrée supplémentaire pour les possibilités de rendu proposées dans la barre d’outils du bloc.

• Nombre de produits par ligne
• Nombre de produits affichés

Rien de spécial ici, la plupart des utilisateurs Woocommerce opteront pour une présentation des produits en grille, c’est à dire alignés sur des lignes responsives de 3 à 6 produits.

Produits par page

L’affichage en grille nécessite de définir un nombre de colonnes pour chaque ligne de produits, ainsi que le nombre total de produits affichés par le bloc Woococommerce. On y retrouve donc naturellement un champ de définition du « nombre de produits par page » ainsi qu’un champ pour le nombre de colonnes.

Possibilité de n’afficher que les produits en promotion

Sur Woocommerce comme sur toute plateforme e-commerce, vous pourrez définir des périodes de promotion pour vos produits ou vos services. Toujours dans une optique d’affinage de la stratégie marketing du site, le bloc des produits similaires permet de choisir de n’afficher que les articles en promotion et de conditionner leur présentation à l’état du stock.

Réglages des blocs internes

Chaque produit de la collection est composé à son tour de blocs présentant certaines options de présentation. En plus des réglages proposés par Woocommerce, ces éléments présentent souvent des options de personnalisation nativement disponibles sur l’éditeur WordPress.

Image du produit

• Liée au produit ou non
• Affichage du badge de promotion
• Alignement du badge
• Taille originale ou recadrée (thumbnail)
• Réglage des marges internes et externes
• Réglage des dimensions (les proportions) d’affichage
• Définition de bordure et de rayon

Titre du produit similaire

Les options proposées sont assez rudimentaires. Elles permettent principalement, au clic sur le titre, de lier (ou pas) le produit affiché vers sa page de produit et de l’ouvrir si nécessaire dans un nouvel onglet.

On retrouvera ensuite les réglages de typographie inclus dans WordPress permettant de définir, la raille et la police de caractère, l’apparence (la graisse de la police), l’interlignage, etc.

Prix du produit de la collection

Ce bloc ne présente que les options d’affichages incluses dans l’éditeur de bloc textuel de WordPress

Bouton « Ajouter au panier » du produit similaire

Le bouton d’ajout au panier Woocommerce est aussi un bloc WordPress (Gutenberg). On retrouvera ici la possibilité de définir :

• La taille du bouton au sein de sa colonne ;
• Les couleurs de texte et de fond ;
• La possibilité de n’afficher que la bordure, le contour du bouton
• Le rayon de la bordure ;
• Les caractéristiques typographiques du bouton d’ajout du produit au panier ;
• Ses marges internes et externes.

Modification de la mise en page du modèle de page produit : le layout

Woocommerce bénéficie des possibilités offertes par le nouvel éditeur de WordPress de redéfinir la structure de la page sans avoir à toucher à son code sous-jacent. Le système de blocs structurants tels que les groupes, colonnes, rangées et empilements rapproche désormais l’expérience utilisateur sur l’éditeur WordPress de celles généralement proposées par les constructeurs de pages (page builder) tels que Divi ou Elementor.

Positionnement des blocs : la mise en page

Toutes les modifications de template Woocommerce étant désormais envisageables, il serait vain de vouloir être exhaustif à ce niveau. À titre d’exemple, je vous propose ici modifier rapidement la structure du modèle de produit Woocommerce en déplaçant les onglets de détails sous les blocs de catégorie et de marque du produit, et en ajoutant un bloc de « prouits suggérés » en vis-à-vis du bloc de pruits simailiares :

Un clic sur la « vue d’ensemble du document permet de sélectionner rapidement la colonne de droite de la mise en page du modèle Woocommerce.

Le déplacement du bloc de détails du produit s’effectue ensuite par simple glisser-déposer (drag & drop) à l’instar des builders du marcher.

L’étape suivante consiste, de la même façon, à cliquer sur le bouton bleu «  + » d’insertion des blocs pour rechercher un groupe ainsi qu’un bloc de colonnes, afin d’intégrer dans celle de gauche notre bloc de produits similaires, avant de cliquer sur la colonne de droit pour intégrer un nouveau bloc de collections de produits Woocommerce. Nous choisissons ici, les produits suggérés, auxquels nous appliqueront des réglages identiques au bloc des produits similaires.

En quelques clics seulement, nous avons ainsi significativement modifié l’apparence de notre page de produit, ou du moins de son modèle Wocommerce : depuis l’onglet des styles globaux, de l’autre, depuis le fichier theme.json du thème WordPress utilisé pour la boutique en ligne.

Intégration de vos propres en-têtes et pied de page au modèle de produit Woocommerce

Intégration des styles CSS au modèle de produit Woocommerce

L’éditeur de WordPress met à disposition des utilisateurs plus avancés deux moyens d’intégrer des règles de styles à leurs modèles de page et de produit Woocommerce.

Le CSS intégré via l’éditeur

Chaque bloc d’édition de WordPress disposant d’un champ de classe(s) CSS additionnelle(s), l’utilisateur final a désormais la possibilité d’ajouter à l’élément souhaité une classe personnalisée qu’il sera possible de cibler au sein de nouvelles déclarations CSS.

Depuis la barre supérieure de l’éditeur, un bouton noir et blanc « Styles » permet ensuite d’ouvrir dans la barre latérale ses options de réglages éponymes. Un nouveau clic sur le bouton en pointillés ouvrira alors un champ texte permettant d’intégrer les règles de styles souhaitées.

À titre d’exemple, nous passons automatiquement en rouge le titre principal de toutes les pages de produit Woocommerce :

h1. cdw-woo-product-main-title  {
    color: red !important;
}

Cet exemple un peu trivial montre néanoins comment modifier l’apparence de n’importe quel bloc de contenu, sur l’éditeur et en front-office de votre boutique Woocommerce.

Le CSS intégré via le fichier theme.json

Les thèmes WordPress basés sur les blocs (block based WordPress Themes) sont configurés à l’aide d’un fichier theme.json situé à la racine de leur répertoire. Ce fichier offre l’avantage de proposer une API simple pour l’intégration de règles CSS additionnelles.

Ainsi, au sein du fichier theme.json, la section « styles » présente une sous-section « elements » permettant de cibler les titres du document HTML. L’ajout d’un élément « css » nous permet ainsi d’intégrer une déclaration au format SASS (ou SCSS) proposant l’opérateur parent « & » à partir duquel nous déclarons notre règle :

"elements": {
    "h1": {
        "css": "&.cdw-woo-product-main-title { color: #fff !important; background: #f00; display: inline-block; padding: .5em .75em;}"
    }
}

La personnalisation des blocs d’édition Woocommerce pourra généralement être effectuée au niveau de la section « blocks » du fichier theme.json du thème WordPress courant. La documentation officielle de Woocommerce nous fournit à ce titre un exemple aussi simple que parlant :

"styles": {
    "blocks": {
        "woocommerce/product-price": {
            "color": {
                "background": "#00cc00",
                "text": "#fff"
            },
            "typography": {
                "fontStyle": "italic",
                "fontWeight": "700"
            }
        }
        ...
    }
    ...
}

En rechargeant la page de l’éditeur ainsi que l’une page de produit de notre boutique Woocommerce, nous constatons que notre titre est désormais stylisé de façon homogène sur les 2 environnements.

L’intégration des feuilles de styles du thème WordPress

Toutes ces nouveautés pourraient nous faire oublier que les thèmes FSE de WordPress continuent de disposer d’un fichier style.css à la racine du répertoire. Il est donc toujours possible de modifier l’apparence du thème et de la boutique Woocommerce de façon « traditionnelle », en tenant compte, bien sûr, de la nécessité de synchroniser les modifications CSS apportées à l’éditeur et au front du site WordPress…

Filtres et actions PHP : les hooks de la page produit de Woocommerce

Nous l’avons vu au début de cet article, certains hooks PHP permettent toujours de modifier certains éléments du template de produit basé sur les blocs. C’est par exemple le cas de woocommerce_breadcrumb_default utilisé pour modifier le fil d’Ariane ou encore de woocommerce_before_add_to_cart_button pour l’intégration dynamique de champs ou d’informations complémentaires.

Mais il faudra garder à l’esprit que l’éditeur Full Site Editing de WordPress repose principalement sur JavaScript et que les éléments Woocommerce correspondant désormais à des blocs intégrés ne pourront quant à eux plus être modifiés à l’aide des filtres habituels.

Toujours à titre d’exemple, on pourra citer woocommerce_blocks_product_grid_item_html qui permettaient jusque-là d’intégrer des structures HTML complexes ou d’exclure des éléments de rendu des produits Woocommerce sur les pages d’archives. L’éditeur permettant de modifier manuellement le template par défaut, ce hook ne nous est plus d’aucune utilité.

On utilisetra donc les filtres et actions Woocommerce en attendant les nouveaux développements proposés par Automatic, destinés à définitievement remplacer PHP dans le processus d’édition, ou de de dévloopper nou-mêmes les extensions, variation et autres fonctionnalitrés au gré des besoins de nos boutiques en ligne.

Voici une liste des principaux hooks PHP fonctionnels qu’il peut être pertinent de continuer à utiliser avec un template produit Woocommerce basé sur les blocs.

N.B. le rendu de l’éditeur WordPress étant exclusivement assuré par JavaScript, ces différents hooks ne seront pas visibles lors de l’édition du produit Woocommerce. Mon conseil est donc ici de ne les utiliser qu’en attendant de développer ou de trouver une extension Gutenberg pour Woocommerce permettant de replacer la logique PHP sur la page de produit.

Le filtre woocommerce_breadcrumb_default trouvera son utilité pour modifier l’enveloppe HTML ainsi que les éléments affichés au sein du fil d’Ariane : le breadcrumb de Woocommerce.

Nous pourrons modifier ici l’ancre du lien pointant vers l’accueil de notre site e-commerce, les délimiteurs ou encore l’enveloppe de cette barre de navigation afin qu’elle puisse s’intégrer aux spécifications de notre charte graphique.

L’action woocommerce_product_tabs permet d‘ajouter un onglet au tableau des détails du produit afin d’y intégrer des informations complémentaires ou autres médias (plan, vidéo, guide utilisateur, etc.)

L’action woocommerce_before_add_to_cart_form permet d’intégrer des champs de saisie complémentaires au-dessus du bout d’ajout au panier de la page de produit Woocoommerce. Cette action Woocommerce sera utilisée en l’attente d’un développement ou d’un plugin Woocoommerce complémentaire.

woocommerce_after_single_product_summary est une action ciblant la zone géographique de ce template Woocommerce suivant immédiatement le tableau des détails du produit.

Une zone dédiée au partage social est quant à elle accessible via le hook woocommerce_share.  Là encore, nombre d’extensions existantes vous permettront d’intégrer facilement un bloc de barre de réseaux sociaux à votre page produit.

Les deux actions woocommerce_product_meta_start et woocommerce_product_meta_end ciblent 2 zones géographiques englobant le bloc woocommerc/product-meta. Il conviendra donc parfaitement tant pour y ajouter dynamiquement du contenu que pour envelopper les métadonnées du produit avec une balise <div> de stylisation.

add_action( 'woocommerce_product_meta_start', [ $this, 'cdw_woo_after_single_product_metastart' ], 50 );

add_action( 'woocommerce_product_meta_end', [ $this, 'cdw_woo_after_single_product_metaend' ], 50 );

public function cdw_woo_after_single_product_metastart(){
    echo '<div style="padding: 1.5em; background: #f8c32155">';
}

public function cdw_woo_after_single_product_metaend(){
    echo '</div>';
}

Les deux actions woocommerce_before_single_variation et woocommerce_single_variation permettent d’intégrer du contenu respectivement au début et à la fin d’une balise enveloppante <div class= « single_variation_wrap »></div>. Il sera donc possible d’y intégrer des éléments de structure complémentaire ou des contenus dynamiques en fonction de la variation affichée.

À titre d’exemple, nous pouvons utiliser woocommerce_before_single_variation pour intégrer une nouvelle enveloppe interne et afficher une mini galerie supplémentaire en fonction de la variation de produit choisie. woocommerce_before_single_variation nous permet ici de fermer la balise ajoutée :

add_action( 'woocommerce_before_single_variation', [ $this, 'cdw_woo_after_single_product_single_variation' ], 50 );

public function cdw_woo_after_single_product_single_variation(){
    global $product;
    /**
     * Définir ici votre logique conditionnelle
     */
    echo '<div style="padding:2em; border: 5px solid #dadbcf;border-radius: 8px;">’;
    echo '<div style="display: grid; grid-template-columns: repeat(3, 1fr);gap: 2.5%;">';
    for($i=0; $i < 3; $i++){
        // Récupérer ici les métadonnées liées à une mini-galerie supplémentaire
        echo '<img src="https://placehold.co/300x300" style="max-width:100%;"/>';
    }
    echo '</div>';
}

public function cdw_woo_after_single_product_single_variation(){
    echo '</div>';
}

Cette liste des hooks Woocommerce n’est bien évidemment pas exhaustive et il faudra systématiquement rechercher la solution la plus simple et la plus pérenne pour répondre au cahier des charges fixé.

Développement de blocs d’éditions propres à votre boutique Woowommerce

L’écosystème WordPress et la plateforme Woocommerce reposent tous deux sur un développement Open Source exposant largement les API permettant de développer toute sorte de blocs d’édition et d’outils supplémentaires.

Si le choix des extensions proposées pour Woocommerce compte aujourd’hui parmi les plus larges du marcher, il reste parfois nécessaire d’examiner la possibilité de faire développer un bloc d’intégration ou une fonctionnalité sur mesure, répondant à un besoin de personnalisation spécifique à votre activité, et pour lequel la maintenance restera moins onéreuse que l’achat de licence sur plusieurs années.

Les questions à prendre en compte pour envisager un tel développement devront alors comprendre :

• Le tarif proposé par le développeur ou l’agence web en charge du projet
• La pertinence d’un développement sur l’environnement dit « classique » de Woocommerce
• La faisabilité d’un développement exclusif sur Gutenberg et React
• Les coûts d’une maintenance évolutive du module.

Le choix des plugins WordPress pour l’intégration de blocs de fonctionnalités Woocommerce

La liste des blocs d’éditions Woocommerce disponibles a beau être déjà assez longue, vous serez certainement tentés de rechercher des extensions tierce partie vous permettant de répondre rapidement à des besoins de personnalisation plus spécifiques de la page de produit Woocommerce. Mais si certains éditeurs du marché bénéficient d’une bonne réputation, les développements proposés – y compris pour les plugins vendus sur le marketplace de Woocommerce – sont loin d’être toujours à la hauteur…

N’hésitez donc à faire réaliser votre devis par un développeur spécialiser Woocommerce afin d’évaluer la pertinence d’un achat de plugin, d’un développement sur mesure ou d’une création de site e-commerce par un prestataire free-lance. Vous pourriez bien au final économiser beaucoup d’argent !

Amusez-vous bien !