Como mudar a cor e outros elementos CSS dos botões do WooCommerce

Para alterar a cor dos botões do WooCommerce, precisaremos alterar/substituir o estilo CSS padrão dos botões. Para fazer isso, precisaremos adicionar css personalizado ao tema do WordPress.

Existem duas maneiras de fazer isso:

1. Adicionando o CSS customizado no style.css do tema
2. Usando algum plugin para injetar o css personalizado nas páginas da web.

Quase todos os temas possui um módulo para isso, mas caso não tenha, pode-se usar este plugin para injetar o css nas páginas do site WooCommerce > CSS personalizado simples

• Etapa 1: Instale o plug-in em seu site e acesse o plug-in.
• Etapa 2: Vai em Aparência > Simple Custom CSS

Coloque o seguinte css na área de texto e clique em “Update Custom Css”.

.woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover {
    background: red !important;
    background-color: red !important;
    color: white !important;
    text-shadow: transparent !important;
    box-shadow: none;
    border-color: #ca0606 !important;
}

.woocommerce #content input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce-page #content input.button:hover, .woocommerce-page #respond input#submit:hover, .woocommerce-page a.button:hover, .woocommerce-page button.button:hover, .woocommerce-page input.button:hover {
    background: red !important;
    background-color: red !important;
    color: white !important;
    text-shadow: transparent !important;
    box-shadow: none;
    border-color: #ca0606 !important;
    text-transform: none !important;
}

.woocommerce #content input.button, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-page #content input.button, .woocommerce-page #respond input#submit, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button {
    background: red !important;
    color: white !important;
    text-shadow: transparent !important;
    border-color: #ca0606 !important;
    text-transform: none !important;
}

.woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover {
    background: red !important;
    box-shadow: none;
    text-shadow: transparent !important;
    color: white !important;
    border-color: #ca0606 !important;
    text-transform: none !important;
}

Vá para a página do produto WooCommerce ou página do carrinho, você verá os botões nas cores vermelha. Para alterar a cor dos botões, por exemplo, substitua o “backgroud: red !important” pela cor desejada. Clique em atualizar e estará pronto e pronto para uso.