Как изменить цвет фона оформления заказа WooCommerce

Опубликовано: 2021-04-19

Изменить цвет фона оформления заказа WooCommerce Вы ищете способ изменить цвет фона форм на странице оформления заказа? Оптимизация страницы оформления заказа — это область, которую владельцы магазинов WooCommerce часто упускают из виду.

WooCommerce по-прежнему популярен благодаря своей гибкости. Вы можете добавить свой собственный код для изменения различных разделов на вашем сайте.

Вы можете изменить цвет фона на странице оформления заказа. По умолчанию WooCommerce не имеет встроенного решения для этого.

Вы можете использовать плагин, но мы рекомендуем использовать собственный код. Это потому, что они могут раздуть ваш сайт.

Изменить цвет фона оформления заказа WooCommerce

К концу этого поста вы сможете изменить цвет фона форм на странице оформления заказа.

Однако важно отметить, что ваш сайт должен иметь единый дизайн. Это означает, что мы должны изменить цвет фона форм в корзине и на странице оформления заказа.

Мы также стилизуем поля формы, текст-заполнитель и все кнопки WooCommerce.

Также стоит отметить, что мы включили код для настройки поля оплаты, поля купона и раскрывающихся списков на странице оформления заказа.

Шаги по изменению цвета фона оформления заказа WooCommerce

В этом разделе мы будем использовать код CSS для настройки корзины WooCommerce, оформления заказа и страниц учетной записи, чтобы они соответствовали остальной части вашего сайта.

Вот как выглядит страница оформления заказа:

Вот шаги, которые вам необходимо выполнить:

Войдите на свой сайт WordPress и получите доступ к панели инструментов в качестве пользователя-администратора.
В меню «Панель инструментов» нажмите « Внешний вид» > «Настроить» .
Это запустит панель настройки в левой части экрана.
Нажмите на ссылку « Дополнительный 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

Вывод

Похожие статьи