WooCommerce Docs

WooCommerce est livré avec plusieurs shortcodes qui peuvent être utilisés pour insérer du contenu à l’intérieur des posts et des pages.

Comment utiliser les shortcodes Retour au début

Où les utiliser Retour au début

Les shortcodes peuvent être utilisés sur les pages et les articles dans WordPress. Si vous utilisez l’éditeur de bloc, il y a un bloc de shortcode que vous pouvez utiliser pour y coller le shortcode.

Si vous utilisez l’éditeur classique, vous pouvez coller le shortcode sur la page ou l’article.

Args (ou Arguments) Retour au début

Plusieurs des shortcodes ci-dessous mentionneront des « Args ». Ce sont des moyens de rendre le shortcode plus spécifique. Par exemple, en ajoutant id="99" au shortcode , il créera un bouton d’ajout au panier pour le produit ayant l’ID 99.

Codes courts de page

WooCommerce ne peut pas fonctionner correctement sans que les trois premiers shortcodes soient quelque part sur votre site.

– affiche la page du panier
– affiche la page de la caisse
– affiche la page du compte utilisateur
– affiche le formulaire de suivi des commandes

Dans la plupart des cas, ces shortcodes seront ajoutés aux pages automatiquement via notre assistant d’onboarding et n’ont pas besoin d’être utilisés manuellement.

Cart Retour en haut de page

Utilisé sur la page du panier, le shortcode du panier affiche le contenu du panier et l’interface pour les codes de coupon et autres morceaux du panier.

Args : none

Checkout Back to top

Utilisé sur la page du checkout, le shortcode du checkout affiche le processus de paiement.

Args : none

Mon compte Back to top

Affiche la section ‘mon compte’ où le client peut voir ses commandes passées et mettre à jour ses informations. Vous pouvez spécifier le nombre de commandes à afficher. Par défaut, il est défini à 15 (utilisez -1 pour afficher toutes les commandes.)

Argues:

array( 'current_user' => '' )

Formulaire de suivi de commande Retour en haut

Permet à un utilisateur de voir le statut d’une commande en entrant les détails de sa commande.

Args : none

Produits Retour en haut

Le shortcode est l’un de nos shortcodes les plus robustes, qui peut remplacer diverses autres chaînes utilisées dans les versions antérieures de WooCommerce.

Le shortcode vous permet d’afficher les produits par ID de poste, SKU, catégories, attributs, avec un support pour la pagination, le tri aléatoire et les balises de produit, remplaçant le besoin de multiples shortcodes tels que , , , , et , qui sont nécessaires dans les versions de WooCommerce inférieures à 3.2. Passez en revue les exemples ci-dessous.

Attributs de produit disponibles Retour au début

Les attributs suivants sont disponibles pour être utilisés en conjonction avec le shortcode . Ils ont été divisés en sections de fonction primaire pour faciliter la navigation, avec des exemples ci-dessous.

Affichage des attributs de produit

• limit – Le nombre de produits à afficher. Par défaut, et -1 (afficher tout) lors de la liste des produits, et -1 (afficher tout) pour les catégories.
• columns – Le nombre de colonnes à afficher. La valeur par défaut est 4.
• paginate – Active la pagination. À utiliser en conjonction avec limit. Par défaut, false défini à true pour paginer .
• orderby – Trie les produits affichés par l’option saisie. Une ou plusieurs options peuvent être passées en ajoutant les deux slugs avec un espace entre eux. Les options disponibles sont :
  • date – La date à laquelle le produit a été publié.
  • id – L’ID de poste du produit.
  • menu_order – L’ordre du menu, s’il est défini (les nombres inférieurs s’affichent en premier).
  • popularity – Le nombre d’achats.
  • rand – Ordonner aléatoirement les produits au chargement de la page (peut ne pas fonctionner avec les sites qui utilisent la mise en cache, car cela pourrait enregistrer un ordre spécifique).
  • rating – L’évaluation moyenne du produit.
  • title – Le titre du produit. Il s’agit du mode orderby par défaut.
• skus – Liste séparée par des virgules des UGS des produits.
• category – Liste séparée par des virgules des limbes de catégories.
• tag – Liste séparée par des virgules des limbes de balises.
• order – Indique si l’ordre des produits est ascendant (ASC) ou descendant (DESC), en utilisant la méthode définie dans orderby. La valeur par défaut est ASC.
• class – Ajoute une classe de wrapper HTML afin que vous puissiez modifier la sortie spécifique avec des CSS personnalisés.
• on_sale – Récupère les produits en vente. Ne doit pas être utilisé en conjonction avec best_sellingou top_rated.
• best_selling – Récupère les produits les plus vendus. Ne pas utiliser conjointement avec on_sale ou top_rated.
• top_rated – Récupérer les produits les mieux notés. Ne doit pas être utilisé conjointement avec on_saleou best_selling.

Contenu Attributs de produits

• attribute – Récupère les produits utilisant le slug d’attribut spécifié.
• terms – Liste de termes d’attributs séparés par des virgules à utiliser avec attribute.
• terms_operator – Opérateur pour comparer les termes d’attributs. Les options disponibles sont :
  • AND – Affichera les produits de tous les attributs choisis.
  • IN – Affichera les produits avec l’attribut choisi. C’est la valeur par défaut terms_operator.
  • NOT IN – Affichera les produits qui ne sont pas dans les attributs choisis.
• tag_operator – Opérateur pour comparer les balises. Les options disponibles sont :
  • AND – Affichera les produits de toutes les balises choisies.
  • IN – Affichera les produits avec les balises choisies. C’est la valeur par défaut tag_operator.
  • NOT IN – Affichera les produits qui ne sont pas dans les balises choisies.
• visibility – Affichera les produits en fonction de la visibilité sélectionnée. Les options disponibles sont :
  • visible – Produits visibles sur la boutique et les résultats de recherche. C’est l’option visibility par défaut.
  • catalog – Produits visibles sur la boutique uniquement, mais pas dans les résultats de recherche.
  • search – Produits visibles dans les résultats de recherche uniquement, mais pas sur la boutique.
  • hidden – Produits cachés à la fois de la boutique et de la recherche, accessibles uniquement par URL directe.
  • featured – Produits marqués comme produits vedettes.

• category – Récupère les produits utilisant le slug de catégorie spécifié.
• tag – Récupère les produits utilisant le slug de balise spécifié.
• cat_operator – Opérateur pour comparer les termes de catégorie. Les options disponibles sont :
  • AND – Affiche les produits qui appartiennent à toutes les catégories choisies.
  • IN – Affiche les produits de la catégorie choisie. Il s’agit de la valeur par défaut cat_operator.
  • NOT IN – Affichera les produits qui n’appartiennent pas à la catégorie choisie.

• ids – Affichera les produits en fonction d’une liste d’ID de poste séparés par des virgules.
• skus – Affichera les produits en fonction d’une liste d’UGS séparée par des virgules.

Si le produit ne s’affiche pas, assurez-vous qu’il n’est pas défini sur « Caché » dans la « Visibilité du catalogue ».

Attributs spéciaux du produit

Ces attributs ne peuvent pas être utilisés avec les « Attributs de contenu » énumérés ci-dessus, car ils risquent de provoquer un conflit et de ne pas s’afficher. Vous ne devez utiliser qu’un seul des attributs spéciaux suivants.

• best_selling – Affichera vos produits les plus vendus. Doit être défini sur true.
• on_sale – Affichera vos produits en vente. Doit être défini sur true.

Exemples de scénarios de produits Retour au début

Dans les scénarios suivants, nous utiliserons un exemple de magasin de vêtements.

Scénario 1 – Articles en solde aléatoires

Je veux afficher quatre produits en solde aléatoires.

Ce shortcode énonce explicitement quatre produits avec quatre colonnes (qui seront une ligne), montrant les articles en solde les plus populaires. Il ajoute également une classe CSS quick-sale, que je peux modifier dans mon thème.

Scénario 2 – Produits en vedette

Je veux afficher mes produits en vedette, deux par ligne, avec un maximum de quatre articles.

Ce shortcode indique que jusqu’à quatre produits se chargeront en deux colonnes, et qu’ils doivent être en vedette. Bien que ce ne soit pas explicitement indiqué, il utilise les valeurs par défaut telles que le tri par titre (A à Z).

Scénario 3 – Produits les plus vendus

Je veux afficher mes trois produits les plus vendus sur une seule ligne.

Scénario 4 – Produits les plus récents

Je veux afficher les produits les plus récents en premier – quatre produits à travers une ligne. Pour ce faire, nous allons utiliser l’ID du post (qui est généré lorsque la page du produit est créée), ainsi que la commande order et orderby. Comme vous ne pouvez pas voir le Post ID depuis le frontend, les ID# ont été superposés sur les images.

Scénario 5 – Catégories spécifiques

Je veux seulement afficher les hoodies et les chemises, mais pas les accessoires. Je vais utiliser deux lignes de quatre.

Alternativement, je veux seulement afficher les produits qui ne sont pas dans ces catégories. Tout ce dont j’ai besoin est de changer le cat_operator en NOT IN.

Notez que même si la limite est fixée à 8, il n’y a que quatre produits qui répondent à ce critère, donc quatre produits sont affichés.

Scénario 6 – Affichage des attributs

Chacun des articles vestimentaires a un attribut, soit « printemps/été », soit « automne/hiver » selon la saison appropriée, certains accessoires ayant les deux puisqu’ils peuvent être portés toute l’année. Dans cet exemple, je veux trois produits par ligne, affichant tous les articles « Printemps/Été ». Ce slug d’attribut est season, et les attributs sont warm et cold. Je veux également qu’ils soient triés des produits les plus récents aux plus anciens.

Alternativement, si je voulais afficher exclusivement des produits pour temps froid, je pourrais ajouter NOT IN comme mon terms_operator:

Notez qu’en utilisant NOT IN, j’exclus les produits qui sont à la fois dans « printemps/été » et « automne/hiver ». Si je voulais afficher tous les équipements appropriés pour les temps froids, y compris ces accessoires partagés, je changerais le terme de warm à cold.

Scénario 7 – Afficher uniquement les produits avec la balise « hoodie »

Tri des produits par champs méta personnalisés Retour au début

Lorsque vous utilisez le shortcode Produits, vous pouvez choisir de classer les produits par les valeurs prédéfinies ci-dessus. Vous pouvez également trier les produits par des champs méta personnalisés en utilisant le code ci-dessous (dans cet exemple, nous ordonnons les produits par prix):

add_filter( 'woocommerce_shortcode_products_query', 'woocommerce_shortcode_products_orderby' );function woocommerce_shortcode_products_orderby( $args ) { $standard_array = array('menu_order','title','date','rand','id'); if( isset( $args ) && !in_array( $args, $standard_array ) ) { $args = $args; $args = 'meta_value_num'; } return $args;}

Vous devez placer ce snippet dans functions.php dans le dossier de votre thème, puis le personnaliser en modifiant la clé méta.

Catégorie de produit Retour en haut

Ces deux shortcodes afficheront vos catégories de produits sur n’importe quelle page.

• – Affichera les produits dans une catégorie de produits spécifiée.
• – Affichera toutes vos catégories de produits.

Attributs de catégorie de produits disponibles Retour en haut

• ids – Spécifie des ids de catégories spécifiques à lister. À utiliser dans
• category – Peut être soit l’id de catégorie, le nom ou le slug. A utiliser dans
• limit – Le nombre de catégories à afficher
• columns – Le nombre de colonnes à afficher. La valeur par défaut est de 4
• hide_empty – La valeur par défaut est « 1 » qui masquera les catégories vides. Définissez à « 0 » pour afficher les catégories vides
• parent – Définissez à un ID de catégorie spécifique si vous souhaitez afficher toutes les catégories enfants. Alternativement, définissez à « 0 » (comme dans l’exemple ci-dessous) pour afficher uniquement les catégories de niveau supérieur.
• orderby – Le défaut est de classer par « nom », peut être défini à « id », « slug », ou « menu_order ». Si vous voulez ordonner par les ids que vous avez spécifiés alors vous pouvez utiliser orderby="include"
• order – Indique si l’ordre de la catégorie est ascendant (ASC) ou descendant (DESC), en utilisant la méthode définie dans orderby. La valeur par défaut est ASC.

Exemples de scénarios de catégories de produits Retour au début

Scénario 8 – Afficher uniquement les catégories de niveau supérieur

Imaginez que vous vouliez uniquement afficher les catégories de niveau supérieur sur une page et exclure les sous-catégories, eh bien c’est possible avec le shortcode suivant.

Page de produit Retour en haut

Afficher une page complète de produit unique par ID ou SKU.

Produits connexes Retour en haut

Lister les produits connexes.

Args:

array( 'limit' => '12', 'columns' => '4', 'orderby' => 'title' )

Argument limit Retour en haut

Ajouter au panier Retour en haut

Afficher le prix et le bouton d’ajout au panier d’un seul produit par ID.

Arguments:

array( 'id' => '99', 'style' => 'border:4px solid #ccc; padding: 12px;', 'sku' => 'FOO' 'show_price' => 'TRUE' 'class' => 'CSS-CLASS' 'quantity' => '1'; )

Ajouter au panier URL Retour en haut

Afficher l’URL sur le bouton d’ajout au panier d’un seul produit par ID.

Args:

array( 'id' => '99', 'sku' => 'FOO' )

Afficher les notifications WooCommerce sur les pages qui ne sont pas WooCommerce Retour en haut de page

vous permet d’afficher les notifications WooCommerce (comme, ‘Le produit a été ajouté au panier’) sur les pages qui ne sont pas WooCommerce. Utile lorsque vous utilisez d’autres shortcodes, comme , et que vous aimeriez que les utilisateurs obtiennent un retour sur leurs actions.

Dépannage des shortcodes Retour au début

Si vous avez correctement collé vos shortcodes et que l’affichage semble incorrect, assurez-vous que vous n’avez pas intégré le shortcode entre les balises <pre>. Il s’agit d’un problème courant. Pour supprimer ces balises, modifiez la page et cliquez sur l’onglet Texte :

Un autre problème courant est que les guillemets droits (") sont affichés comme des guillemets anglais ("). Pour que les shortcodes fonctionnent correctement, vous avez besoin de guillemets droits.