Supporto » Funzionalità = Plugin » Woocommerce – sostituire bottoni aggiungi al carrello con una immagine

  • Risolto greenhope

    (@greenhope)


    Ciao a tutti dopo due settimane che cerco in tutte le lingue, inutilmente, ho deciso di postare una richiesta qui.

    In pratica cerco il modo per poter sostituire i bottoni “aggiungi al carrello” nel woocommerce con un’immagine.
    In parte ho risolto con un plugin: WooCommerce Custom Add To Cart Button
    che però non funziona con i prodotti variabili e non funziona nemmeno con gli altri due plugin che ho installato:
    YITH WooCommerce Gift Cards
    YITH WooCommerce Quick View

    Ho provato ogni tipo di codice css in PCA/ASPETTO/MODIFICA CSS ma quando provo ad inserire un’immagine, ricevo errore.

    Premetto che non ho temi child e non so nemmeno come installarli (sebbene abbia provato a leggere qualche guida), perciò se fosse possibile intervenire tramite i css o altro plugin sarebbe fantastico.

    Grazie in anticipo a chiunque mi verrà in aiuto.

    Pagina di aiuto: [devi essere connesso per vedere il link]

Stai vedendo 5 repliche - dal 1 al 5 (di 5 totali)
  • Ciao Greenhope,

    Grazie per aver aperto una discussione sul forum WordPress. Sono Matteo.

    Riguardo il problema, credo non ci sia bisogno di scaricare il tuo plugin “WooCommerce Custom Add To Cart Button”, ma basta inserire il codice in Aspetto -> Personalizza -> CSS aggiuntivo questo codice:

    .woocommerce .single_add_to_cart_button {
        background: url('https://nomesito/wp-content/uploads/cartella_dove_si trova_il_file/nome_immagine.png') no-repeat;
        width: 270px;
        height: 270px;
    }

    Devi cambiare il link e la dimensione dell’immagine.

    Per qualsiasi cosa puoi contattare Yith nel forum dedicato dei plugin in questione oppure puoi rispondere a questo Topic per qualsiasi altra informazione.

    Un saluto,
    Matteo S.

    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 mesi, 1 settimana fa da  greenhope.
    Askmagic

    (@askmagic)

    Buongiorno,

    il problema è il percorso dell’immagine, ho controllato questo path (https://www.greenhope.it/blog/wp-content/uploads/greenhopecart.png‘) e l’immagine non c’è allego screen.
    Clicca qui per vederlo.

    Ti consiglio di scrivere il percorso esatto comprensivo anche di sotto directory.

    greenhope

    (@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 mesi fa da  greenhope.
    greenhope

    (@greenhope)

    Ok ragazzi ce l’ho fatta.. così funziona:

    .button.product_type_variable.add_to_cart_button {
      display: inline-block;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      cursor: pointer;
      padding: 9px 5px;
      border: none;
      font: normal 16px/normal "Times New Roman", Times, serif;
      color: rgba(255,255,255,0);
      -o-text-overflow: clip;
      text-overflow: clip;
      background: url("https://www.greenhope.it/blog/wp-content/uploads/icone/th-list-solid.svg"), hsl(80, 56%, 63%);
      background-repeat: no-repeat;
      background-position: 50% 50%;
      -webkit-background-origin: padding-box;
      background-origin: padding-box;
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
      -webkit-background-size: 15px auto;
      background-size: 15px auto;
    }
    
    .button.product_type_variable.add_to_cart_button:hover {
    	display: inline-block;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      cursor: pointer;
      padding: 9px 5px;
      border: none;
      font: normal 16px/normal "Times New Roman", Times, serif;
      color: rgba(255,255,255,0);
      -o-text-overflow: clip;
      text-overflow: clip;
      background: url("https://www.greenhope.it/blog/wp-content/uploads/icone/th-list-solid.svg"), #6f9326;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      -webkit-background-origin: padding-box;
      background-origin: padding-box;
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
      -webkit-background-size: 15px auto;
      background-size: 15px auto
    
    }
Stai vedendo 5 repliche - dal 1 al 5 (di 5 totali)
  • Devi essere collegato per rispondere a questo topic.