Personalizzazione dei pulsanti nello shop MyCOMMERCE

Per modificare il colore o il carattere dei pulsanti (button) nel suo shop MyCOMMERCE occorre modificare i codici CSS.

Consiglio: legga il seguente articolo prima di iniziare: Aggiunta di codici CSS al suo shop

In questo articolo:

Modifica dei colori dei pulsanti più grandi
Modifica dei colori dei pulsanti più piccoli
Pulsanti «Acquista ora»

Modifica dei colori dei pulsanti più grandi

Un esempio di pulsanti di grandi dimensioni nel suo shop sono i tasti «Aggiungi al carrello», «Procedi», «Vai alla cassa», «Effettua un ordine». Può modificare tutti questi pulsanti con un unico codice oppure modificarli singolarmente.

Utilizzi il seguente codice CSS per aggiornare tutti i pulsanti più grandi in una sola volta. Negli esempi, può cambiare "red" e "black" in un qualsiasi colore.

/*Button color*/
.ec-size .ec-store .form-control--primary .form-control__button 
{ background-color: red;}

/*Button color on hover*/
.ec-size .ec-store .form-control--primary .form-control__button:hover {
background: #F0F8FF;
}

/*Text color*/
.ec-size .ec-store .form-control--primary .form-control__button {
color: black;
}

/*Text color on hover*/
.ec-size .ec-store .form-control--primary .form-control__button:hover {
color: black;
}
Kopieren

Ecco come modificare i colori dei singoli pulsanti:

Aggiungi al carrello

Sostituisca #FFFFFFFF (bianco) e "#000000" (nero) con i codici dei colori che desidera visualizzare nel suo shop.

/*Button color*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button {
background: #FFA500;
}

/*Button color on hover*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button:hover {
background: #FFA500;
}

/*Text color*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button {
color: #000000;
}

/*Text color on hover*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button:hover {
color: #000000;
}
Kopieren

Vai alla cassa

Sostituisca #FFFFFFFF (bianco) e "#000000"(nero) con i codici dei colori che desidera visualizzare nel suo shop.

/*Button color*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button  {
background-color: #FFFFFF;
}

/*Button color on hover*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button:hover {
background-color: #FFFFFF;
}

/*Text color*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button {
color: #000000;
}

/*Text color on hover*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button:hover {
color: #000000;
}Kopieren

Procedi

Sostituisca #FFFFFFFF (bianco) e "#000000"(nero) con i codici dei colori che desidera visualizzare nel suo shop.

/*Button color*/
button.ecwid-btn--primary.ecwid-btn--continue {
background: #FFFFFF;
}

/*Button color on hover*/
button.ecwid-btn--primary.ecwid-btn--continue:hover {
background: #FFFFFF;
}

/*Text color*/
button.ecwid-btn--primary.ecwid-btn--continue {
color: #000000;
}

/*Text color on hover*/
button.ecwid-btn--primary.ecwid-btn--continue:hover {
color: #000000;
}Kopieren

Effettua un ordine

Sostituisca #FFFFFFFF (bianco) e "#000000" (nero) con i codici dei colori che desidera visualizzare nel suo shop.

/*Button color*/
button.ecwid-btn--primary.ecwid-btn--placeOrder {
background: #FFFFFF;
}

/*Button color on hover*/
button.ecwid-btn--primary.ecwid-btn--placeOrder:hover {
background: #FFFFFF;
}

/*Text color*/
button.ecwid-btn--primary.ecwid-btn--placeOrder {
color: #000000;
}

/*Text color on hover*/
button.ecwid-btn--primary.ecwid-btn--placeOrder:hover {
color: #000000;
}Kopieren

Modifica dei colori dei pulsanti più piccoli

Può modificare anche i pulsanti più piccoli o secondari, quali «Aggiungi altro», «Vai alla cassa», «Continua gli acquisti nella pagina del carrello», «Svuota carrello».

Ecco il codice per modificare tutti i pulsanti in una volta sola.

/*Button color*/
.ec-size .ec-store .form-control--secondary .form-control__button {
background: #FFFFFF;
}

/*Button color on hover*/
.ec-size .ec-store .form-control--secondary .form-control__button:hover {
background: #FFFFFF;
}

/*Text color*/
.ec-size .ec-store .form-control--secondary .form-control__button {
color: #000000;
}

/*Text color on hover*/
.ec-size .ec-store .form-control--secondary .form-control__button:hover {
color: #000000;
}Kopieren

Ecco come modificare i pulsanti singolarmente:

Aggiungi altro

Sostituisca # FFA500 (arancione) e "#000000" (nero) con i codici dei colori che desidera visualizzare nel suo shop.

/*Button color*/
.ec-size .ec-store .form-control--secondary .form-control__button {
background: #FFA500;
}

/*Button color on hover*/
.ec-size .ec-store .form-control--secondary .form-control__button:hover {
background: #FFA500;
}

/*Text color*/
.ec-size .ec-store .form-control--secondary .form-control__button {
color: #000000;
}

/*Text color on hover*/
.ec-size .ec-store .form-control--secondary .form-control__button:hover {
color: #000000;
}Kopieren

Vai alla cassa

Sostituisca # FFA500 (arancione) e "#000000" (nero) con i codici dei colori che desidera visualizzare nel suo shop.

/*Button color*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button {
background: #FFA500;
}

/*Button color on hover*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button:hover {
background: #FFA500;
}

/*Text color*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button {
color: #000000;
}

/*Text color on hover*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button:hover {
color: #000000;
}Kopieren

Continua gli acquisti nella pagina del carrello

Sostituisca # FFA500 (arancione) e "#000000" (nero) con i codici dei colori che desidera visualizzare nel suo shop.

/*Button color*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--continueShopping {
background: #FFA500;
}

/*Button color on hover*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--continueShopping:hover {
background: #FFA500;
}

/*Text color*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--continueShopping {
color: #000000;
}

/*Text color on hover*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--continueShopping:hover {
color: #000000;
}Kopieren

Svuota carrello

Sostituisca # FFA500 (arancione) e "#000000" (nero) con i codici dei colori che desidera visualizzare nel suo shop.

/*Button color*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--clearBag {
background: #FFA500;
}

/*Button color on hover*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--clearBag:hover {
background: #FFA500;
}

/*Text color*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--clearBag {
color: #000000;
}

/*Text color on hover*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--clearBag:hover {
color: #000000;
}Kopieren

Pulsanti Acquista ora

Può modificare i pulsanti «Acquista ora» nel suo shop MyCOMMERCE. Questi pulsanti vengono visualizzati nelle pagine delle categorie.

/*Button color*/
.ec-size .ec-store .form-control--small .form-control__button {
background: #FFFAFA;
}

/*Text color*/
.ec-size .ec-store .form-control--small .form-control__button {
color: #000000;
}Kopieren

Consiglio: può attivare questi pulsanti nel suo shop accedendo al suo Account MyCOMMERCE → Impostazioni → Generale → Carrello e Cassa e abilitando la visualizzazione del pulsante «Acquista ora» nelle pagine con gli elenchi dei prodotti.