Le bloc Ventes Additionnelles améliore votre modèle de produit unique WooCommerce en affichant automatiquement les produits de ventes additionnelles recommandés sous le produit actuel. Ce sont des produits que vous avez désignés manuellement comme ventes additionnelles dans WooCommerce, vous offrant ainsi un moyen organisé de guider les clients vers des articles complémentaires ou de plus grande valeur.
Avant d'ajouter ce bloc, assurez-vous que vos produits de ventes additionnelles sont déjà configurés dans WooCommerce en accédant à l'onglet Produits Liés de chaque produit et en ajoutant des articles au champ Ventes Additionnelles. Une fois en place, le bloc gère l'affichage — avec un contrôle total sur les colonnes, l'ordre, la typographie, le style du bouton et la présentation des images.
Ajouter le bloc Ventes Additionnelles à votre modèle de produit unique
Suivez ces étapes pour ajouter un bloc Ventes Additionnelles à votre modèle de produit unique SeedProd :
Étape 1 : Ajouter le bloc
Sous Balises de modèle WooCommerce, faites glisser et déposez le bloc Ventes Additionnelles dans la section souhaitée de votre modèle de produit unique.
Étape 2 : Configurer les paramètres de contenu
Une fois ajouté, cliquez sur le bloc Ventes Additionnelles pour ouvrir ses paramètres. Dans l'onglet Contenu, vous pouvez ajuster les options d'affichage suivantes :
- Colonnes : Définissez le nombre de colonnes utilisées pour afficher les produits de ventes additionnelles dans la grille.
- Articles par page : Définissez le nombre maximum de produits de ventes additionnelles à afficher. Utilisez
-1pour afficher toutes les ventes additionnelles disponibles. - Trier par : Choisissez le champ utilisé pour trier les produits de ventes additionnelles — Date, ID, Ordre du menu, Popularité, Aléatoire, Note ou Titre.
- Ordre : Définissez la direction du tri — ASC (ascendant) ou DESC (descendant).
Étape 3 : Personnaliser le design
Dans l'onglet Avancé, vous pouvez personnaliser l'apparence visuelle de votre bloc Ventes Additionnelles.
Styles :
- Alignement : Définissez l'alignement horizontal de la grille de produits de ventes additionnelles — Gauche, Centre ou Droite — avec des contrôles par appareil pour ordinateur, tablette et mobile.
- Typographie du titre : Définissez la famille de polices, la taille, le poids, le style, la hauteur de ligne, l'espacement des lettres et la casse des titres de produits.
- Typographie de la description : Définissez les propriétés typographiques du texte de description du produit.
- Typographie du prix : Définissez les propriétés typographiques du texte du prix du produit.
- Couleur du prix : Définissez la couleur des prix des produits réguliers.
- Couleur du badge promotionnel : Définissez la couleur du prix soldé ou du badge promotionnel.
Bouton :
- Typographie du bouton : Définissez la famille de polices, la taille, le poids, le style et d'autres propriétés typographiques du texte du bouton Ajouter au panier.
- Style du bouton : Choisissez le style visuel du bouton Ajouter au panier — Plat, 2D, Vintage, Fantôme ou Lien.
- Couleur du bouton : Définissez la couleur d'arrière-plan du bouton.
- Taille du bouton : Choisissez la taille du bouton — Petit, Moyen, Grand, Très grand ou Extrêmement grand.
- Rayon de bordure : Arrondissez les coins du bouton à l'aide d'un curseur.
Image :
- Ombre : Appliquez une ombre aux images de produits en utilisant des tailles prédéfinies — Aucune, Cheveux, Petite, Moyenne, Grande, Très grande, Extrêmement grande ou Ombre portée inférieure.
- Style de bordure : Choisissez un style de bordure pour les images de produits — Uni, Pointillé ouillés.
- Couleur de la bordure de l'image : Définissez la couleur de la bordure de l'image du produit.
- Largeur de bordure de l’image : Définissez des largeurs de bordure individuelles pour chaque côté de l’image du produit — Haut, Droite, Bas et Gauche.
- Espace blanc de l’image : Ajoutez un remplissage intérieur entre l’image du produit et sa bordure.
Espacement :
- Marge : Définissez l'espacement extérieur autour du bloc sur les quatre côtés, avec des contrôles indépendants pour ordinateur, tablette et mobile.
- Rembourrage : Définissez l'espacement intérieur à l'intérieur du wrapper du bloc sur les quatre côtés, avec des contrôles par appareil.
Attributs :
- Classe personnalisée : Ajoutez une ou plusieurs classes CSS personnalisées au wrapper du bloc pour un style ciblé.
- ID CSS : SeedProd génère automatiquement un ID CSS unique pour ce bloc. Vous pouvez l'utiliser pour référencer le bloc dans du CSS ou JavaScript personnalisé.
- Attributs personnalisés : Ajoutez des attributs HTML personnalisés à l'élément wrapper du bloc. Entrez chaque attribut sur une nouvelle ligne en utilisant le format clé|valeur.
Visibilité de l'appareil :
- Masquer sur ordinateur : Basculez pour masquer le bloc lorsqu'il est affiché sur les écrans d'ordinateur.
- Masquer sur tablette : Basculez pour masquer le bloc lorsqu'il est affiché sur les écrans de tablette.
- Masquer sur mobile : Basculez pour masquer le bloc lorsqu'il est affiché sur les écrans mobiles.
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 contrôles de direction, de vitesse et de décalage de la fenêtre d'affichage.
- Effet de souris : Appliquez un effet de parallaxe piloté par le mouvement de la souris au bloc.
Étape 4 : Enregistrez vos modifications
Une fois que vous avez terminé de configurer le bloc Ventes incitatives et de personnaliser son apparence, assurez-vous d’enregistrer votre travail.
Vous avez ajouté avec succès un bloc Ventes incitatives à votre modèle de produit unique ! Les recommandations de ventes incitatives placées stratégiquement sont l’un des moyens les plus efficaces d’augmenter la valeur moyenne des commandes dans WooCommerce. Expérimentez avec la mise en page des colonnes, les styles de boutons et la présentation des images pour créer une section de recommandation de produits qui semble native à la conception de votre magasin.