Como alterar a cor de fundo do WooCommerce Checkout
Publicados: 2021-04-19Você 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:
Aqui estão os passos que você precisa seguir:
- Faça login no seu site WordPress e acesse o Dashboard como usuário administrador.
- No menu Painel, clique em Aparência > Personalizar .
- Isso iniciará o painel de personalização no lado esquerdo da tela.
- 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 */ }
- Se você estiver usando um tema como o Divi, clique em opções de tema > caixa CSS personalizada para adicionar o código.
- Lembre-se de clicar em Este é o resultado:
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
- Redirecionamento do WooCommerce após o logout [Guia definitivo]
- Redirecionamento do WooCommerce após o checkout: Redirecionar para a página de agradecimento personalizada
- Como editar os detalhes de cobrança da página de checkout do WooCommerce
- Como configurar frete grátis com gasto mínimo no WooCommerce
- Guia rápido de otimização de checkout móvel do WooCommerce
- Como adicionar moeda ao WooCommerce [moeda personalizada]
- Como obter detalhes do pedido após o checkout no WooCommerce
- Como ocultar, alterar ou remover o selo de venda WooCommerce
- Como configurar o espaço reservado do campo de checkout do WooCommerce
- Como alterar as cores do e-mail WooCommerce
- Como adicionar classe de navegação ativa com base na URL
- Como usar do_shortcode no WordPress (PHP)
- Como adicionar pesquisa à página de compras no WooCommerce
- Como criar uma página de categoria personalizada no WooCommerce
- Como adicionar produtos ao carrinho programaticamente no WooCommerce
- Como limpar o carrinho ao sair no WooCommerce
- Como verificar se o usuário está logado no WordPress
- Como criar cupom no WooCommerce
- Como obter o URL de checkout no WooCommerce
- Como alterar o símbolo da moeda no WooCommerce