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.

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

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 );

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

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

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.