Come cambiare il colore di sfondo della cassa di WooCommerce

Pubblicato: 2021-04-19

Cambia il colore di sfondo di WooCommerce Checkout Stai cercando un modo per cambiare il colore di sfondo dei moduli nella pagina di pagamento? L'ottimizzazione della pagina di pagamento è un'area spesso trascurata dai proprietari di negozi WooCommerce.

WooCommerce continua ad essere popolare perché è flessibile. Puoi aggiungere il tuo codice personalizzato per modificare diverse sezioni del tuo sito.

Potresti voler cambiare il colore di sfondo nella pagina di pagamento. Per impostazione predefinita, WooCommerce non ha una soluzione integrata per farlo.

Puoi utilizzare un plug-in, ma ti consigliamo di utilizzare un codice personalizzato. Questo perché potrebbero gonfiare il tuo sito.

Cambia il colore di sfondo di WooCommerce Checkout

Entro la fine di questo post, dovresti essere in grado di cambiare il colore di sfondo dei moduli della pagina di pagamento.

Tuttavia, è importante notare che il tuo sito dovrebbe includere un design uniforme. Ciò significa che dobbiamo cambiare il colore di sfondo dei moduli nel carrello e nella pagina di pagamento.

Modelleremo anche i campi del modulo, il testo segnaposto e tutti i pulsanti di WooCommerce.

Vale anche la pena ricordare che abbiamo incluso il codice per personalizzare la casella di pagamento, il campo del coupon e i menu a discesa nella pagina di pagamento.

Passaggi per cambiare il colore di sfondo del checkout di WooCommerce

In questa sezione, utilizzeremo il codice CSS per personalizzare il carrello, il checkout e le pagine dell'account di WooCommerce in modo che corrispondano al resto del tuo sito.

Ecco come viene visualizzata la pagina di pagamento:

Ecco i passaggi che devi seguire:

Accedi al tuo sito WordPress e accedi alla Dashboard come utente amministratore.
Dal menu Dashboard, fai clic su Aspetto > Personalizza .
Questo avvierà il pannello di personalizzazione sul lato sinistro dello schermo.
Fare clic sul collegamento CSS aggiuntivo e aggiungere il seguente codice CSS:

 


/*** MAIN FORMS BACKGROUND COLOR ***/

.woocommerce table.shop_table,

.woocommerce form.checkout_coupon,

.woocommerce form.login,

.woocommerce form.register,

#add_payment_method #payment,

.woocommerce-cart #payment,

.woocommerce-checkout #payment,

#customer_details,

h3#order_review_heading,

form.woocommerce-EditAccountForm.edit-account {

            border: 0 !important; /* you can add a border if you prefer */

            background: #f5f5f5; /* this is the main background color for all forms */

}

/*** FORM AND OTHER PADDING ***/

#customer_details,

form.woocommerce-EditAccountForm.edit-account,

h3#order_review_heading {

            padding: 30px 20px;

}

/*** ADJUST FORM ROUNDED EDGES ***/

#customer_details {

            border-top-left-radius: 5px;

            border-top-right-radius: 5px;

}

.woocommerce-checkout-review-order table.shop_table {

            border-top-left-radius: 0;

            border-top-right-radius: 0;

}

/*** FIELDS ON CHECKOUT, CART, ACCOUNT PAGES ***/

.woocommerce-account input,

.woocommerce-checkout input,

#order_comments.input-text {

            background-color: #f5f5f5 !important;

            color: black !important; /* not the placeholder, the text color when typed */

            border: 0; /* optional */

}

/*** COUPON FIELD ONLY ***/

.woocommerce-page #coupon_code.input-text { /* if you want your coupon different from other fields */

            background-color: black !important;

            color: blue !important;

            font-size: 16px !important; /* if you don't want the default giant font on the coupon field */

}

/*** PLACEHOLDER TEXT ON ALL WOO PAGES ***/

.woocommerce-page ::-webkit-input-placeholder {

    color: red !important;

}

.woocommerce-page :-ms-input-placeholder {

    color: red !important;

}

.woocommerce-page ::-moz-placeholder {

    color: red !important;

}

.woocommerce-page :-moz-placeholder { /* this isn't the same as above don't delete */

    color: red !important;

}

/*** THIS COMPENSATES FOR SHIP TO DIFF ADDRESS FIELD NOT ALIGNING ***/

h3#ship-to-different-address {

            margin-top: -3px;

}

/*** ALL WOO BUTTONS ***/

.woocommerce button.button.alt,

.woocommerce-page button.button.alt,

.woocommerce a.button,

.woocommerce-page a.button,

.woocommerce button.button,

.woocommerce-page button.button {

            text-transform: capitalize !important;

            background: #ffa500 !important;

            color: #222 !important;

}

.woocommerce button.button.alt:hover,

.woocommerce-page button.button.alt:hover,

.woocommerce a.button.alt:hover,

.woocommerce-page a.button.alt:hover,

.woocommerce a.button:hover,

.woocommerce-page a.button:hover,

.woocommerce button.button:hover,

.woocommerce-page button.button:hover {

            background: #00adad !important;

            color: #fff !important;

}

/*** PAYMENT BOX ON CHECKOUT ***/

#add_payment_method #payment div.payment_box,

.woocommerce-cart #payment div.payment_box,

.woocommerce-checkout #payment div.payment_box {

            background-color: #15bf86;

            color: #fff;

}

#add_payment_method #payment div.payment_box::before,

.woocommerce-cart #payment div.payment_box::before,

.woocommerce-checkout #payment div.payment_box::before {

            border-bottom-color: #15bf86;

}

#add_payment_method #payment ul.payment_methods,

.woocommerce-cart #payment ul.payment_methods,

.woocommerce-checkout #payment ul.payment_methods {

            border-bottom: 0;

}

/*** BORDERS AND TABLES ***/

.woocommerce form .form-row input.input-text,

.woocommerce form .form-row textarea {

            border: 0;

}

.woocommerce table.shop_table td,

#add_payment_method .cart-collaterals .cart_totals tr td,

#add_payment_method .cart-collaterals .cart_totals tr th,

.woocommerce-cart .cart-collaterals .cart_totals tr td,

.woocommerce-cart .cart-collaterals .cart_totals tr th,

.woocommerce-checkout .cart-collaterals .cart_totals tr td,

.woocommerce-checkout .cart-collaterals .cart_totals tr th,

.woocommerce table.shop_table tbody th,

.woocommerce table.shop_table tfoot td,

.woocommerce table.shop_table tfoot th,

.woocommerce-checkout #main-content .cart-subtotal td {

            border-top: 2px solid #fff;

}

.woocommerce table.shop_table_responsive tr:nth-child(2n) td,

.woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {

            background: transparent;

}

.woocommerce-checkout #content-area table th,

.woocommerce-checkout #content-area table td {

            padding-left: 20px;

}

.woocommerce form .form-row input.input-text,

.woocommerce form .form-row textarea {

            font-size: 18px;

}

/*** EXISTING ACCOUNT / ERROR BOXES BACKGROUND COLOR ***/

.woocommerce-message,

.woocommerce-error,

.woocommerce-info {

            background: #b33f62 !important;

}

/*** ORDER NOTES ON CHECKOUT ***/

.woocommerce-checkout .woocommerce form .form-row textarea {

            height: 150px; /* height of optional notes box */

}

/*** STATE DROPDOWN SELECT COLOR ***/

.select2-container--default .select2-results__option--highlighted[aria-selected],

.select2-container--default .select2-results__option--highlighted[data-selected] {

            background: #ffa500;

}

/*** QUANTITY BOX ***/

.woocommerce #content .quantity input.qty,

.woocommerce .quantity input.qty,

.woocommerce-cart table.cart td.actions .coupon .input-text,

.woocommerce-page #content .quantity input.qty,

.woocommerce-page .quantity input.qty {

            color: #fff !important;

            background: #222 !important;

            height: 46px; /* you may need to change this based on your font size */

}

Se stai utilizzando un tema come Divi, fai clic su opzioni del tema > casella CSS personalizzata per aggiungere il codice.
Ricordati di cliccare su Questo è il risultato:

Conclusione

È importante personalizzare la pagina di pagamento, poiché questo è l'ultimo passaggio prima che i clienti effettuino un acquisto. Tuttavia, le tue modifiche dovrebbero corrispondere al design del tuo sito.

Come cambiare il colore di sfondo della cassa di WooCommerce

Cambia il colore di sfondo di WooCommerce Checkout

Passaggi per cambiare il colore di sfondo del checkout di WooCommerce

Conclusione

Articoli simili