Personnaliser le thème Astra Pro pour WooCommerce

Désactiver les réglages d’Astra pour WooCommerce

Avant tout, sachez que si vous ne voulez pas qu’Astra s’occupe de WooCommerce, si donc vous préférez gérer uniquement les options natives de WooCommerce, alors vous pouvez tout simplement désactiver la gestion de WooCommerce par Astra et Astra Pro.

Vous devez juste ajouter ce code au fichier functions.php de votre thème-enfant basé sur Astra (child theme) :

add_filter( 'astra_enable_woocommerce_integration', '__return_false' );

Personnaliser WooCommerce

Il faut d’abord activer le module WooCommerce sur la page des options d’Astra, dans l’administration de WordPress : Apparence > Options d’Astra.

Ensuite, pour configurer les paramètres de vos pages WooCommerce, allez dans l’outil de personnalisation de WordPress.

Pour cela, visiter votre site en étant connecté à l’admin, cliquez sur Personnaliser dans la barre du haut.

Vous arrivez dans le customizer, cliquez sur WooCommerce et vous obtenez un nouveau menu. Voyons-en les éléments un par un.

Notifications de la boutique

L’option Notifications de la boutique permet d’afficher un texte en bandeau sur toute la boutique, par exemple :

• un message qui informe de l’ouverture prochaine de la boutique, dans le cas d’une mise en route
• un message qui propose une offre promotionnelle
• un message qui annonce la fermeture temporaire de la boutique, pendant des vacances par exemple

Général

Cet onglet vous permet de gérer les paramètres de mise en page de votre boutique WooCommerce :

Mise en page du conteneur

Le « conteneur » désigne l’élément HTML de base qui va contenir les éléments de vos pages produit et de vos catégories de produit.

Vous avez le choix entre 3 options :

• Par défaut : prendra les mêmes réglages de conteneur que le réglage de base d’Astra
• Normale : affichera les éléments dans un conteneur centré avec des marges à gauche et à droite sur ordinateur
• Pleine largeur : le conteneur prendra toute la largeur de l’écran

Style de conteneur

Vous avez le choix entre 3 options :

• Par défaut : prendra les mêmes réglages de style de conteneur que le réglage de base d’Astra
• Ouvert : n’ajoute pas de marges et ne distingue pas la zone de texte par une couleur de fond différente
• Encadré – Tout : affiche les éléments du conteneur avec une marge et dans une couleur de fond différente du fond de la page

Mise en page de colonne latérale

Ce réglage vous permet de placer sur vos pages de catégorie produit et de produit, une barre latérale dans laquelle vous pouvez mettre des widgets (par exemple les produits les plus vendus, la liste des catégories, etc.

Vous pouvez la mettre à gauche ou à droite de la zone principale du contenu. Vous pouvez aussi n’en mettre aucune.

Ce réglage ne fonctionne que sur ordinateur car sur  mobile, la barre et la zone de contenu vont s’empiler l’une après l’autre.

Style de colonne latérale

C’est le même réglage que celui du style de conteneur, mais appliqué à la barre latérale.

Catalogue de produits

Sur un site e-commerce, par exemple quand on crée un site d’épicerie en ligne, les pages de catalogue constituent l’essentiel du site, c’est pourquoi il importe d’en soigner la mise en forme.

A titre d’exemple, vous pouvez voir les catalogues produits que j’ai placé sur mes boutiques en ligne :

• Création de boutique en ligne pour pharmacie
• Création de site Internet pour restaurant, traiteur, pizzeria, kébab
• Création de site Internet pour artiste-peintre

Affichage de la page boutique

Cette première option permet de choisir ce que la page Boutique (ou shop) de votre WooCommerce va afficher :

• soit seulement les produits
• soit les produits et les catégories produit contenues dans les catégories de premier niveau

Affichage de catégorie

Même choix que ci-dessus, mais appliqué aux pages de catégorie produit. Affichent-elles les produits ou les sous-catégories ou les deux ?

Tri par défaut des produits

Ce réglage vous laisse choisir le critère qui servira à afficher les produits dans un certain ordre :

• par nom et ordre dans la page de gestion des produits
• par « popularité« , c’est à dire par nombre d’exemplaires vendus
• par note moyenne de l’avis donné par les clients
• par prix
• par date de publication de la fiche-produit

Largeur par défaut

Soit cela reste la valeur par défaut, définie dans les réglages de conteneur du menu Global > Conteneur > WooCommerce, soit vous indiquez une valeur personnalisée en pixels.

Disposition

Soit vous placez l’image du produit en haut des éléments texte, soit vous la placez à gauche.

Colonnes de boutique

Cette page s’affiche sous forme de grille : ce réglage définit le nombre de colonnes.

Produits par page

Ce réglage définit le nombre de produits qui s’afficheront sur une page de catégorie.

Si le nombre des produits classés dans cette catégorie excède ce nombre, alors Astra va paginer cette page de catégorie.

Paginer signifie rajouter des petits numéros pour naviguer par page, par exemple si vous fixez le nombre de produits à afficher par page à 20,alors que vous avez 50 produits dans cette catégorie, Astra va afficher sur cette page de catégorie :

• les produits 1 à 20 en page 1,
• puis les produits 21 à 40 en page 2,
• puis les produits 41 à 50 en page 3.

Structure de produits de boutique

Ici on retrouve la même interface que dans les réglages du blog.

On peut donc afficher ou pas ces éléments :

• le titre du produit
• son prix
• la description courte
• les avis
• le bouton Ajouter au panier
• la catégorie

« Afficher le titre de la page » permet d’afficher, ou pas, le nom de la catégorie en haut de la page.

« Afficher le fil d’Ariane » permet d’afficher un fil d’Ariane uniquement sur les catégories ; attention si vous en avez déjà un de défini via l’outil de personnalisation.

« Afficher la barre d’outils » fait apparaitre un menu déroulant grâce auquel l’internaute client peut filtrer les produits par popularité etc.

Style produit

Cette série de réglages intuitifs gère l’apparence des fiches produits et ajoute des effets d’animation.

Bouton

Définit les marges des boutons « ajouter au panier » ou autre, quand vous avez décidé de les afficher.

Pagination

Définit :

• le mode de pagination (soit une pagination proprement dite, soit un défilement infini de la liste des produits)
• le comportement des images au survol (zoom etc)

Trigger for off-canvas sidebar

Ce réglage non traduit a son importance : il permet d’ajouter à la page un lien ou un bouton grâce auquel on fait apparaitre un menu latéral, caché par défaut, et qui va permettre de laisser l’internaute filtrer la vue des produits selon ses critères. Cela peut s’avérer pertinent et pratique dans certains cas.

Options de style

Les derniers réglages de ce menu gèrent les couleurs et les typos des éléments.

Produit seul

Ces réglages vont gérer l’affichage des pages produit (et non pas comme précédemment l’affichage des catégories produit).

On retrouve d’abord des réglages de maquette qu’on a déjà vus, puis des réglages plus spécifiques.

Disposition de la galerie

Si vous avez ajouté une galerie d’images à votre fiche produit, cette option permet de les afficher soit horizontalement en-dessous de l’image principale, soit verticalement à côté.

Largeur d’image

Ce réglage évident définit la largeur, en pourcentage, de l’image du produit par rapport à la largeur du conteneur.

Structure produit

On peut activer ou désactiver ( = afficher ou pas), et déplacer / ordonner ces informations :

• Titre (nom du produit)
• Prix
• Description courte
• Avis
• Bouton Ajouter au panier
• Metas

On peut aussi

• désactiver le fil d’Ariane (si on n’en veut pas ou s’il est déjà défini dans le menu du fil d’Ariane),
• activer l’Ajax sur le bouton Ajouter au panier (Ajax permet de laisser l’utilisateur faire l’action sans recharger la page ; si vous avez activé l’élément Panier de WooCommerce dans l’en-tête d’Astra, il se mettra à jour automatiquement sans recharger la page ; sur certains serveurs par contre la technologie Ajax pose problème)
• activer l’effet de zoom d’image

Navigation produit

Ce réglage ajoutera un bouton de navigation qui permettra de circuler entre les produits. Je ne trouve pas cette option très intéressante puisque l’utilisateur n’a aucun moyen de savoir quel produit sera affiché.

Onglet description produit

Je ne recommande pas de désactiver la description vu qu’elle constitue l’essentiel de la fiche-produit et qu’elle sera la base de l’indexation de la page par Google et les autres moteurs de recherche, donc du référencement naturel / SEO et du succès du produit.

Le réglage de Disposition horizontale / verticale change la maquette des deux onglets Description et Avis de votre fiche-produit (onglets définis par WooCommerce).

Produits similaires & vente incitative

Ce réglage vous permet d’afficher à la suite de chaque fiche-produit une petite liste, dont vous définissez le nombre et la mise en forme, de produits semblables, susceptibles d’intéresser votre clientèle.

Je recommande cette option car elle apporte un principe de navigation pertinent et apte à augmenter les ventes en faisant mieux connaitre votre offre. Si vous ne l’activez pas, votre client n’a que les menus pour naviguer de produit en produit.

Colonnes et Nombre de produits similaires

Les produits similaires vont s’afficher sous forme de grille à la suite de la description de votre produit.

Vous pouvez donc choisir le nombre de colonnes de cette grille, et le nombre maximum de produits qu’elle va afficher. N’en mettez pas trop non plus pour ne pas surcharger la page ni ralentir le chargement.

Si par exemple vous définissez 8 produits sur 4 colonnes, ils s’afficheront sur 2 rangées.

Options de style

Pour finir vous avez les habituels paramètres de style pour régler les couleurs, les tailles, les typos de chaque élément de votre page produit.

Images de produit

Largeur de l’image principale

Ce réglage définit la largeur de l’image du produit sur la page produit.

Essayez d’harmoniser non seulement la largeur mais aussi la hauteur de toutes vos images, pour un rendu plus propre.

Largeur de miniature

La largeur en question est celle des vignettes d’image produit utilisée sur les pages de catalogue / catégorie produit.

Elle est ordinairement plus petite que l’image de produit elle-même.

Recadrage de miniature

Pour améliorer le rendu sur les différentes pages produit, Astra redimensionne volontiers vos images et affiche des miniatures, plus petites et plus légères (optimisation les temps de chargement de la page).

Panier

Ces réglages permettent de :

• activer le panier moderne, une version alternative au panier de base
• mettre à jour les quantités en temps réel
• modifier le texte du bouton du panier : on peut l’appeler Achats, Mon panier, Mes produits, ou comme on veut
• activer ou désactiver les ventes croisées (pour tenter de vendre d’autres produits connexes quand certains produits sont dans le panier d’un client)

Commander

Ces options vous permettent de modifier l’apparence de la page de validation de commande de WooCommerce.

La plupart sont intuitives et se passent de commentaires.

Plusieurs réglages permettent d’afficher automatiquement sur votre page de commande des liens vers vos pages légalement obligatoires, comme les conditions de vente, la politique de confidentialité.

Pour terminer la configuration de cette page de commande il faut donc avoir écrit et publié ces pages légales.

Conclusion

Vous savez maintenant l’essentiel de ce qu’il y a à savoir sur la configuration des pages WooCommerce dans le thème Astra Pro.

Vous avez une question ? Posez-la en commentaire et je me ferai un plaisir d’y répondre.