> ## Documentation Index
> Fetch the complete documentation index at: https://docs.titane-intelligence.com/llms.txt
> Use this file to discover all available pages before exploring further.

# WooCommerce : bien démarrer

> Installer le plugin Titane Intelligence, relier votre boutique à La Forge, et choisir où afficher les blocs de recommandations.

export const PRODUITS = {
  serum: {
    nom: "Sérum rééquilibrant niacinamide",
    prix: "24,90 €",
    image: "/images/pure/serum.jpg"
  },
  gel: {
    nom: "Gel nettoyant doux",
    prix: "14,90 €",
    image: "/images/pure/gel-nettoyant.jpg"
  },
  solaire: {
    nom: "Lait frais solaire SPF 50",
    prix: "19,90 €",
    image: "/images/pure/solaire.jpg"
  },
  baume: {
    nom: "Baume lèvres repulpant",
    prix: "8,90 €",
    image: "/images/pure/baume-levres.jpg"
  },
  huile: {
    nom: "Huile corps nourrissante",
    prix: "22,90 €",
    image: "/images/pure/huile-corps.jpg"
  },
  dentifrice: {
    nom: "Dentifrice éclat minéral",
    prix: "6,90 €",
    image: "/images/pure/dentifrice.jpg"
  },
  deodorant: {
    nom: "Déodorant stick néroli blanc",
    prix: "11,90 €",
    image: "/images/pure/deodorant-stick.jpg"
  },
  recharge: {
    nom: "Recharge déodorant roll-on 24 h",
    prix: "7,90 €",
    image: "/images/pure/recharge-roll-on.jpg"
  },
  masque: {
    nom: "Masque stick argile rose",
    prix: "16,90 €",
    image: "/images/pure/masque-stick.jpg"
  },
  duo: {
    nom: "Duo rituel du matin",
    prix: "29,90 €",
    image: "/images/pure/duo-matin.jpg"
  }
};

export const ApercuBloc = ({titre, produits = [], page, bouton}) => <div className="not-prose" style={{
  border: "1px solid rgba(127,127,127,0.25)",
  borderRadius: 14,
  overflow: "hidden",
  margin: "20px 0"
}}>
    <div style={{
  background: "#1C1A16",
  color: "#F7F5F0",
  padding: "12px 18px",
  display: "flex",
  justifyContent: "space-between",
  alignItems: "center"
}}>
      <span style={{
  fontFamily: "Georgia, 'Times New Roman', serif",
  fontSize: 22
}}>pure</span>
      <span style={{
  fontSize: 12,
  opacity: 0.75
}}>{page}</span>
    </div>
    <div style={{
  background: "#F7F5F0",
  color: "#1C1A16",
  padding: "22px 18px"
}}>
      <div style={{
  fontSize: 19,
  fontWeight: 700,
  marginBottom: 14
}}>{titre}</div>
      <div style={{
  display: "grid",
  gridTemplateColumns: `repeat(${Math.min(produits.length, 4) || 1}, minmax(0, 1fr))`,
  gap: 12
}}>
        {produits.map(p => <div key={p.nom}>
            <img src={p.image} alt={p.nom} style={{
  width: "100%",
  aspectRatio: "4 / 5",
  objectFit: "cover",
  borderRadius: 8,
  margin: 0
}} />
            <div style={{
  fontSize: 13,
  fontWeight: 600,
  marginTop: 8,
  lineHeight: 1.35
}}>{p.nom}</div>
            <div style={{
  fontSize: 13,
  marginTop: 2
}}>{p.prix}</div>
            {bouton ? <div style={{
  marginTop: 8,
  fontSize: 12,
  fontWeight: 600,
  border: "1px solid #1C1A16",
  borderRadius: 999,
  padding: "6px 0",
  textAlign: "center"
}}>{bouton}</div> : null}
          </div>)}
      </div>
    </div>
    <div style={{
  padding: "8px 16px",
  fontSize: 12,
  opacity: 0.65
}}>Aperçu d'un bloc de recommandations, marque de démonstration « Pure ».</div>
  </div>;

<Info>
  Le plugin **Titane Intelligence for WooCommerce** vous est fourni par l'équipe Titane. Demandez-le à [contact@titane-intelligence.com](mailto:contact@titane-intelligence.com).
</Info>

## Installer et relier le plugin

<Steps>
  <Step title="Installer le plugin">
    Dans WordPress : **Extensions** › **Ajouter** › **Téléverser une extension**, choisissez le fichier du plugin, puis **Activer**. WooCommerce doit être installé et actif.
  </Step>

  <Step title="Ouvrir la page Titane">
    **WooCommerce** › **Titane**. La page a cinq onglets : Tableau de bord, Réglages, Placements, Confidentialité, Diagnostic.
  </Step>

  <Step title="Connecter la boutique">
    Sur le tableau de bord, cliquez **Connecter WooCommerce**. WooCommerce vous demande d'autoriser un accès en **lecture** : acceptez. De retour sur la page, le message « La boutique est connectée à Titane. » s'affiche.
  </Step>

  <Step title="Choisir les emplacements">
    Onglet **Placements** : cochez les emplacements où afficher un bloc, puis **Enregistrer les placements**.
  </Step>
</Steps>

<Accordion title="Sans le plugin : une clé API REST" icon="key-round">
  Vous pouvez aussi relier votre boutique par une clé API REST en **lecture seule** : Titane lit vos données, mais l'affichage des blocs demande le plugin.

  1. **WooCommerce** › **Réglages** › onglet **Avancé** › **API REST** › **Ajouter une clé**.
  2. Description « Titane — La Forge », utilisateur administrateur, permissions **Lecture**.
  3. **Générer une clé API**, puis copiez la Consumer key et le Consumer secret : ils ne s'affichent qu'une fois.
  4. Dans La Forge, page **Données**, carte **WooCommerce**, collez l'adresse de la boutique et les deux valeurs. Votre boutique doit être en HTTPS.
</Accordion>

## Trois façons de placer un bloc

| Façon | Pour | Où |
| - | - | - |
| **Placements automatiques** | accueil, fiche produit, catégories, panier, paiement, remerciements, e-mails de commande | **WooCommerce** › **Titane** › onglet **Placements** |
| **Le bloc « Titane — Recommandations »** | un endroit précis d'une page construite avec l'éditeur de blocs | dans l'éditeur, parmi les blocs WooCommerce |
| **Le shortcode** | un thème ou un constructeur de pages qui accepte les shortcodes | `[titane_recommendations]` |

## Les emplacements automatiques

Toutes les cases sont **décochées** au départ : rien ne s'affiche tant que vous ne les cochez pas.

| Case | Où le bloc apparaît | Titre | Produits |
| - | - | - | - |
| Accueil | sous le contenu de la page d'accueil (au-dessus des produits si votre accueil est la page Boutique) | Recommandé pour vous | 4 |
| Fiche produit | sous le résumé et les onglets du produit | Recommandé pour vous | 4 |
| Catégorie / collection | sous la grille de produits | Recommandé pour vous | 4 |
| Panier | à côté des totaux du panier | Recommandé pour vous | 4 |
| Checkout | avant les moyens de paiement | Complétez votre panier | 4 |
| Thank-you / post-achat | page de remerciement et détail de la commande | Vous pourriez aussi aimer | 4 |
| Emails transactionnels consentis | e-mails de commande, aux clients qui ont accepté le marketing | Vous pourriez aussi aimer | 3 |

<ApercuBloc page="Fiche produit · Sérum rééquilibrant niacinamide" titre="Recommandé pour vous" produits={[PRODUITS.gel, PRODUITS.masque, PRODUITS.huile, PRODUITS.solaire]} bouton="Ajouter au panier" />

## Ce que voit votre visiteur

Un bloc ne montre que des produits **visibles et en stock**. Tant que Titane n'a pas de sélection pour un visiteur, le bloc s'appuie sur votre boutique : produits suggérés sur la fiche produit, ventes croisées au panier, meilleures ventes ailleurs.

<Note>
  L'onglet **Confidentialité** règle le suivi des visiteurs et le consentement (compatible WP Consent API). Les blocs s'affichent dans tous les cas ; sans consentement, ils restent sans suivi. La case **Désactiver immédiatement toutes les recommandations Titane** coupe tous les blocs d'un coup.
</Note>

## Quatre cas d'usage

<Columns cols={2}>
  <Card title="Une sélection sur l'accueil" icon="house" href="/cms/woocommerce/accueil">
    Une case à cocher, ou le bloc pour choisir l'endroit exact.
  </Card>

  <Card title="Fiche produit et catégories" icon="package-plus" href="/cms/woocommerce/fiche-produit">
    Des recommandations sous chaque produit et chaque grille.
  </Card>

  <Card title="Panier et paiement" icon="shopping-cart" href="/cms/woocommerce/panier-paiement">
    Un complément de dernière minute.
  </Card>

  <Card title="Remerciements et e-mails de commande" icon="badge-check" href="/cms/woocommerce/remerciements">
    L'envie de revenir, après l'achat.
  </Card>
</Columns>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.