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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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;
}

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.