如何更改 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 中更改货币符号