Woocommerce – sostituire bottoni aggiungi al carrello con una immagine

Ciao Matteo, intanto grazie per avermi risposto..
ho provato come mi hai detto tu, ma non accade nulla (cancellato cache del sito e del browser).

.woocommerce .single_add_to_cart_button {
    background: url('https://www.greenhope.it/blog/wp-content/uploads/greenhopecart.png') no-repeat;
    width: 19px;
    height: 19px;
}

Questo codice tra l’altro mi pareva d’averlo già provato.
Il problema secondo me risale che se inserisco il link all’immagine in
Aspetto -> Personalizza -> CSS aggiuntivo
questo diventa rosso come se fosse un errore..

Inoltre mi piacerebbe diversificare le icone a seconda del bottone: se è prodotto singolo carrello, se è prodotto variabile un’altra icona.

Grazie ancora della disponibilità e dell’aiuto

Marco R.

• Questa risposta è stata modificata 5 anni, 5 mesi fa da greenhope.

Ciao Askmagic, si mi ero accorto anche io, inoltre credo che il problema risiedesse anche nel richiamo del tasto.. allora nel frattempo ho scoperto le posizioni giuste che elenco di seguito per chi come me dovesse avere bisogno in futuro:

Tasto: Scegli legato al prodotto gift card (di Yith)
a.button.product_type_gift-card.add_to_cart_button

Tasto: Guarda legato al plugin Quick view (di Yith)
a.button.yith-wcqv-button

Tasto: Aggiungi al carrello (singolo prodotto)
a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart

Tasto: Scegli (prodotto variabile)
a.button.product_type_variable.add_to_cart_button

Con queste coordinate posso personalizzare differentemente le varie tipologie di bottoni, ma ora subentra un nuovo problema che vi andrò ad esporre:
Ora ce sappiamo che voci richiamare usando la porzione di codice passata dall’amico Matteo, non funziona bene in quanto l’immagine viene riportata in alto a sinistra del tasto e non nel mezzo. Facendo diversi esperimenti ho trovato come centrare l’immagine utilizzando il seguente codice:

{
  background: url("https://www.greenhope.it/blog/wp-content/uploads/icone/mia-immagine.png");
	background-color: #b3d66d;
  background-repeat: no-repeat;
  background-position: 50% 50%;
	
}

In questo modo l’immagine rimane centrata nel mezzo del bottone.. Perfetto! Direte voi.. e invece no!

Purtroppo non riesco a togliere la scritta del bottone che perciò compare sopra all’immagine.
Inoltre ho sostituito l’immagine .png con una svg in modo da renderla anch’essa responsive come il resto della pagina, ma non riesco a farle cambiare colore, in quanto di default appare nera e non riesco nemmeno a darle una dimensione più ridotta, in quanto adattandosi, si allarga in altezza al massimo del pulsante, risultando esteticamente brutta.

In questo caso ho utilizzato:

.button.product_type_variable.add_to_cart_button {
  background: url("https://www.greenhope.it/blog/wp-content/uploads/icone/th-list-solid.svg");
	background-color: #b3d66d;
  background-repeat: no-repeat;
  background-position: 50% 50%;
	
}

Ottenendo questo risultato: Vedi screen-shot

Quindi ricapitolando.. rimangono 3 “problemi da risolvere”:
1-Nascondere testo bottone
2-Cambiare colore a icona.svg
3-Ridimensionare icona.svg rispetto al bottone

Grazie a chiunque mi aiuterà e a chi ha già provato.

• Questa risposta è stata modificata 5 anni, 5 mesi fa da greenhope.