Plugin woocommerce pulsante personalizzato carrello prodotto

Descrizione

Plugin woocommerce pulsante personalizzato carrello prodotto

1. Obiettivo generale

Permette di personalizzare graficamente e funzionalmente i due pulsanti chiave di WooCommerce nella scheda prodotto:

1. Il pulsante “Aggiungi al carrello”

2. Il pulsante “Guarda il mio carrello” (aggiunto a destra del pulsante “Aggiungi al carrello”)

Tutte le opzioni sono accessibili direttamente tramite il Customizer di WordPress, senza toccare il codice del tuo tema.

2. Personalizzazione del pulsante “Aggiungi al carrello”

Integrata nell’intestazione di ogni pagina prodotto, questa funzionalità inietta CSS inline per adattare istantaneamente il rendering:

• Testo del pulsante
  – Modifica l’etichetta predefinita “Aggiungi al carrello”

• Colori
  – Colore di sfondo
  – Colore del testo

• Bordo
  – Stile (none, solid, dotted, dashed)
  – Spessore (px)
  – Colore

• Angoli arrotondati
  – Raggio di ogni angolo (alto-sinistra, alto-destra, basso-destra, basso-sinistra)

• Ombra portata
  – Spostamento X / Y (px)
  – Sfocatura (px)
  – Colore dell’ombra

• Animazioni CSS (scelta nel Customizer)
  – shake : leggera scossa orizzontale
  – zoom : effetto di zoom/pulsazione
  – cartoon : cambiamento ciclico del colore di sfondo
  – random : selezione casuale tra i tre sopra

Stili vengono applicati tramite un unico <style> iniettato in wp_head, garantendo un impatto minimo sulle prestazioni.

3. Aggiunta del pulsante “Guarda il mio carrello”

Posizionato immediatamente dopo il pulsante “Aggiungi al carrello” grazie al hook woocommerce_after_add_to_cart_button, questo secondo pulsante :

• Reindirizza alla pagina carrello (wc_get_cart_url())

• Testo modificabile (predefinito “Guarda il mio carrello”)

• Colori
  – Fondo
  – Testo

• Bordo
  – Stile, spessore, colore

• Angoli arrotondati (singoli)

• Ombra portata (offset X/Y, sfocatura, colore)

• Margine sinistro predefinito per distanziare dal pulsante principale

4. Interfaccia di configurazione (Customizer)

Una sezione unica “Personalizzazione Pulsanti WC” raggruppa tutte le impostazioni :

1. Parametri “Aggiungi al carrello”

2. Parametri “Vedi il mio carrello”

Per ogni gruppo :

• add_setting() + add_control() (tipo testo, colore, selezione, numero)

• Validazione tramite sanitize_text_field, sanitize_hex_color, absint

5. Compatibilità e buone pratiche

• Versione minima richiesta : WooCommerce 3.0+

• Temi : compatibile con la maggior parte dei temi (Storefront, Astra, OceanWP, …)

• Prestazioni :

  • Codice PHP leggero, senza dipendenze esterne

  • CSS inline limitato solo alle pagine prodotto

• Manutenzione :

  • Versione attuale : 1.5

  • traducibile tramite il text-domain killerdev98-wc-custom-button

6. Casi d’uso tipici

• Branding forte : adattare i colori del pulsante ai visual della tua boutique.

• Effetto di chiamata all’azione : aggiungere un’animazione “shake” per mettere in evidenza il pulsante.

• Percorso utente rapido : offrire sin dalla scheda prodotto l’accesso diretto al carrello.

• Uniformità grafica : definire una forma e un’ombra coerenti per tutti i pulsanti.

Questo plugin offre così un controllo totale, con semplicità, sull’aspetto e il comportamento dei pulsanti principali del tuo catalogo prodotti WooCommerce.

Plugin woocommerce pulsante personalizzato carrello prodotto decostickerstore