Site WooCommerce l’envers du décor

Cet article est le sujet commenté de mon atelier au WP Tech Nantes 2014. Vous pourrez également, en fin d'article, télécharger les slides de cette présentation ainsi que le code du plugin permettant d'ajouter un bouton en JS en lieu et place des liens <a> d'ajout au panier...

woocommerce-envers-decor
Si WooCommerce est de loin la solution idéale pour rajouter la fonction e-commerce à votre WordPress, il y a quelques petits éléments et optimisations à faire pour en tirer le meilleur.

Voici donc l'envers du décor d'un site WooCommerce :

 

Pourquoi choisir WooCommerce ?

C'est clairement le plugin de référence pour faire du e-commerce avec WordPress! Soutenu par WooThemes, avec pas moins de 350 extensions, WooCommerce est leader sur son segment.

LES AVANTAGES

  • Efficace, soutenu et développé
  • Réactif en cas de faille de sécurité
  • Grand choix d’extensions & add-ons
  • Nombreux thèmes disponibles
  • Enfin des solutions pour CB France

LES INCONVENIENTS

  • Besoin de payer pour des extensions ++
  • Pas de support gratuit :/
  • Primordial de rester en permanence à jour (Pbs thème/woo)

Ninja-Woo

 

WooCommerce et le SEO

Si WordPress est souvent qualifié de "SEO Friendly", il faut toutefois l’optimiser pour qu’il donne sa pleine mesure, WooCommerce n’échappe à la règle !

SEO : N’oubliez pas le noindex, follow !

Toutes les pages de votre WooCommerce ne devraient pas être indexées! Je parle principalement des pages utiles au fonctionnement de votre ecommerce mais totalement inutiles d'un point de vue SEO.

Pauvres et sans contenu, ces dernières devraient absolument être placées en "No index/Follow". C'est notamment le cas des pages suivantes:

  • mon compte
  • panier
  • déconnexion
  • confirmation/refus paiement
  • wish-list et/ou comparatif
  • etc…

page no index follow

 

SEO : Diminuez le nombre de liens et d’URLs

Gardez votre précieux jus et évitez de diluer à tout va ! Les URLs système de tri des catégories produits , le changement d’affichage, les boutons d’ajout au panier, … devraient être recodés pour utiliser à la place un <button> et déclencher l’action en JavaScript!

Sur ce point précis, vous retrouvez en fin d'article un plugin codé par @Willy que j'ai utilisé sur un site WooCommerce et qui fait le job! Attention vous ne pourrez pas l'utiliser tel quel, vous devrez l'adapter pour votre site.

liens et urls

Pour limiter et éviter de trop diluer la popularité de vos pages par pagination, vous pouvez simplement augmenter le nombre de produits affichés (20 au lieu de 10) par page (ex://monsite.com/shop/categorie-produit/page/2/).

Attention également aux add-ons tels que Whislist et/ou Compare (liste de souhaits et comparatif) qui alourdissent et rajoutent des URLs de type « /xxx-ajax.php? Action =add_to_ wishlist &add_to_wishlist=512 »

wishlist and compare

 

SEO : Plugin SEO WooCommerce by Yoast

Alors certes, il y a le plugin SEO by Yoast mais pas que ! Pensez à lui adjoindre l'excellent plugin Yoast WooCommerce SEO qui améliore sensiblement les données et l'indexation de votre WooCommerce par les moteurs en ajoutant notamment dans les SERPs:

  • l'état du stock
  • le prix
  • la marque du produit

serps woo yoast

 

SEO : Contenu et articles en rapport

Ne vous limitez pas seulement aux produits et à leurs descriptions ! N'hésitez pas à produire du contenu hors boutique et à écrire des tutos, news, FAQs et autres articles car le poids de ces derniers viendront servir vos produits.

Vous pourrez ensuite utilisez YARPP pour la gestion de vos articles en rapport et créer ainsi une vraie interaction entre vos produits et vos articles. Pour implémenter vos produits dans vos articles, vous pouvez soit modifier YARPP ou utiliser le plugin WP Related Item.

yarpp

 

La vitesse de votre WooCommerce

La vitesse de votre site est primordiale, celle de votre WooCommerce l'est tout autant. Pour faire simple, sur un hébergement mutualisé OVH avec 20 produits affichés sur la home, on obtient la note catastrophique de 58/100 via PageSpeed Insight...

Autant dire qu'il faudra faire mieux, 2 solutions s'offrent à vous, changer d'hébergement WordPress ou mettre en cache. Sur ce dernier point, il faudra vous assurer de ne jamais mettre en cache les pages suivantes :

  • panier / paiement
  • cart / checkout

page speed

 

Pour le cache c'est selon vos préférences et votre budget, de Quick Cache en passant par WPRocket, faites votre choix!

Pour une meilleure expérience utilisateur, il vous faudra également augmenter la mémoire allouée à PHP de 40 à 64 Mo, en effet WooCommerce est gourmand...

memoire php

 

Ce qui lui manque… par défaut

Si l'on peut très bien faire fonctionner WooCommerce dès son installation, très vite des fonctions vont nous manquer, comme par exemple:

  • Une gestion plus ergonomique des produits (volume, prix)
  • La gestion des import / export
  • L'édition et l'envoi de factures PDF
  • une relance des clients pour obtenir un avis
  • Proposer une liste d’attente produits en rupture
  • La gestion d'éventuels abonnements
  • Une synchronisation avec POS/ERP

import-products-woo

 

Et ce qu'il propose en extensions...

Mais WooThemes a tout prévu et il y a de nombreux plugins disponibles de 29 à 199 USD qui permettent de combler ces manques:

  • Gravity Forms : En adjonction avec Woo, il permettra d'ajouter des items à vos produits (avec calcul auto)
  • PDF Invoices : Pour générer et envoyer automatiquement des factures au format PDF à vos clients, vous pourrez également télécharger par lot ces factures pour votre comptabilité.
  • WooWaitlist : Un produit est en rupture ? Permettez à vos clients de s'inscrire sur liste d'attente et de recevoir un mail dès qu'il est de retour en stock.
  • MailPoet : En utilisant la newsletter automatique, envoyez des codes promos à des listes et périodes prédéfinies, et pourquoi pas une demande de retour d'avis sur produit?
  • Subscriptions : Le plugin by Woo qui permet de gérer les abonnements par semaine, par mois, par an avec paiement récurent. Excellent, un plugin must have!
  • Product CSV Import : Importez toute une liste de produits au format CSV en un clic. Utile si vous votre client vous transmet un catalogue de + de 100 références...
  • Smart Manager : Dès lors que vos produits commencent à être nombreux, c'est le plugin qui vous facilite la vie et la gestion, modification des stocks, des variations, des prix... Tout y est!
  • Woo Integrator : Pour coupler simplement vos CRM ou POS, un moyen de gérer, votre comptabilité, vos stocks entre boutique physique et ecommerce, etc...
  • Et la liste aurait pu continuer à s'allonger tant les plugins proposés par Woo sont nombreux...

smart manager

 

Remerciement, vidéo, slides, interview et "custom add to cart"

Je termine donc cet article tiré de mon atelier au WP Tech 2014 en remerciant les organisateurs de cet événement technique WordPress, Stéphanie, Daniel, Willy et Simon, bravo pour votre organisation et votre disponibilité:)

On commence par l'interview avec Déborah Donnier :

 

La vidéo complète de l'atelier :

 

Enfin les slides de mon atelier au WP Tech Nantes (Nov 2014) :

 

Le plugin "Custom Add to Cart" ci-dessous a été créé par @Willy et permet de supprimer les URLs en <a> d'ajout au panier sur les pages de votre WooCommerce en les remplaçant par une action Js ce qui permet de limiter la dilution de jus.

Attention : Ce code est donné à titre d'exemple et devra être adapté selon vos besoins. Il n'y aura aucun support et nous ne saurions être tenu pour responsables d'éventuels dysfonctionnements sur votre site.

<?php
/*
Plugin Name: Custom add to cart
Plugin URI: http://wabeo.fr
Description: Custom add to cart loop template
Version: 0.0.9
Author: willy bahuaud
Author URI: http://wabeo.fr
*/
add_filter( 'woocommerce_loop_add_to_cart_link', 'willy_add_to_cart_loop', 10, 2);
function willy_add_to_cart_loop( $atc, $product ) {
 if ( 'simple' == $product->product_type ) {
 return sprintf( '<form method="get" action=""><input type="hidden" value="%s" name="add-to-cart"><button type="submit" data-product_id="%s" data-product_sku="%s" data-quantity="%s" class="button %s product_type_%s willy-button-add-to-cart">%s</button></form>',
 // esc_url( $product->add_to_cart_url() ),
 esc_attr( $product->id ),
 esc_attr( $product->id ),
 esc_attr( $product->get_sku() ),
 esc_attr( isset( $quantity ) ? $quantity : 1 ),
 $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
 esc_attr( $product->product_type ),
 esc_html( $product->add_to_cart_text() )
 );
 } else {
 return $atc;
 }
}

wpformation-WooCommerce

A propos de l'auteur...

WPFormation

Fabrice Ducarme, formateur WordPress je suis éditeur, auteur et fondateur du site WP Formation.com. Conférencier lors des WordCamp Paris 2013 & 2015 ainsi qu'au WP Tech Nantes 2014, je vous propose plus de 400 articles & tutoriaux à propos de WordPress, mes trucs & astuces mais aussi des coups de gueule...

13 commentaires pertinents à ce jour ;)

  • Tony dit :
    Merci pour cet article qui enrichie les slides. Moi qui n’ai pas trop eu l’occasion de faire des sites avec WooCommerce, ça m’est grandement utile pour savoir les bases à connaître avec ce plugin.
  • WPFormation dit :
    ,
    Merci de ton retour et ravi de t’avoir rencontré à Nantes, à bientôt sur Paris ;)
  • Matt dit :
    Merci pour cet excellent article. Je regrette de ne pas être venu samedi à WP-tech.
  • WPFormation dit :
    Merci ;)
    Super event que ce WP Tech mais le WordCamp Paris à venir ne devrait pas être mal non plus!
  • Antoine dit :
    Bonjour,

    Merci pour cet article qui est très réaliste : on sent l’expérience du terrain :).

    Je soulignerais toutefois l’absence d’une possibilité de mettre en valeur les catégories qui sont en règle générale la marque d’un produit où une spécificité.

    Heureusement il est possible via un hook du thème (quand il le permet) de créer du contenu sur la page catégorie (qui n’est pas une page wordpress :) ). Cet enrichissement des catégories va ‘booster’ de manière significative le seo.

    Woocommerce est aisément interfaçable avec des systèmes comme yotpo pour gérer les avis, tradegecko pour gérer le stock et le workflow (factures etc…).

    Je dirai que woocommerce est un bon point de départ, mais pour en faire une plate-forme ecommerce viable il est nécessaire de l’agrémenter avec des plugins utiles et propres (eviter les plugins verreux de code canyon) et mettre la main dans la technique afin d’aller plus loin.

    à bientôt

    Antoine

  • Geoffrey Crofte (@geoffrey_crofte) dit :
    Hello,

    Merci pour cet article !

    Pourquoi des plugins payants sponsorisés lorsque tu as également des plugins gratuits, ou dispo sur la plateforme WooThemes ?

    Comme par exemple :

    – WooCommerce PDF Invoices & Packing Slips (https://wordpress.org/plugins/woocommerce-pdf-invoices-packing-slips/) qui propose en plus des templates (payants) de facture.

    – WooCommerce Waitlist (http://www.woothemes.com/products/woocommerce-waitlist/) payant aussi mais sur le store de WooThemes, ce qui a tendance à me rassurer sur la qualité du produit.

    À adapter selon les besoins, certes, mais personnellement j’ai souvent été très déçu par la qualité du code des Envato Markets, LA plateforme de distribution de failles de sécurité.
    Faut bien chercher sur l’extend, on trouve des choses sympas, et au moins on peut tester et contrôler le code.

    Encore merci pour le partage et bonne continuation.

  • WPFormation dit :
    Salut merci de ton retour,
    En effet, il y a plusieurs options et tes sources sont sympas. Pour le coup j’ai principalement mentionné des solutions que j’ai testé et qui m’ont donné satisfaction.

    +1 pour l’extend, qui reste mon 1er choix, encore faut-il s’y retrouver ;)

  • sboulou dit :
    Merci pour le retour sur cette conférence Woo au WPTech, je suis une adepte de Woocommerce, il y a toujours des extensions intéressantes pour répondre à différents besoins (les essentiels sont bien sûr payant), je serai curieuse de savoir quel plugin vous recommandez pour les sites bilingues mise à part WPML qui est pratique mais qui m’a tout de même causé quelques soucis avec les mises à jour WordPress… ;)) encore merci pour tous vos conseils et infos sur votre site si riche…
  • WPFormation dit :
    Polylang est une très bonne option, 100% compatible avec WooCommerce !
  • Iconum - Digital Strategy dit :
    Hello, merci beaucoup pour ce post sur Woo Commerce que je vais m’empresser d’essayer comme alternative a des solutions plus lourde tel que Prestahop
  • nicolas dit :
    Bonjour,

    J’suis fan de woocommerce depuis 2 ans environ (après avoir testé opencart et prestashop qui au final se sont révélés ne pas me convenir), j’ai 5 boutiques différentes et j’avoue être ravi des performances de woocomerce. Seul bémol : il y a de celà quelques semaines j’ai voulu me lancer dans l’achat de trafic et là gros pb pour moi : pas de page de remerciement après achat pour insérer le code de tracking (fb ou autre) résultat gros pb d’optimisation pour mes campagnes.. j’ai cherché sur le net des solutions : il existe un plugin qui semble bugger ( parfois considère que l’ajout au panier est une conversion ce qui peut entrainer de gros soucis d’opti). Don c pour l’instant sans solution fiable de tracking je me retrouve bloqué dans mon développement.
    Est ce que quelqu’un a déjà été confronté à ce problème et aurait une solution à ce soucis ?

    Merci d’avance ( et désolé que le commentaire ne soit pas directement en relation avec l’article fort bien conçu :) )

  • Slt lorque tu dis « Pauvres et sans contenu, ces dernières devraient absolument être placées en « No index/Follow ». C’est notamment le cas des pages suivantes : Panier, déconnexion…etc
    Je mettrai index/nofollow. Qd penses tu? Réponds moi par mail.
  • Non je confirme en noindex, follow!

    Je ne veux pas que google indexe mes pages : panier, mon compte, etc… Aucun intérêt et pas bon pour mon référencement!

Tweet96
Share19
Share17
Buffer78