Blog Web & Design

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 changer la présentation de sa boutique grâce aux options par defaut ou avec les options de personnalisation 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 :

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.

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 :

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.

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 :


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.

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à :

Dernière mise à jour le Auteur : Thomas Dufranne

Repondre

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.