Como alterar a cor de fundo do WooCommerce Checkout

Publicados: 2021-04-19

Alterar a cor de fundo do WooCommerce Checkout Você está procurando uma maneira de alterar a cor de fundo dos formulários na página de checkout? A otimização da página de checkout é uma área frequentemente negligenciada pelos donos de lojas WooCommerce.

WooCommerce continua a ser popular porque é flexível. Você pode adicionar seu próprio código personalizado para modificar diferentes seções em seu site.

Você pode querer alterar a cor de fundo na página de checkout. Por padrão, o WooCommerce não possui uma solução integrada para fazer isso.

Você pode usar um plug-in, mas recomendamos o uso de código personalizado. Isso ocorre porque eles podem inchar seu site.

Alterar a cor de fundo do WooCommerce Checkout

No final desta postagem, você poderá alterar a cor de fundo dos formulários da página de checkout.

No entanto, é importante observar que seu site deve incluir um design uniforme. Isso significa que temos que alterar a cor de fundo dos formulários no carrinho e na página de checkout.

Também estilizaremos os campos do formulário, o texto do espaço reservado e todos os botões do WooCommerce.

Também vale a pena mencionar que incluímos código para personalizar a caixa de pagamento, campo de cupom e menus suspensos na página de checkout.

Etapas para alterar a cor de fundo do WooCommerce Checkout

Nesta seção, usaremos o código CSS para personalizar o carrinho, o checkout e as páginas da conta do WooCommerce para corresponder ao restante do seu site.

É assim que a página de checkout é exibida: página de checkout

Aqui estão os passos que você precisa seguir:

  1. Faça login no seu site WordPress e acesse o Dashboard como usuário administrador.
  2. No menu Painel, clique em Aparência > Personalizar .
  3. Isso iniciará o painel de personalização no lado esquerdo da tela.
  4. Clique no link CSS adicional e adicione o seguinte código 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. Se você estiver usando um tema como o Divi, clique em opções de tema > caixa CSS personalizada para adicionar o código.
  2. Lembre-se de clicar em Este é o resultado: publicarpágina do carrinho

Conclusão

É importante personalizar a página de checkout, pois esta é a última etapa antes que os clientes façam uma compra. No entanto, suas alterações devem corresponder ao design do seu site.

Artigos semelhantes

  1. Redirecionamento do WooCommerce após o logout [Guia definitivo]
  2. Redirecionamento do WooCommerce após o checkout: Redirecionar para a página de agradecimento personalizada
  3. Como editar os detalhes de cobrança da página de checkout do WooCommerce
  4. Como configurar frete grátis com gasto mínimo no WooCommerce
  5. Guia rápido de otimização de checkout móvel do WooCommerce
  6. Como adicionar moeda ao WooCommerce [moeda personalizada]
  7. Como obter detalhes do pedido após o checkout no WooCommerce
  8. Como ocultar, alterar ou remover o selo de venda WooCommerce
  9. Como configurar o espaço reservado do campo de checkout do WooCommerce
  10. Como alterar as cores do e-mail WooCommerce
  11. Como adicionar classe de navegação ativa com base na URL
  12. Como usar do_shortcode no WordPress (PHP)
  13. Como adicionar pesquisa à página de compras no WooCommerce
  14. Como criar uma página de categoria personalizada no WooCommerce
  15. Como adicionar produtos ao carrinho programaticamente no WooCommerce
  16. Como limpar o carrinho ao sair no WooCommerce
  17. Como verificar se o usuário está logado no WordPress
  18. Como criar cupom no WooCommerce
  19. Como obter o URL de checkout no WooCommerce
  20. Como alterar o símbolo da moeda no WooCommerce