Le bloc Produits associés vous permet d'afficher des produits associés dans vos modèles WooCommerce Single Product. WooCommerce détermine automatiquement les produits associés en fonction des catégories et des balises attribuées à chaque produit. Ainsi, lorsque vous placez un produit dans une catégorie ou ajoutez une balise, seuls les produits de la même catégorie ou du même groupe de balises sont affichés.
Ce bloc est conçu exclusivement pour être utilisé dans les modèles de produit unique. Vous pouvez contrôler le nombre de produits affichés, leur ordre de tri et personnaliser entièrement la typographie de la grille, les styles des boutons et la présentation des images à partir de l'onglet Avancé.
Ajouter le bloc Produits associés à vos pages
Suivez ces étapes pour ajouter un bloc Produits associés à votre modèle SeedProd Single Product :
Étape 1 : Ajouter le bloc
Sous Design > Blocs > Balises de modèle WooCommerce, glissez-déposez le bloc Produits associés dans la section souhaitée de votre modèle Produit unique.
Étape 2 : Configurer les paramètres
Une fois ajouté, cliquez sur le bloc Produits associés pour ouvrir ses paramètres. Dans l'onglet Paramètres, vous trouverez les options suivantes :
- Colonnes : définissez le nombre de colonnes de produits à afficher dans la grille des produits associés.
- Nombre d'articles par page : définissez le nombre maximal de produits connexes à afficher.
- Trier par : Définissez comment les produits associés sont triés : par date, ID, ordre du menu, popularité, aléatoire, note ou titre.
- Ordre : définissez le sens du tri — ASC (ascendant) ou DESC (descendant).
Étape 3 : Personnalisez le design
Dans l'onglet Avancé, vous pouvez personnaliser l'apparence visuelle de votre bloc Produits associés. Les paramètres sont organisés en trois sections.
Styles :
- Alignement : définissez l'alignement horizontal de la grille des produits associés (à gauche, au centre ou à droite) à l'aide des commandes spécifiques à chaque appareil pour les ordinateurs de bureau, les tablettes et les appareils mobiles.
- Typographie du titre : définissez la police, la taille, l'interligne, l'espacement des lettres, le poids, le style et la casse du texte du titre du produit.
- Description Typographie : définissez la police, la taille, l'interligne, l'espacement des lettres, le poids, le style et la casse pour le texte de description du produit.
- Typographie des prix : définissez la police, la taille, l'interligne, l'espacement des lettres, le poids, le style et la casse du texte indiquant le prix des produits.
- Couleur du prix : définissez la couleur du prix normal du produit.
- Couleur de la promotion : définissez la couleur du prix promotionnel lorsqu'un produit est soldé.
Bouton :
- Style du bouton : choisissez un style visuel pour le bouton Ajouter au panier : plat, 2D, vintage, fantôme ou lien.
- Couleur du bouton : définissez la couleur d'arrière-plan du bouton Ajouter au panier.
- Typographie des boutons : définissez la police, la taille, la hauteur de ligne, l'espacement des lettres, le poids, le style et la casse du texte des boutons.
- Taille des boutons : choisissez une taille prédéfinie pour les boutons : petite, moyenne, grande, très grande ou très très grande.
- Rayon de la bordure : ajustez l'arrondi des coins du bouton « Ajouter au panier » à l'aide d'un curseur.
Image :
- Ombre : appliquez une ombre aux images des produits à l'aide des tailles prédéfinies : Aucune, Fine, Petite, Moyenne, Grande, Très grande, Très très grande ou Ombre portée inférieure.
- Style de bordure : définissez le style de bordure des images des produits : pleine, pointillée ou en pointillés.
- Couleur de la bordure de l'image : définissez la couleur de la bordure de l'image du produit.
- Largeur de la bordure de l'image : définissez l'épaisseur de la bordure sur chaque côté (haut, droite, bas, gauche) de l'image du produit.
- Remplissage des espaces blancs autour des images : ajoutez un remplissage intérieur autour des images de produits, à l'intérieur de leur bordure.
Espacement :
- Marge : définissez l'espacement extérieur autour du bloc sur les quatre côtés, avec des commandes indépendantes pour les ordinateurs de bureau, les tablettes et les appareils mobiles.
- Remplissage : définissez l'espacement intérieur à l'intérieur du bloc wrapper sur les quatre côtés, avec des commandes par appareil.
Attributs :
- Classe personnalisée : ajoutez une ou plusieurs classes CSS personnalisées à l'enveloppe du bloc pour un style ciblé.
- Identifiant CSS : SeedProd génère automatiquement un identifiant CSS unique pour ce bloc. Vous pouvez l'utiliser pour référencer le bloc dans un CSS ou un JavaScript personnalisé.
- Attributs personnalisés : ajoutez des attributs HTML personnalisés à l'élément conteneur du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format clé|valeur.
Visibilité des appareils :
- Masquer sur le bureau : activez cette option pour masquer le bloc lorsqu'il est affiché sur un écran d'ordinateur.
- Masquer sur tablette : activez cette option pour masquer le bloc lorsqu'il est affiché sur un écran de tablette.
- Masquer sur mobile : activez cette option pour masquer le bloc lorsqu'il est affiché sur un écran mobile.
Effets d'animation :
- Effet de défilement : appliquez une animation déclenchée par le défilement au bloc, y compris les options de défilement vertical et horizontal avec des commandes de direction, de vitesse et de décalage de la fenêtre d'affichage.
- Effet souris : appliquez un effet de parallaxe basé sur les mouvements de la souris au bloc.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Produits associés et de personnaliser son apparence, veillez à enregistrer votre travail.
Vous avez ajouté avec succès un bloc Produits associés à votre modèle de produit unique ! Afficher des produits associés est un moyen éprouvé d'augmenter la valeur moyenne des commandes et d'inciter les clients à continuer d'explorer votre catalogue. Assurez-vous que vos produits sont organisés selon des catégories et des balises cohérentes afin que WooCommerce puisse afficher les recommandations les plus pertinentes pour chaque article.