Pluggin woocommerce custom bouton panier produit

Description

Pluggin woocommerce custom bouton panier produit

1. Objectif général

Permet de personnaliser graphiquement et fonctionnellement les deux boutons clés de WooCommerce sur la fiche produit :

1. Le bouton “Ajouter au panier”

2. Le bouton “Voir mon panier” (ajouté à la droite du bouton “Ajouter au panier”)

Toutes les options sont accessibles directement via le Customizer de WordPress, sans toucher au code de votre thème.

2. Personnalisation du bouton “Ajouter au panier”

Intégrée dans l’en-tête de chaque page produit, cette fonctionnalité injecte du CSS inline pour adapter instantanément le rendu :

• Texte du bouton
  – Modifier le libellé par défaut “Ajouter au panier”

• Couleurs
  – Couleur de fond
  – Couleur du texte

• Bordure
  – Style (none, solid, dotted, dashed)
  – Épaisseur (px)
  – Couleur

• Coins arrondis
  – Rayon de chaque coin (haut-gauche, haut-droit, bas-droit, bas-gauche)

• Ombre portée
  – Décalage X / Y (px)
  – Flou (px)
  – Couleur de l’ombre

• Animations CSS (choix dans le Customizer)
  – shake : légère secousse horizontale
  – zoom : effet de zoom/pulsation
  – cartoon : changement cyclique de couleur de fond
  – random : sélection aléatoire parmi les trois ci-dessus

Tous ces styles sont appliqués via un seul <style> injecté dans wp_head, garantissant un impact minimal sur les performances.

3. Ajout du bouton “Voir mon panier”

Positionné immédiatement après le bouton “Ajouter au panier” grâce au hook woocommerce_after_add_to_cart_button, ce second bouton :

• Redirige vers la page panier (wc_get_cart_url())

• Texte modifiable (par défaut “Voir mon panier”)

• Couleurs
  – Fond
  – Texte

• Bordure
  – Style, épaisseur, couleur

• Coins arrondis (individuels)

• Ombre portée (offset X/Y, flou, couleur)

• Marge gauche prédéfinie pour espacer du bouton principal

4. Interface de configuration (Customizer)

Une section unique “Personnalisation Boutons WC” regroupe tous les réglages :

1. Paramètres “Ajouter au panier”

2. Paramètres “Voir mon panier”

Pour chaque groupe :

• add_setting() + add_control() (type texte, couleur, select, number)

• Validation via sanitize_text_field, sanitize_hex_color, absint

5. Compatibilité et bonnes pratiques

• Version minimale requise : WooCommerce 3.0+

• Thèmes : compatible avec la plupart des thèmes (Storefront, Astra, OceanWP, …)

• Performances :

  • Code PHP léger, pas de dépendances externes

  • CSS inline scoped uniquement aux pages produit

• Maintenance :

  • Version actuelle : 1.5

  • Traduisible via le text-domain killerdev98-wc-custom-button

6. Cas d’usage typiques

• Branding fort : adapter les couleurs du bouton aux visuels de votre boutique.

• Effet d’appel à l’action : ajouter une animation “shake” pour souligner le bouton.

• Parcours utilisateur rapide : offrir dès la fiche produit l’accès direct au panier.

• Uniformité graphique : définir une forme et une ombre cohérentes pour tous les boutons.

Ce plugin offre ainsi un contrôle total, en toute simplicité, sur l’apparence et le comportement des boutons principaux de votre catalogue produit WooCommerce.

Pluggin woocommerce custom bouton panier produit decostickerstore

Views: 6