Insérer et définir le style des produits connexes dans le modèle unique WooCommerce

Contenu

Produits connexes

  1. Produits par page : définissez la quantité exacte de produits connexes à afficher
  2. Colonnes : définissez le nombre de colonnes affichées, de 1 à 12, pour chaque appareil (ordinateur de bureau, tablette, mobile)
  3. Trier par : définissez l’ordre dans lequel les produits seront affichés. Les options incluent la date, le titre, le prix, la popularité, l’évaluation, l’aléatoire, l’ordre du menu
  4. Ordre : sélectionnez l’ ordre ASC ou DESC (croissant ou décroissant)

Style

  1. Écart de colonnes : définissez l’écart exact entre les colonnes
  2. Espace entre les lignes: définissez l’écart exact entre les lignes
  3. Alignement : alignez les données des produits associés à gauche, à droite ou au centre

Image

  1. Type de bordure : sélectionnez le type de bordure, en choisissant entre aucune, solide, double, pointillée, pointillée ou rainurée
  2. Largeur : contrôlez l’épaisseur de la bordure autour des images de produits associées
  3. Couleur : choisissez la couleur de la bordure
  4. Rayon de la bordure : définissez le rayon pour contrôler l’arrondi des coins de la bordure
  5. Espacement : ajustez la quantité d’espace entre les images et leurs données

Titre

  1. Couleur : Choisissez la couleur du titre du produit associé
  2. Typographie : définissez les options de typographie pour le texte du titre
  3. Espacement : ajustez la quantité d’espace après le titre

Évaluation

  1. Couleur de l’étoile : choisissez la couleur d’une étoile remplie
  2. Couleur de l’étoile vide : choisissez la couleur d’une étoile vide
  3. Taille des étoiles : définissez la taille des étoiles
  4. Espacement : ajustez la quantité d’espace après les étoiles de classement

Prix

  1. Couleur : Choisissez la couleur du produit correspondant Prix
  2. Typographie : définissez les options de typographie pour le produit associé Prix

Prix ​​habituel

  1. Couleur : choisissez la couleur du prix normal du produit associé
  2. Typographie : définissez les options de typographie pour le prix normal du produit associé

Bouton

Normal | Flotter

Les options suivantes peuvent être définies indépendamment pour les états normal et survolé.

  1. Couleur du texte : choisissez la couleur du texte du bouton du produit associé
  2. Couleur d’arrière-plan : choisissez la couleur d’arrière-plan du bouton du produit associé
  3. Couleur de la bordure : choisissez la couleur de la bordure du bouton du produit associé
  1. Typographie : définissez les options de typographie pour le texte du bouton du produit associé
  2. Type de bordure : sélectionnez le type de bordure, en choisissant entre aucune, solide, double, pointillée, pointillée ou rainurée
  3. Largeur : contrôlez l’épaisseur de la bordure autour du bouton du produit associé
  4. Rayon de la bordure : contrôle l’arrondi des coins de la bordure du bouton
  5. Remplissage de texte : définissez le remplissage dans le bouton
  6. Espacement : ajustez la quantité d’espace au-dessus des boutons

Voir le panier

  1. Couleur : choisissez la couleur du texte Afficher le panier sous les boutons
  2. Typographie : définissez les options de typographie pour le texte Afficher le panier

Titre

  1. En – tête : afficher ou masquer l’en-tête Produits associés
  2. Couleur : choisissez la couleur du texte de l’en-tête des produits associés
  3. Typographie : définissez les options de typographie pour le texte de l’en-tête
  4. Alignement du texte : alignez les produits associés en-tête à gauche, à droite ou au centre
  5. Espacement : ajustez la quantité d’espace après le titre

Boîte

  1. Largeur de la bordure : contrôlez l’épaisseur de la bordure autour de la boîte du produit associé
  2. Border Radius : contrôle l’arrondi des coins de la boîte de produits associés
  3. Rembourrage : modifiez le rembourrage dans la boîte des produits associés

Normal | Flotter

Les options suivantes peuvent être définies indépendamment pour les états normal et survolé.

  1. Ombre de boîte : ajuster les options d’ombre de boîte
  2. Couleur d’arrière-plan : choisissez la couleur d’arrière-plan de la boîte des produits connexes
  3. Couleur de la bordure : choisissez la couleur de la bordure de la boîte des produits connexes

Vente Flash

  1. Vente Flash : afficher ou masquer
  2. Couleur du texte : choisissez la couleur du texte Sale Flash
  3. Couleur d’arrière-plan : choisissez la couleur d’arrière-plan du Sale Flash
  4. Typographie : définissez les options de typographie pour le texte Sale Flash
  5. Border Radius : contrôlez l’arrondi des coins du Sale Flash
  6. Largeur : contrôlez l’épaisseur de la bordure pour le Sale Flash
  7. Hauteur : définissez la hauteur du flash de vente
  8. Position : définissez la position du flash de vente, à gauche ou à droite, de la boîte des produits associés
  9. Distance : définissez la distance entre le Sale Flash et le haut de la boîte des produits associés

Remarque : le style de ce widget est souvent affecté par votre thème et vos plugins. Si vous rencontrez un tel problème, essayez de passer à un thème de base et de désactiver les plugins associés, ou ajustez le style dans les paramètres de votre thème.

Source : https://docs.elementor.com/article/546-woocommerce-single-product-related