Pergunta sobre o WordPress Booster para WooCommerce: Alterar a cor do botão

Um usuário perguntou ?

Quero alterar a cor dos botões, como o botão Fazer pedido. Como posso fazer isso?

<button type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="Place order" data-value="Place order">Place order</button>

Este tópico foi modificado 2 anos, 8 meses atrás por. lançador de tópicos

(@miezz81)

2 anos, 8 meses atrás

Eu fiz isso com CSS adicional no meu filho, mas seria bom fazer isso em um plugin como backup.

Pense nisso como querer a próxima versão.

(@rokasjan)

2 anos, 8 meses atrás

Olá Miezz88,

Para alterar a cor dos botões, você precisa adicionar CSS personalizado no módulo “CSS personalizado”. Vá para configurações de booster > E-mails e microfones. > Ative “CSS personalizado”. Em seguida, vá para Configurações e em “CSS personalizado – Front End (Clientes)” cole isto:

button, html input[type="button"], input[type="submit"], .button, .button:visited {
    color: #ffffff;
    background-color: #0000FF;
}

button:hover, html input[type="button"]:hover,input[type="submit"]:hover, .button:hover, button:focus, html input[type="button"]:focus, input[type="submit"]:focus, .button:focus {
    color: #ffffff;
    background-color: #00FF00;
}

O atributo “color” altera a cor do texto do botão (linhas 2 e 8) o atributo “cor de fundo” altera a cor de fundo do botão (linhas 3 e 9)

Os primeiros atributos “cor” e “cor de fundo” permitem personalizar o estilo do botão como ele é exibido ao carregar o site, o segundo recurso permite como o botão é exibido quando o mouse passa sobre ele.

Os nomes das cores devem ser escritos em códigos de cores hexadecimais. Para personalizar outros botões, copie o código e substitua o tipo de entrada “enviar” por outros tipos de botão.

[ Signature deleted ]

Esta resposta foi modificada há 2 anos e 7 meses. lançador de tópicos

(@miezz81)

2 anos, 8 meses atrás

Este código parece não fazer nada. Não quero alterar todos os botões possíveis, apenas estes três:

Adicionar ao carrinho Prossiga para o checkout local do pedido

Como posso fazer isso?

(@rokasjan)

2 anos, 8 meses atrás

Oi de novo,

Você pode especificar de qual classe deseja alterar o estilo. Existe um botão adicionar ao cartão na classe “single_add_to_cart_button” (você pode ver isso clicando com o botão direito nele e selecionando a função de navegação), então o código para alterar as cores desse botão seria

.single_add_to_cart_button.button{
	background-color: #00FF00;
	color: #FFFFFF;
}

Se você quiser alterar a cor dependendo se o usuário está revisando, o código seria

.single_add_to_cart_button.button:hover{
	background-color: #FF0000;
	color: #FFFFFF;
}

.single_add_to_cart_button.button{
	background-color: #00FF00;
	color: #FFFFFF;
}

O código completo para os três botões é:

.single_add_to_cart_button.button:hover{
	background-color: #FF0000;
	color: #FFFFFF;
}

.single_add_to_cart_button.button{
	background-color: #00FF00;
	color: #FFFFFF;
}

.button#place_order.button:hover{
	background-color: #FF0000;
	color: #FFFFFF;
}

.button#place_order.button{
	background-color: #00FF00;
	color: #FFFFFF;
}

.checkout-button.button:hover{
	background-color: #FF0000;
	color: #FFFFFF;
}

.checkout-button.button{
	background-color: #00FF00;
	color: #FFFFFF;
}

Se alguns dos botões não forem alterados, o CSS modifica os nomes das classes dos botões de acordo.

lançador de tópicos

(@miezz81)

2 anos, 8 meses atrás

Obrigado pela sua resposta. Depois de alguns ajustes, o código funcionou:

.woocommerce .product .single_add_to_cart_button.button{
	background-color: #27cda5;
	color: #FFFFFF;
}

Caso encerrado, obrigado novamente.