{"id":77501,"date":"2024-07-17T09:15:12","date_gmt":"2024-07-17T08:15:12","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=77501&preview=true&preview_id=77501"},"modified":"2024-07-22T13:27:07","modified_gmt":"2024-07-22T12:27:07","slug":"codes-courts-woocommerce","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/codes-courts-woocommerce\/","title":{"rendered":"Guide complet des codes courts WooCommerce"},"content":{"rendered":"

WooCommerce<\/a> est la principale extension de commerce \u00e9lectronique<\/a> pour WordPress, permettant \u00e0 des millions d’entreprises de transformer leurs sites web en boutiques en ligne robustes. Cependant, de nombreuses personnes ignorent l’existence de ses codes courts<\/a>.<\/p>\n

Ce guide explique tout ce que vous devez savoir sur les codes courts de WooCommerce, des codes courts essentiels qui affichent les produits et g\u00e8rent les paniers aux personnalisations avanc\u00e9es pour des exp\u00e9riences utilisateur sur mesure.<\/p>\n

Voyons comment ces petits bouts de code peuvent avoir un impact significatif sur votre site de commerce \u00e9lectronique<\/a>.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Que sont les codes courts ?<\/h2>\n

Les codes courts ont \u00e9t\u00e9 introduits dans WordPress 2.5 en 2008<\/a>. Il s’agit de petits morceaux de code plac\u00e9s entre crochets, comme par exemple : [shortcode]<\/code>. Ils agissent comme des espaces r\u00e9serv\u00e9s qui indiquent \u00e0 WordPress d’ex\u00e9cuter une fonction sp\u00e9cifique ou d’afficher un certain contenu de mani\u00e8re dynamique.<\/p>\n

Par exemple, au lieu de coder manuellement une grille de produits complexe, vous pouvez utiliser un code court pour la cr\u00e9er et l’afficher instantan\u00e9ment sur votre site web. Cela permet de gagner du temps et de r\u00e9duire le risque d’erreurs, ce qui facilite la maintenance et la mise \u00e0 jour de votre site.<\/p>\n

Au fil des ann\u00e9es, les codes courts ont \u00e9volu\u00e9, devenant plus puissants et plus polyvalents. WooCommerce tire parti de cette caract\u00e9ristique, en proposant une gamme de codes courts sp\u00e9cifiquement adapt\u00e9s aux fonctionnalit\u00e9s du commerce \u00e9lectronique.<\/p>\n

D\u00e9buter avec les codes courts de WooCommerce<\/h2>\n

Pour utiliser les codes courts WooCommerce sur votre site WordPress, assurez-vous que l’extension WooCommerce<\/a> est install\u00e9e et activ\u00e9e.<\/p>\n

Pour cela, connectez-vous \u00e0 votre tableau de bord WordPress, naviguez vers Extensions<\/strong> > Ajouter<\/strong>, et recherchez \u00ab WooCommerce \u00bb Ensuite, cliquez sur Installer maintenant<\/strong> sur l’extension WooCommerce et activez-la<\/strong>.<\/p>\n

Enfin, vous pouvez suivre l’assistant d’installation de WooCommerce pour configurer les r\u00e9glages de base tels que les d\u00e9tails de la boutique, les moyens de paiement et les options d’exp\u00e9dition.<\/p>\n

Lorsque vous installez l’extension WooCommerce, votre site WordPress est automatiquement mis \u00e0 jour avec les pages Panier<\/strong>, Commande<\/strong> et Mon compte<\/strong>. Cependant, vous pouvez faire plus avec vos produits, et c’est ce que nous allons explorer avec les codes courts.<\/p>\n

La syntaxe de base des codes courts<\/h3>\n

Les codes courts de WooCommerce incluent souvent des attributs suppl\u00e9mentaires pour personnaliser leur sortie. Voici la structure de base :<\/p>\n

[shortcode attribute1=\"value1\" attribute2=\"value2\"]<\/code><\/pre>\n
Par exemple, le code court [products limit=\"4\" columns=\"2\"]<\/code> affiche quatre produits sur deux colonnes.<\/p>\n
Comment ajouter des codes courts dans les articles, les pages et les widgets ?<\/h3>\n
Les codes courts peuvent \u00eatre ajout\u00e9s presque partout dans WordPress. Vous pouvez les ajouter \u00e0 un article ou \u00e0 une page en les saisisant ou en les collant simplement dans n’importe quel \u00e9diteur de texte<\/a> de WordPress ou dans un bloc de code court si vous utilisez Gutenberg<\/a> ou n’importe quel constructeur de pages<\/a>.<\/p>\n
Pour ce guide, nous allons utiliser Gutenberg :<\/p>\n
    \n
  1. Naviguez vers les articles<\/strong> ou les pages<\/strong> dans le tableau de bord de WordPress<\/a>.<\/li>\n
  2. Ouvrez l’article ou la\u00a0 page o\u00f9 vous souhaitez ajouter le code court.<\/li>\n
  3. Cliquez sur l’ic\u00f4ne +<\/strong> pour ajouter un nouveau bloc.\n
    \"\u00c9tapes
    \u00c9tapes pour ajouter un code court avec les blocs Gutenberg dans WordPress.<\/figcaption><\/figure><\/li>\n
  4. Recherchez et s\u00e9lectionnez le bloc Code court.<\/li>\n
  5. Collez votre code courtdans le bloc.<\/li>\n<\/ol>\n
    Par exemple, disons que vous souhaitez afficher une grille de vos derniers produits sur votre page d’accueil. En utilisant l’\u00e9diteur de blocs<\/a>, vous devez saisir le code court : [products limit=\"3\" columns=\"3\"]<\/code> et mettre \u00e0 jour<\/strong> ou publier<\/strong> votre page.<\/p>\n
    Cela cr\u00e9era une grille avec trois produits affich\u00e9s dans une colonne, offrant une mani\u00e8re dynamique et attrayante de pr\u00e9senter vos derni\u00e8res offres.<\/p>\n
    \"Affichage
    Affichage d’une grille de produits \u00e0 l’aide d’un code court dans l’\u00e9diteur de blocs de WordPress.<\/figcaption><\/figure>\n
    Vous pouvez \u00e9galement ajouter des codes courts aux widgets<\/a> en naviguant dans Apparence<\/strong> > Widgets<\/strong>. Ajoutez un widget Texte<\/strong> dans la zone de widget de votre choix (barre lat\u00e9rale, pied de page, etc.). Saisissez votre shortcode dans la zone de texte du widget et enregistrez le widget.<\/p>\n
    Raccourcis essentiels de WooCommerce<\/h2>\n
    WooCommerce fournit une vari\u00e9t\u00e9 de shortcodes qui vous permettent d’afficher des produits, de g\u00e9rer le panier d’achat<\/a> et d’am\u00e9liorer le processus de paiement.<\/p>\n
    Nous allons explorer les codes courts WooCommerce les plus essentiels, leurs attributs et des exemples d\u00e9taill\u00e9s pour vous aider \u00e0 les utiliser efficacement dans votre boutique.<\/p>\n
    Codes courts d’affichage des produits<\/h3>\n
    Le code court [products]<\/code> est l’un des codes courts WooCommerce les plus polyvalents. Il vous permet d’afficher une liste de produits en fonction de diff\u00e9rents crit\u00e8res.<\/p>\n
    Il poss\u00e8de de nombreux attributs qui vous permettent d’afficher les produits comme vous le souhaitez :<\/p>\n