如何更改 WooCommerce 結帳背景顏色

已發表: 2021-04-19

更改 WooCommerce 結帳背景顏色您是否正在尋找一種方法來更改結帳頁面上表格的背景顏色？結帳頁面優化是 WooCommerce 店主經常忽視的領域。

WooCommerce 繼續流行，因為它很靈活。您可以添加自己的自定義代碼來修改站點上的不同部分。

您可能想要更改結帳頁面上的背景顏色。默認情況下，WooCommerce 沒有內置的解決方案來執行此操作。

您可以使用插件，但我們建議使用自定義代碼。這是因為它們可能會使您的網站膨脹。

更改 WooCommerce 結帳背景顏色

在這篇文章結束時，您應該能夠更改結帳頁面表單的背景顏色。

但是，重要的是要注意您的網站應該包含統一的設計。這意味著我們必須更改購物車和結帳頁面上表單的背景顏色。

我們還將設置表單字段、佔位符文本和所有 WooCommerce 按鈕的樣式。

還值得一提的是，我們已經包含了自定義付款框、優惠券字段和結帳頁面下拉菜單的代碼。

更改 WooCommerce 結帳背景顏色的步驟

在本節中，我們將使用 CSS 代碼自定義 WooCommerce 購物車、結帳和帳戶頁面，以匹配您網站的其餘部分。

這是結帳頁面的顯示方式：

以下是您需要遵循的步驟：

登錄您的 WordPress 站點並以管理員用戶身份訪問儀表板。
從儀表板菜單中，單擊外觀 > 自定義。
這將啟動屏幕左側的自定義面板。
單擊Additional CSS鏈接並添加以下 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 */

}

如果您使用像 Divi 這樣的主題，請單擊主題選項 > 自定義 CSS 框以添加代碼。
記得點擊這是結果：

結論

自定義結帳頁面很重要，因為這是客戶購買前的最後一步。但是，您的更改應與您網站的設計相匹配。

類似文章

註銷後 WooCommerce 重定向 [終極指南]
WooCommerce 結帳後重定向：重定向到自定義感謝頁面
如何編輯帳單詳細信息 WooCommerce 結帳頁面
如何在 WooCommerce 中以最低消費設置免費送貨
WooCommerce 移動結帳優化快速指南
如何將貨幣添加到 WooCommerce [自定義貨幣]
在 WooCommerce 中結帳後如何獲取訂單詳細信息
如何隱藏、更改或刪除 WooCommerce On Sale 徽章
如何設置 WooCommerce 結帳字段佔位符
如何更改 WooCommerce 電子郵件顏色
如何添加基於 URL 的活動導航類
如何在 WordPress (PHP) 中使用 do_shortcode
如何在 WooCommerce 中將搜索添加到商店頁面
如何在 WooCommerce 中創建自定義類別頁面
如何在 WooCommerce 中以編程方式將產品添加到購物車
如何在 WooCommerce 中註銷時清除購物車
如何檢查用戶是否登錄WordPress
如何在 WooCommerce 中創建優惠券
如何在 WooCommerce 中獲取結帳 URL
如何在 WooCommerce 中更改貨幣符號