Shortcodes Woocommerce

Publié par Fred Le

Catégorie(s): WooCommerce

WooCommerce > 2.1.x Shortcodes:

 

Afficher le panier Haut de page

Pour afficher le panier dans une page template ajouter le shortcode suivant :
[woocommerce_cart]

Afficher la page commande Haut de page

Pour afficher la page commande dans une page template ajouter le shortcode suivant :
[woocommerce_checkout]

Afficher le suivi de la commande Haut de page

Pour afficher la page commande dans une page template ajouter le shortcode suivant :
[woocommerce_order_tracking]

Afficher le compte du client Haut de page

Pour afficher le compte du client dans une page template ajouter le shortcode suivant :
[woocommerce_my_account order_count="12"]
Le client pourra consulter toutes les commandes passé vous pouvez limité le nombre de commande passé a afficher avec order_count par défaut le paramètre est 15 (-1 affiche toutes les commandes) et ils peuvent aussi modifier leurs informations. Args :
array 
     ('current_user' => '', 
     'order_count' => 
 '15')
L'argument de l'utilisateur est basé sur les fonctions get_user_by ( ) et get_current_user_id ( ).

Afficher les produits récents Haut de page

Pour afficher une liste de produit récent dans une page template ajouter le shortcode suivant :
[recent_products per_page="12" columns="4"]
per_page détermine le nombre de produits à afficher sur la page et columns le nombre de colonnes. Vous pouvez utilisez des arguments supplémentaires : Args :
array(
     'per_page' => '12',
      'columns' => '4',
      'orderby' => 'date',
      'order' => 'desc'
 )
orderby vous sert a déterminé quel type affichage :
  1. ID (Classement par identifiant)
  2. author (Classement par auteur.)
  3. title (Tri par titre)
  4. name (Trier par nom - slug)
  5. date (Classer par date)
  6. modified (Classement par date de dernière modification.)
  7. rand (Classement aléatoire)
  8. comment_count (Classement par nombre d'avis/commentaire)
order va classer par ordre croissant ou décroissant orderby.
  • ASC - De la plus petite à la plus hautes valeurs ascendant (1, 2, 3; a, b, c).
  • DESC - De la plus élevée des valeurs les plus bas décroissant (3, 2, 1, c, b, a).

Afficher vos produits phares (Featured products) Haut de page

Pour afficher vos produits phares dans une page template ajouter le shortcode suivant :
[featured_products per_page="12" columns="4"]
De la même façon que produits récents vous pouvez définir l'affichage, les produits phares sont basé sur les notes(rating stars).

Afficher un produit Haut de page

Pour afficher un produit dans une page ou un article par identifiant ou référence(UGS) ajouter le shortcode suivant :
[product id="49"]
[product sku="REF"]
Vous pouvez récupérer l'identifiant dans la liste de vos produits. 2015-08-22_21h14_52

Afficher plusieurs produits Haut de page

Pour afficher plusieurs produits dans une page ou un article par identifiant ou référence(UGS) ajouter le shortcode suivant :
[products ids="1, 2, 3, 4, 5"]
[products skus="REF001, REF005, REF009" orderby="date" order="desc"]
Args :
array(
      'columns' => '4',
      'orderby' => 'date',
      'order' => 'desc'
 )
orderby vous sert a déterminé quel type affichage :
  1. ID (Classement par identifiant)
  2. author (Classement par auteur.)
  3. title (Tri par titre)
  4. name (Trier par nom - slug)
  5. date (Classer par date)
  6. modified (Classement par date de dernière modification.)
  7. rand (Classement aléatoire)
  8. comment_count (Classement par nombre d'avis/commentaire)
order va classer par ordre croissant ou décroissant orderby.
  • ASC - De la plus petite à la plus hautes valeurs ascendant (1, 2, 3; a, b, c).
  • DESC - De la plus élevée des valeurs les plus bas décroissant (3, 2, 1, c, b, a).

Afficher le bouton ajouter au panier Haut de page

Pour afficher le bouton ajouter au panier dans une page ou un article par identifiant ou référence(UGS) ajouter le shortcode suivant :
[add_to_cart id="99"]
Vous pouvez personnaliser l’apparence du bouton ajouter au panier en utilisant l’argument style. Args :
array(
      'id' => '49',
      'style' => 'border:4px solid #ccc; padding: 12px;',
      'sku' => 'REF'
 )

Afficher l’url du bouton ajouter au panier Haut de page

Pour afficher l’url du bouton ajouter au panier dans une page ou un article par identifiant ou référence(UGS) ajouter le shortcode suivant :
[add_to_cart_url id="99"]
  Args :
array(
      'id' => '49',
      'sku' => 'REF'
 )

Afficher une page produit Haut de page

Pour afficher l’url du bouton ajouter au panier dans une page ou un article par identifiant ou référence(UGS) ajouter le shortcode suivant :
[product_page id="49"]
[product_page sku="REF"]

Afficher une carégorie de produits Haut de page

Pour afficher une catégorie de produits dans une page ou un article par slug (Un slug est tout simplement un identifiant nom utilisable dans les adresses url il ne comporte pas d’accent ni de majuscule.) ajouter le shortcode suivant :
[product_category category="montres"]
2015-08-23_20h20_17 Args :
array(
 'per_page' => '12',
 'columns' => '4',
 'orderby' => 'title',
 'order' => 'asc',
 'category' => 'montres'
 )
per_page : nombre de produit a afficher. columns : nombre de colone. orderby vous sert a déterminé quel type affichage :
  1. ID (Classement par identifiant)
  2. author (Classement par auteur.)
  3. title (Tri par titre)
  4. name (Trier par nom - slug)
  5. date (Classer par date)
  6. modified (Classement par date de dernière modification.)
  7. rand (Classement aléatoire)
  8. comment_count (Classement par nombre d'avis/commentaire)
order va classer par ordre croissant ou décroissant orderby.
  • ASC - De la plus petite à la plus hautes valeurs ascendant (1, 2, 3; a, b, c).
  • DESC - De la plus élevée des valeurs les plus bas décroissant (3, 2, 1, c, b, a).
category : slug de la catégorie.

Afficher un index des catégories de vos produits Haut de page

Le shortcode suivant va vous permettre d’afficher un index des catégories de vos produits. L’argument number est utilisé pour afficher le nombre de produits et l’argument ids est l’identifiant qui permet d’afficher une ou plusieurs catégories. L’argument parent permet d’afficher ou pas les sous catégories produit exemple : Vêtement (catégorie niveau 0)
  • Femmes (sous catégorie niveau 1)
[product_categories number="12" parent="0"]
  Args :
array(
      'number' => 'null',
      'orderby' => 'name',
      'order' => 'ASC',
      'columns' => '4',
      'hide_empty' => '1',
      'parent' => '',
      'ids' => ''
 )
orderby vous sert a déterminé quel type affichage :
  1. ID (Classement par identifiant)
  2. author (Classement par auteur.)
  3. title (Tri par titre)
  4. name (Trier par nom - slug)
  5. date (Classer par date)
  6. modified (Classement par date de dernière modification.)
  7. rand (Classement aléatoire)
  8. comment_count (Classement par nombre d'avis/commentaire)
order va classer par ordre croissant ou décroissant orderby.
  • ASC - De la plus petite à la plus hautes valeurs ascendant (1, 2, 3; a, b, c).
  • DESC - De la plus élevée des valeurs les plus bas décroissant (3, 2, 1, c, b, a).

Afficher les produits en vente Haut de page

Se shortcode vous permet d’afficher les produits en vente sur votre site :
[sale_products per_page="12"]
  Args :
array(
     'per_page' => '12',
     'columns' => '4',
     'orderby' => 'title',
     'order' => 'asc'
 )
per_page : nombre de produit a afficher. columns : nombre de colone. orderby vous sert a déterminé quel type affichage :
  1. ID (Classement par identifiant)
  2. author (Classement par auteur.)
  3. title (Tri par titre)
  4. name (Trier par nom - slug)
  5. date (Classer par date)
  6. modified (Classement par date de dernière modification.)
  7. rand (Classement aléatoire)
  8. comment_count (Classement par nombre d'avis/commentaire)
order va classer par ordre croissant ou décroissant orderby.
  • ASC - De la plus petite à la plus hautes valeurs ascendant (1, 2, 3; a, b, c).
  • DESC - De la plus élevée des valeurs les plus bas décroissant (3, 2, 1, c, b, a).

Afficher les meilleures ventes de produits Haut de page

Pour afficher vos produits dans une page template ajouter le shortcode suivant :
[best_selling_products per_page="12"]
  Args :
array(
     'per_page' => '12',
     'columns' => '4'
 )
per_page : nombre de produit a afficher. columns : nombre de colone.

Afficher les produits les mieux notés Haut de page

Pour afficher les produits les mieux notés dans une page template ajouter le shortcode suivant :
[top_rated_products per_page="12"]
  Args :
array(
     'per_page' => '12',
     'columns' => '4',
     'orderby' => 'title',
     'order' => 'asc'
 )
per_page : nombre de produit a afficher. columns : nombre de colone. orderby vous sert a déterminé quel type affichage :
  1. ID (Classement par identifiant)
  2. author (Classement par auteur.)
  3. title (Tri par titre)
  4. name (Trier par nom - slug)
  5. date (Classer par date)
  6. modified (Classement par date de dernière modification.)
  7. rand (Classement aléatoire)
  8. comment_count (Classement par nombre d'avis/commentaire)
order va classer par ordre croissant ou décroissant orderby.
  • ASC - De la plus petite à la plus hautes valeurs ascendant (1, 2, 3; a, b, c).
  • DESC - De la plus élevée des valeurs les plus bas décroissant (3, 2, 1, c, b, a).

Afficher les produits par attributs Haut de page

Pour afficher les produits les mieux notés dans une page template ajouter le shortcode suivant :
[product_attribute attribute='couleur' filter='rouge']
  Args :
array(
     'per_page' => '12',
     'columns' => '4',
     'orderby' => 'title',
     'order' => 'asc',
     'attribute' => '',
     'filter' => ''
 )
per_page : nombre de produit a afficher. columns : nombre de colone. orderby vous sert a déterminé quel type affichage :
  1. ID (Classement par identifiant)
  2. author (Classement par auteur.)
  3. title (Tri par titre)
  4. name (Trier par nom - slug)
  5. date (Classer par date)
  6. modified (Classement par date de dernière modification.)
  7. rand (Classement aléatoire)
  8. comment_count (Classement par nombre d'avis/commentaire)
order va classer par ordre croissant ou décroissant orderby.
  • ASC - De la plus petite à la plus hautes valeurs ascendant (1, 2, 3; a, b, c).
  • DESC - De la plus élevée des valeurs les plus bas décroissant (3, 2, 1, c, b, a).

Afficher des produits liés Haut de page

Pour afficher des produits une page template ajouter le shortcode suivant :
[related_products per_page="12"]
  Args :
array(
     'per_page' => '12',
     'columns' => '4',
     'orderby' => 'title'
 )
per_page : nombre de produit a afficher. columns : nombre de colone. orderby vous sert a déterminé quel type affichage :
  1. ID (Classement par identifiant)
  2. author (Classement par auteur.)
  3. title (Tri par titre)
  4. name (Trier par nom - slug)
  5. date (Classer par date)
  6. modified (Classement par date de dernière modification.)
  7. rand (Classement aléatoire)
  8. comment_count (Classement par nombre d'avis/commentaire)
 

Mots clés: ,





26 Commenataires pour :

“Shortcodes Woocommerce”

  1. Jerome GOEFFROY dit :

    Bonjour,
    En fait, je n’ai pas de commentaire, mais plutôt une question :
    J’utilise le shortcode recent product qui fonctionne très bien, cependant, j’aurai besoin de rajouter les descriptions courtes de chaque produit.
    Je pense qu’il faut modifier le fichier class-wc-shortcodes.php, mais je ne sais pas comment le faire? auriez vous une petite idée?
    Merci pour votre aide, car je galère…

  2. Jerome GOEFFROY dit :

    Concernant ma question, j’ai fini par trouver la solution. Ce n’était pas dans le shortcode qu’il fallait chercher, mais dans le fichier functions.php où il faut rajouter ces lignes de codes à la fin :

    add_action( 'woocommerce_after_shop_loop_item', 'prima_custom_shop_item', 5);
    function prima_custom_shop_item() {
    	global $post, $product;
    	/* product excerpt */
    	if ( $post->post_excerpt ) {
    		echo apply_filters( 'woocommerce_short_description', $post->post_excerpt );
    	}
    

    Si ca peut aider quelqu’un…

  3. Régis dit :

    Bonjour,

    J’ai intégré le short code afficher le compte client mais j’ai un soucis lorsque l’on clique sur « voir », la commande concernée ne s’affiche pas.
    je voudrais savoir si le client peut réutiliser une ancienne commande afin de ne pas recommencer systématiquement la saisie quand il prend régulièrement le même produit.

    Merci de votre retour.

    Cordialement

    Régis

    • Fred dit :

      Bonjour Régis,
      Oui votre client peu réutiliser une ancienne commande pour commander le même produit, par contre pour voir la commande a partir de compte client vérifier si les paramètres sont correcte dans Woocommerce – Paramètres – Compte – Paramètre mon compte : vérifier les paramètres URL si ils sont correctes WooCommerce Endpoints

      Fred

  4. Victor dit :

    Bonjour, j’aimerais savoir si il est possible sur woocommerce de modifier le formulaire lors de la commande (short code [woocommerce_checkout]), par exemple faire en sorte que certaines données ne soient pas demandées, et d’autres, ne soient pas obligatoires? De plus est-il possible de personnaliser la présentation?
    (J’utilise « Formidable » pour les formulaires de contact, et je souhaiterais que la présentation soit identique)

    Autre question, est-il possible d’inscrire automatiquement les clients dans une mailing list? Si possible avec « Mailpoet »?

    D’avance merci pour les réponses que vous pourrez m’apporter.

    Victor.

    • Fred dit :

      Bonjour Victor,
      Désoler de vous répondre si tardivement j’étais pris par mon travail, pour votre première question de modifier les données du formulaire j’ai fait un petit article sur le sujet : Désactiver des champs dans la page commande
      Et pour changer l’apparence du formulaire il faut que vous repreniez le code css du plugin Woocommerce créer une feuille de style dans votre thème WordPress puis ajouter le code css et modifier le en fonction de vos besoins. Pour créer une mailing list avec Mailpoet et woocommerce vous avez le plugin MailPoet WooCommerce Add-on.

      Fred

  5. Victor dit :

    Bonjour Fred,

    Merci pour vos réponses qui me sont très utiles, j’ai commencé à regarder (je ne maîtrise pas encore très bien, je fais ça à mon rythme), j’ai encore une autre question: sur mon site je ne vais vendre qu’un logiciel, par conséquent, est-il possible de sauter la page « panier »? De fait elle ne présente pas un grand intérêt dans mon projet.

    D’avance merci.

    Victor

    • Fred dit :

      Bonsoir Victor,
      Pour sauter la page panier il suffit d’ajouter le code suivant dans le fichier function.php de votre thème, et vos clients seront rediriger directement sur la page commande.

      add_filter ('add_to_cart_redirect', 'redirect_to_checkout');
      
      function redirect_to_checkout() {
      global $woocommerce;
      $checkout_url = $woocommerce->cart->get_checkout_url();
      return $checkout_url;
      }
      

      Fred

  6. caso dit :

    bonjour le shortcode afficher categorie ne fontionne pas chez moi
    [product_category category= »identifiant de la categorie »]
    j’ai woocommerce 2.3.9

    • Fred dit :

      Bonjour Caso,
      Déjà vérifier vos permaliens (%postname%) si vous avez bien le nom de la catégorie qui apparait dans l’adresse url et essayer comme ca :

      [product_category category="identifiant-name" per_page="8"]
      

      Fred

  7. Eric dit :

    Bonjour à tout le monde.

    Je suis en cours de création d’une boutique en ligne, la page d’accueil affichant les catégories de produits. Mon petit soucis vient du fait que cette page n’affiche que 3 colonnes laissant un grand vide à droite de ma page. Je souhaiterai afficher 4 colonnes. Pouvez-vous m’indiquer comment faire ? Je vous en remercie par avance.
    CMS WordPress 4.4.2
    Woo-commerce 2.5.5
    Thème Kallyas

    • Fred dit :

      Bonsoir Eric,
      Pour changer le nombre de colone vous pouvez appliqué un filtre, ajouter le code suivant dans le fichier function.php du thème :

      add_filter( 'loop_shop_columns', 'wc_loop_shop_columns', 1, 10 );
      /*
        return initialise le nouveau nombre de colonnes
       */
      function wc_loop_shop_columns( $number_columns ) {
      	return 2;
      }
      
  8. Victor dit :

    Bonjour Fred,

    Merci pour toutes vos réponses qui m’ont été très utiles.

    Mon site est terminé.

    Cordialement.

    victor

  9. Philippe dit :

    Bonjour j’ai installé le code [recent_products per_page= »5″ columns= »1″ orderby= « rand »] dans une widget/sidebar (code html) mais j’aimerais ne pas afficher : NI le titre, NI le prix et NI ajouter au panier svp ? Juste garder l’image du produit avec le lien actif qui renvoie vers la fiche produit… Merci pour votre aide, bonne soirée (j’utilise dernière version)

    • Fred dit :

      Bonjour Philippe, désoler de vous répondre si tardivement, vous pouvez utilisé le code css en indiquant l’identifiant de votre sidebar (dans exemple #sidebar) :

      /* Titre */
      #sidebar .woocommerce ul.products li.product h3 {
      	display:none;
      }
      
      /* Prix */
      #sidebar .woocommerce ul.products li.product .price {
      	
      	display:none;
      }
      
      /* Bouton ajouter au panier */
      #sidebar .woocommerce ul.products li.product .button  {
      	
      	display:none;
      }
      

      A ajouter dans le fichier styles.css de votre thème.

  10. Julien dit :

    Bonjour, J’aimerais savoir comment ajouter mes produits au grammage. Par exemple que le client puisse commander 600 grammes de flocons d’avoine ou 1kg6 de tomates.

    Merci

  11. antoine dit :

    Bonjour,
    merci pour toutes ces infos très intéressantes.
    Je recherche une fonction pour trier les produits par ordre alphabétique dans la page commande, panier et sur le mai envoyé au client.
    avez-vous une solution pour moi
    merci

  12. Pamela dit :

    Bonjour,sur ma page d’accueil j’ai un aperçus de 4 produits, ceux les mieux vendus, mais il n’y a que le titre d’affiché, j’aimerai savoir comment afficher le prix des produits.
    merci d’avance 🙂

  13. Thierry Beau dit :

    J’ai une question. Je me permet de la ici car je cherche depuis DES jours comment empêcher un CSS de modifier la taille des images produits aussi bien sur la page ou tous les produits apparaissent et sur la fiche produit (1 produit). D’avance merci. Theme utilise e-shop.
    Cordialement – Thierry

    • Fred dit :

      Bonjour Thierry, il faut forcer le code css comme ceci :
      dans le cas du thème e-shop

      div.product div.images a img, .content div.product div.images a img, ul.products li.product a img {
      	width:300px !important;
      	height:300px !important;
      }
      

      !important permet de spécifier que la propriété est la plus importante que la feuille css de base, il faut ajouter le code dans la feuille styles.css du thème.

      alors que par défaut le code est comme ca :

      div.product div.images a img, .content div.product div.images a img, ul.products li.product a img {
          background-color: #fff;
          border: 1px solid #eaeaea;
          display: block;
          height: auto; <----hauteur
          width: 100%; <--- Largeur
          padding: 7px;
          margin-bottom: 0.5em;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          -webkit-transition: all .3s ease-out;
          -moz-transition: all .3s ease-out;
          -ms-transition: all .3s ease-out;
          -o-transition: all .3s ease-out;
          transition: all .3s ease-out;
      }
      

      Reprenez seulement le code que vous voulez modifier, inutile de tout recopier.

  14. Thierry Beau dit :

    Millions mercis. Cela fonctionne pour la page catégorie qui montre les produits d’une catégories, MAIS ne fonctionne pas pour la page qui montre un seul produit, après la sélection d’un produit sur la page des produits d’une catégorie. Une aide supplémentaire est plusque la bienvenue. Cordialement – Thierry

    • Fred dit :

      Même chose sauf que c’est pas les mêmes class :

      div.product div.images, .content div.product div.images  {
      	width:300px !important;
      	height:300px !important;
      }
      

      Code de référence :

      div.product div.images, .content div.product div.images {
          float: left;
          width: 48%;
          margin-bottom: 2em;
      }
      

      Voila 😉

  15. John dit :

    Je me sert de cette page comme référence wordpress francophone ! Merci pour les traductions. J’ai vu également que beaucoup de personnes comme moi avaient des problèmes pour personnaliser le css (surtout si on en comprend rien au code!) Alors coté personnalisation du design d’un site, si on est débutant coté code, je conseil très fortement le plugin « Visual CSS Style Editor ».

    Il permet de personnaliser toutes les pages par simple clique avec aperçu en temps réel !!! couleur de fond, rotation des textes, effet animé sur les textes genre top pour les textes promo, solde etc… les marges, la disposition, la position…avec application sur le css de toutes les pages ou simplement sur une page. bref il est très complet ce plugin. Je partage car j’aurais été content de trouver ce plugin il y a 3 ans cela m’aurais éviter des 100ène d’heure de recherche de comment on aligne une info à gauche ou à droite sans même avoir l’idée de faire d’autres effets plus complexe 🙂

  16. Sébastien dit :

    Merci pour cette liste de shortcodes, c’est de la bombe !!! Juste ce qu’il faut !! J’adore Woocommerce, c’est de la bombe, je me demande comment je l’ai pas adopté plus tôt. Dire que j’utilisais EDD avant…

Laisser un commentaire

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Pour affiché du code HTML, CSS, PHP, JAVASCRIPT utilisé le marqueur : [code][/code]