Cum să schimbați culoarea de fundal pentru WooCommerce Checkout

Publicat: 2021-04-19

Schimbați culoarea de fundal pentru WooCommerce Checkout Căutați o modalitate de a schimba culoarea de fundal a formularelor pe pagina de finalizare a achiziției? Optimizarea paginii de finalizare a comenzii este o zonă adesea trecută cu vederea de către proprietarii de magazine WooCommerce.

WooCommerce continuă să fie popular pentru că este flexibil. Puteți adăuga propriul cod personalizat pentru a modifica diferite secțiuni de pe site-ul dvs.

Poate doriți să schimbați culoarea de fundal pe pagina de finalizare a achiziției. În mod implicit, WooCommerce nu are o soluție încorporată pentru a face acest lucru.

Puteți folosi un plugin, dar vă recomandăm să folosiți cod personalizat. Acest lucru se datorează faptului că vă pot umfla site-ul.

Schimbați culoarea de fundal pentru WooCommerce Checkout

Până la sfârșitul acestei postări, ar trebui să puteți schimba culoarea de fundal a formularelor din pagina de plată.

Cu toate acestea, este important să rețineți că site-ul dvs. ar trebui să includă un design uniform. Aceasta înseamnă că trebuie să schimbăm culoarea de fundal a formularelor din coșul de cumpărături și pagina de finalizare a comenzii.

De asemenea, vom stila câmpurile formularului, textul substituent și toate butoanele WooCommerce.

De asemenea, merită menționat faptul că am inclus cod pentru a personaliza caseta de plată, câmpul cuponului și meniurile drop-down pe pagina de finalizare a achiziției.

Pași pentru a schimba culoarea de fundal pentru WooCommerce Checkout

În această secțiune, vom folosi codul CSS pentru a personaliza coșul WooCommerce, finalizarea comenzii și paginile contului pentru a se potrivi cu restul site-ului dvs.

Iată cum este afișată pagina de finalizare a comenzii: pagina de checkout

Iată pașii pe care trebuie să-i urmezi:

  1. Conectați-vă la site-ul dvs. WordPress și accesați tabloul de bord ca utilizator administrator.
  2. Din meniul Tablou de bord, faceți clic pe Aspect > Personalizare .
  3. Aceasta va lansa panoul de personalizare din partea stângă a ecranului.
  4. Faceți clic pe linkul CSS suplimentar și adăugați următorul cod 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 */

}
  1. Dacă utilizați o temă precum Divi, faceți clic pe opțiuni de temă > casetă CSS personalizată pentru a adăuga codul.
  2. Nu uitați să faceți clic pe Acesta este rezultatul: publicapagina coșului

Concluzie

Este important să personalizați pagina de plată, deoarece acesta este ultimul pas înainte ca clienții să facă o achiziție. Cu toate acestea, modificările dvs. ar trebui să se potrivească cu designul site-ului dvs.

Articole similare

  1. Redirecționare WooCommerce după deconectare [Ghid final]
  2. Redirecționare WooCommerce după finalizare: Redirecționare către pagina personalizată de mulțumire
  3. Cum să editați detaliile de facturare Pagina WooCommerce Checkout
  4. Cum să configurați livrarea gratuită cu cheltuieli minime în WooCommerce
  5. Ghid rapid de optimizare a plăților pentru mobil WooCommerce
  6. Cum să adăugați monedă la WooCommerce [Monedă personalizată]
  7. Cum să obțineți detaliile comenzii după finalizarea comenzii în WooCommerce
  8. Cum să ascundeți, să schimbați sau să eliminați insigna WooCommerce On Sale
  9. Cum să configurați substituentul câmpului de checkout WooCommerce
  10. Cum să schimbați culorile de e-mail WooCommerce
  11. Cum să adăugați o clasă de navigare activă pe baza adresei URL
  12. Cum să utilizați do_shortcode în WordPress (PHP)
  13. Cum să adăugați căutare în pagina de magazin în WooCommerce
  14. Cum se creează o pagină de categorie personalizată în WooCommerce
  15. Cum să adăugați un produs în coș în mod programatic în WooCommerce
  16. Cum să ștergeți coșul la deconectare în WooCommerce
  17. Cum să verificați dacă utilizatorul este autentificat în WordPress
  18. Cum se creează un cupon în WooCommerce
  19. Cum să obțineți URL-ul de plată în WooCommerce
  20. Cum să schimbați simbolul monedei în WooCommerce