So ändern Sie die Hintergrundfarbe der WooCommerce-Kasse

Veröffentlicht: 2021-04-19

Ändern Sie die Hintergrundfarbe der WooCommerce-Kasse Suchen Sie nach einer Möglichkeit, die Hintergrundfarbe von Formularen auf der Checkout-Seite zu ändern? Die Optimierung der Checkout-Seite ist ein Bereich, der von WooCommerce-Shop-Besitzern häufig übersehen wird.

WooCommerce ist weiterhin beliebt, weil es flexibel ist. Sie können Ihren eigenen benutzerdefinierten Code hinzufügen, um verschiedene Abschnitte auf Ihrer Website zu ändern.

Möglicherweise möchten Sie die Hintergrundfarbe auf der Checkout-Seite ändern. Standardmäßig hat WooCommerce dafür keine integrierte Lösung.

Sie können ein Plugin verwenden, aber wir empfehlen die Verwendung von benutzerdefiniertem Code. Dies liegt daran, dass sie Ihre Website aufblähen können.

Ändern Sie die Hintergrundfarbe der WooCommerce-Kasse

Am Ende dieses Beitrags sollten Sie in der Lage sein, die Hintergrundfarbe der Checkout-Seitenformulare zu ändern.

Es ist jedoch wichtig zu beachten, dass Ihre Website ein einheitliches Design aufweisen sollte. Das bedeutet, dass wir die Hintergrundfarbe der Formulare auf der Warenkorb- und Checkout-Seite ändern müssen.

Wir gestalten auch die Formularfelder, den Platzhaltertext und alle WooCommerce-Schaltflächen.

Erwähnenswert ist auch, dass wir Code zum Anpassen des Zahlungsfelds, des Gutscheinfelds und der Dropdown-Menüs auf der Checkout-Seite eingefügt haben.

Schritte zum Ändern der Hintergrundfarbe der WooCommerce-Kasse

In diesem Abschnitt verwenden wir CSS-Code, um den Warenkorb, die Kasse und die Kontoseiten von WooCommerce an den Rest Ihrer Website anzupassen.

So wird die Checkout-Seite angezeigt: Kassenseite

Hier sind die Schritte, die Sie befolgen müssen:

Melden Sie sich bei Ihrer WordPress-Site an und greifen Sie als Admin-Benutzer auf das Dashboard zu.
Klicken Sie im Dashboard-Menü auf Darstellung > Anpassen .
Dadurch wird das Anpassungsfenster auf der linken Seite des Bildschirms gestartet.
Klicken Sie auf den Link Zusätzliches CSS und fügen Sie den folgenden CSS-Code hinzu:

 


/*** 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 */

}

Wenn Sie ein Design wie Divi verwenden, klicken Sie auf Designoptionen > Benutzerdefiniertes CSS-Feld , um den Code hinzuzufügen.
Denken Sie daran, auf Dies ist das Ergebnis zu klicken:

Fazit

Es ist wichtig, die Checkout-Seite anzupassen, da dies der letzte Schritt ist, bevor Kunden einen Kauf tätigen. Ihre Änderungen sollten jedoch mit dem Design Ihrer Website übereinstimmen.

So ändern Sie die Hintergrundfarbe der WooCommerce-Kasse

Ändern Sie die Hintergrundfarbe der WooCommerce-Kasse

Schritte zum Ändern der Hintergrundfarbe der WooCommerce-Kasse

Fazit

Ähnliche Artikel