Risposte nei forum create

Stai visualizzando 4 risposte - dal 1 al 4 (di 4 totali)
  • Chi ha creato la discussione greenhope

    (@greenhope)

    Ok ragazzi.. risolto cancellando il prodotto e duplicandolo da uno con la stessa classe di trasporto. Forse un problema di database.

    Chi ha creato la discussione 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
    
    }
    Chi ha creato la discussione 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 7 anni, 2 mesi fa da greenhope.
    Chi ha creato la discussione greenhope

    (@greenhope)

    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 7 anni, 2 mesi fa da greenhope.
Stai visualizzando 4 risposte - dal 1 al 4 (di 4 totali)