Le bloc Produits en promotion vous permet de présenter tous vos produits WooCommerce actuellement en promotion dans une grille consultable. Il affiche automatiquement tous les produits dont le prix de vente est actif, ce qui facilite la création de pages dédiées aux promotions, la mise en avant des promotions dans une barre latérale ou l'ajout d'une section « Offres spéciales » n'importe où sur votre site.
Vous pouvez contrôler le nombre de produits affichés, leur ordre de tri et appliquer des filtres optionnels à l'aide des commandes de requête. L'onglet Avancé vous permet de contrôler entièrement la typographie de la grille, les styles des boutons et la présentation des images des produits afin de les adapter à l'image de marque de votre boutique.
Ajouter le bloc Produits en promotion à vos pages
Suivez ces étapes pour ajouter un bloc Produits en promotion à votre page SeedProd :
Étape 1 : Ajouter le bloc
Sous Design > Blocs > WooCommerce, glissez-déposez le bloc Produits en promotion dans la section souhaitée de votre page.
Étape 2 : Configurer les paramètres
Une fois ajouté, cliquez sur le bloc Produits en solde pour ouvrir ses paramètres. Dans l'onglet Paramètres, les paramètres sont organisés en deux sections.
Contenu :
- Colonnes : définissez le nombre de colonnes de produits à afficher dans la grille.
- Pagination : activez cette option pour activer la pagination, ce qui permet de répartir la grille de produits sur plusieurs pages.
- Afficher le nombre d'articles : activez cette option pour afficher le nombre total de produits présentés.
- Afficher l'ordre par : activez cette option pour afficher un menu déroulant permettant aux visiteurs de réorganiser les produits selon des critères tels que le prix, la popularité ou la note.
- Limite : Définissez le nombre maximal de produits à afficher. Utilisez
-1pour afficher tous les produits soldés correspondants (par défaut).
Requête :
- Type : choisissez les produits à afficher — Tous les produits, Produits phares, Produits en promotion, Produits les plus vendus, Produits récents ou Produits les mieux notés. Ce bloc affiche par défaut les produits en promotion.
- Trier par : Définissez l'ordre dans lequel les produits sont classés : par date, titre, prix, popularité, note, ordre aléatoire ou ordre du menu.
- 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 en promotion. Les paramètres sont organisés en trois sections.
Styles :
- Alignement : définissez l'alignement horizontal de la grille de produits (à gauche, au centre ou à droite) à l'aide des commandes spécifiques à chaque appareil pour les ordinateurs de bureau, les tablettes et les mobiles.
- 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é la configuration du bloc Produits en promotion et personnalisé son apparence, veillez à enregistrer votre travail.
Vous avez ajouté avec succès un bloc Produits en promotion à votre page ! Une grille de produits en promotion bien placée est l'un des moyens les plus efficaces pour stimuler les conversions : les acheteurs à la recherche d'offres trouveront exactement ce dont ils ont besoin en un seul endroit. Utilisez l'option Couleur de promotion dans l'onglet Avancé pour mettre en valeur les prix réduits et renforcer la valeur de vos promotions.