Woocommerce est une extension qui permet rapidement de mettre en place une boutique en ligne sous le CMS WordPress. En France selon des études, des conférences, des statistiques, il fait partie des leader en solution d’e-commerce, je dis leader car toujours selon les études avec ses 28% de part de marché il est premier ou deuxième. Son concurrent direct, Prestashop, est quant à lui un CMS fait pour le e-commerce.

En 2016 en France, l’e-commerce représentait 76 milliard € de CA soit une augmentation de 14.6% par rapport à 2015. La prévision cette année est de 80 milliards…On va continuer dans les chiffres, à l’heure actuelle 36,6 millions de français achètent sur internet soit 82,7% des internautes, ça en fait du monde….

Bref tout cela pour vous dire que lorsque vous vous lancez dans le e-commerce, il vaut mieux ne pas négliger l’aspect graphique et ergonomique de votre site. Ci-dessous je vous propose un tuto afin de pouvoir personnaliser la mise en page de votre page produit. Woocommerce est bien fait car il met à disposition des hooks, c’est grâce aux différents hooks que nous allons pouvoir jouer avec la mise en page de notre page produit.

Voici la liste des hooks disponible sur la page produits :

  • woocommerce_before_single_product
  • woocommerce_before_single_product_summary
  • woocommerce_single_product_summary
  • woocommerce_before_add_to_cart_form
  • woocommerce_before_variations_form
  • woocommerce_product_thumbnails (ne fonctionne plus avec la dernière version de Woocommerce 3.0)
  • woocommerce_before_add_to_cart_button
  • woocommerce_before_single_variation
  • woocommerce_single_variation
  • woocommerce_after_single_variation
  • woocommerce_after_add_to_cart_button
  • woocommerce_after_variations_form
  • woocommerce_after_add_to_cart_form
  • woocommerce_product_meta_start
  • woocommerce_product_meta_end
  • woocommerce_share
  • woocommerce_after_single_product_summary
  • woocommerce_after_single_product

Vous vous dites super, il y a pleins de hooks mais qu’est ce que j’en fait?!
Voici un petit visuel qui correspond à l’emplacement de chaque hooks dans la page produit.

Squelette d'une page produit woocommerce

Explications

Par exemple, Woocommerce appelle la fonction woocommerce_single_product_summary dans le fichier content-single-product.php. Les hooks appelés dans cette fonction sont :

@hooked woocommerce_template_single_title - 5
@hooked woocommerce_template_single_title - 5 
@hooked woocommerce_template_single_rating - 10 
@hooked woocommerce_template_single_excerpt - 20 
@hooked woocommerce_template_single_price - 20 
@hooked woocommerce_template_single_add_to_cart - 30 
@hooked woocommerce_template_single_meta - 40 
@hooked woocommerce_template_single_sharing - 50
hook dans la fonction woocommerce_single_product_summary

Vous pouvez tout à fait garder le nom des fonctions de woocommerce et les copier/coller dans votre function.php puis les modifier, mais perso je préfère créer de nouvelle fonction que je retiendrai plus facilement dans le cas où je devrais revenir sur le développement plusieurs mois après.

Après ce petit explicatif de Woocommerce, la liste des hooks de la page produit, je vais enfin aborder la partie « technique » de cet article. Pour personnaliser notre page de produit, dans un premier temps, il vous faudra créer un dossier Woocommerce dans votre thème. Dans ce dossier vous y mettrez tous les fichiers que vous allez modifier de Woocommerce. Cette manipulation vous évitera de perdre toutes vos modifications à la prochaine MàJ de Woocommerce… Une fois cette première étape faite, il va nous falloir créer un hook afin que WordPress exécute notre action. Pour cela, nous allons dans notre fichier function.php créer ces lignes de code :

// création du hook dar_content_single_products
add_action( 'dar_content_single_products', 'woocommerce_template_single_title', 5 );
add_action( 'dar_content_single_products', 'woocommerce_template_single_rating', 10 );
add_action( 'dar_content_single_products', 'woocommerce_template_single_excerpt', 20 );
add_action( 'dar_content_single_products', 'woocommerce_template_single_meta', 40 );
hook dar_content_single_products

Prenons pour exemple la première ligne de code dans ma fonction :

add_action('woocommerce_template_single_title', 'dar_content_single_products', 5 );
explication du add_action

Le ‘dar_content_single_products’ correspond au nom de ma fonction que WordPress va exécuter lors de l’appel de celle-ci. Vous pouvez lui donner le nom que vous souhaitez, au Studio Darman afin de standardiser nos développements nous nommons toutes nos fonctions comme suit : dar_nomdemafonction.

Vous pouvez ainsi personnaliser selon vos besoins cette single-products.php. Voici un exemple de réalisation d’une boutique pour la fédération française de baseball : https://boutique.ffbs.fr

C’est la fin de ce premier tutoriel, on espère que celui-ci vous aidera dans la mise en place de vos sites sous le merveilleux CMS WordPress. N’hésitez pas à nous partager vos réalisations, vos retours, vos questions.

Jean-Baptiste

About Jean-Baptiste

Développeur au Studio Darman, j'utilise WordPress depuis 2008 et co-organise les meetup WP-Toulouse. Ici je partage mes expériences, mon métier et ma vision du web.

19 Comments

  • Fred dit :

    Chapeau bas…

  • loic Tamigney Fotsing dit :

    avec ce hooks j’ai réussi a ajouter un bouton de plus a la suite du bottons ajouter au panier . Mais comment faire pour rajouter ce bouton seulement sur certaine page produit spécifique?

  • noumea75 dit :

    Bonjour, je cherche à faire la même chose avec la page produit, ici on parle de la page produit simple …

    • Jean-Baptiste dit :

      Si tu parles de la page qui affiche tous tes produits, tu peux directement créer un template de page ou tu va personnaliser la boucle de WP et c’est cette page la que tu va définir comme page « boutique » de ta boutique. Ou sinon tu peux également modifier le template archive-products.php de woocommerce. En faisant bien attention a dupliquer ce fichier dans ton thème.

  • Cédric dit :

    ce n’est pas dans le bon ordre
    c’est add_action( ‘woocommerce_template_single_title’, ‘dar_content_single_products, 5 );
    et non
    add_action( ‘dar_content_single_products’, ‘woocommerce_template_single_title’, 5 );

  • gourmandisesdeguillaume dit :

    Salut,
    Je sèche un peu pour modifier la page « Shop » sur ma nouvelle boutique. https://gourmandisesdeguillaume.com/boutique/
    Je n’arrive pas à faire appliquer ce que je veux à cette page qui me semble être autre que celle présentée dans « Toutes les pages », « Boutique ».
    J’ai lu plein de choses sur les loops, les archivesproducts.php, ou woocoomerce.php, j’ai même tenté la traduction, mais rien n’y fait, rien ne change…
    Merci d’avance, pour ton aide

    • Jean-Baptiste dit :

      Salut, tout dépend de ce que tu souhaites faire sur ta page boutique? Dès que tu souhaites modifier un template de woocommerce, il faut que tu créer un dossier woocommerce dans ton thème, puis que tu copie/colle le fichier/template que tu souhaites modifier.
      Par exemple pour modifier ta page boutique, il te faut dans le dossier woocommerce de ton thème, le fichier archive-product.php a partir de la tu pourra personnaliser ta page comme bon te semble!

  • SyNas dit :

    Bonjour à tous,
    Je souhaite modifier la page produit, quand le client clic sur le produit a mettre je souhaite garder la meme mise en page mais impossible, y a t-il un short code a mettre sur ma page ?
    Merci par avance de vos retours.
    @+ Ludo

  • Jean-Baptiste dit :

    Salut Ludo,
    pour modifier la page produit, c’est au niveau des fichiers qui se trouve dans le dossier woocommerce single-product et dedans tu aura toutes les parties du fichier single-product.php.
    J’ai pas vraiment compris ce que tu souhaite réellement faire! N’hésite pas a expliquer plus clairement et donner le lien de ta page produit 😉

    • Ludo dit :

      bonjour,
      Pour votre retour super rapide.
      Le soucis c’est que sur ma page produit je n’ai plus la même mise en page.
      J’utilise divi builder pour construire mes pages.
      Je sais pas si je suis clair dans mes explications.
      Voici mon site test https://synas.ovh
      Merci pour votre aide

  • Jean-Baptiste dit :

    La même mise en page par rapport a quoi?
    Quand tu utilise Divi builder, en fonction de ce que tu veux, il faut que tu affiches les modules de divi, si le module ne te conviens pas faut créer un module spécifique (en react) sinon, tu n’utilises pas divi builder et tu pourras custom comme bon te semble en modifier les templates de woocommerce.

  • Jean-Baptiste dit :

    Je pense que je viens de comprendre, en faites tu souhaites que ta page produit ressemble a ta page d’archive…. mais je ne vois pas trop l’intérêt (pour le SEO c’est bon d’avoir une page produit).. Sinon au clic sur le produit, il faut que le produit s’ajoute au panier directement, tu peux faire cela en ajax

  • Bonjour
    Mon site WordPress fonctionne avec le thème DiVi et woocommerce. Mon souci actuellement est que sur mes fiches produits, je ne peux pas changer la ligne « partager sur les réseaux sociaux ». Les icones sont Twitter, Facebook et Google +. Je voudrais y inclure Pinterest. Comment puis-je faire ?
    Merci d’avance

  • Bonjour
    Merci de la réponse, j’ai effectivement pu modifier les réseaux sociaux dans le header. Mais mon problème est le suivant. Dans les fiches produits (woocommerce), j’ai au milieu de la page, un texte affiché « partager », puis les icones Twitter, facebook et Google +. C’est cette barre que je souhaite modifier, pour enlever Google+ et le remplacer par un autre (Pinterest par ex). Où se trouve le fichier (php je suppose) correspondant au contenu des fiches produits ? Impossible de le repérer.
    Merci d’avance
    PS : mon site : https://day2daygallery.fr

  • Merci beaucoup. Je vais regarder de ce côté là.
    A +

Laisser un commentaire

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