Para alterar a cor dos botões do WooCommerce, precisamos alterar ou substituir o arquivo de botões style.css padrão. Para fazer isso, precisaremos adicionar um código CSS personalizado para o nosso tema WordPress da criança.

Existem duas maneiras de fazer isso:

  • Adicione um CSS personalizado ao arquivo style.css do tema filho
  • Use alguns plug-ins para injetar código CSS personalizado em suas páginas da web.

Passo 1: Instale o plugin no WordPress Simples CSS personalizado e ativá-lo

Vamos usar um WordPress Plugin para injetar o código CSS nas páginas de um Loja Online WooCommerce. Você pode baixar o plugin: Custom CSS simples

Você pode ler nosso tutorial sobre instalação e ativação do plugin WordPress.

Depois de ativar o plugin, um novo submenu será adicionado ao menu apparence :

CSS Menu personalizado WordPress Plugin

Acessar esta seção o levará a uma interface com uma caixa de texto onde você pode inserir o código CSS personalizado.

Interface do WordPress simples plugin CSS personalizado

Coloque o seguinte CSS na caixa de texto e clique em " Atualização CSS personalizado"

.woocommerce #content input.button.alt: hover, .woocommerce #respond entrada # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button. alt: hover, .woocommerce páginas #content input.button.alt: hover, a entrada .woocommerce páginas #respond # submit.alt: hover, .woocommerce páginas a.button.alt: hover, botão .woocommerce-page. button.alt: hover, .woocommerce páginas input.button.alt: hover {background: significativa vermelho; background-color: red importante; Cor: Branca importante; text-shadow: transparente importante; box-shadow: none; border-color: #ca0606 importante; } .woocommerce #content Input.button: hover, .woocommerce #respond entrada # apresentar: hover, .woocommerce a.button: hover, .woocommerce button.button: hover, .woocommerce input.button: hover, .woocommerce-page # input.button feliz: hover, a entrada .woocommerce páginas #respond # apresentar: hover, .woocommerce páginas a.button: hover, .woocommerce páginas button.button: hover, .woocommerce páginas input.button: hover {background : vermelho importante; background-color: red importante; Cor: Branca importante; text-shadow: transparente importante; box-shadow: none; border-color: #ca0606 importante; } .woocommerce #content Input.button, .woocommerce #respond entrada # apresentar, a.button .woocommerce, button.button .woocommerce, input.button .woocommerce, .woocommerce páginas #content input.button, .woocommerce-page # # enviar entrada responde, a.button .woocommerce páginas, .woocommerce páginas button.button, .woocommerce páginas input.button {background: significativa vermelho; Cor: Branca importante; text-shadow: transparente importante; border-color: #ca0606 importante; } .woocommerce #content Input.button.alt: hover, .woocommerce #respond entrada # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button .ALT: hover, .woocommerce páginas #content input.button.alt: hover, a entrada .woocommerce páginas #respond # submit.alt: hover, .woocommerce páginas a.button.alt: hover, botão .woocommerce-page .button.alt: hover, .woocommerce páginas input.button.alt: hover {background: significativa vermelho; box-shadow: none; text-shadow: transparente importante; Cor: Branca importante; border-color: #ca0606 importante; }

Agora você pode acessar sua loja on-line e perceberá que os botões realmente mudaram de cor.

Para personalizar a cor dos botões para finalmente ter a aparência desejada,

Substituir propriedade " backgroud: importante vermelho! Por um cor de sua escolha. Atualize os códigos e acesse sua loja online novamente. Na verdade, usando o estilo que acabamos de fornecer, você poderá alterar completamente a estrutura dos botões.

Com um pouco de pesquisa, você poderá criar botões exclusivos com um estilo que combina com seu tema WordPress (especialmente se este último não for compatível com WooCommerce).

botão Adicionar ao carrinho WordPress

Para o exemplo a seguir, você pode usar o seguinte código CSS.

.woocommerce #content input.button, .woocommerce #respond entrada # apresentar, a.button .woocommerce, button.button .woocommerce, input.button .woocommerce, .woocommerce páginas #content input.button, #respond .woocommerce páginas # enviar entrada, .woocommerce páginas a.button, .woocommerce páginas button.button, .woocommerce páginas input.button {background-color: #6fba26; padding: 10px; posição: relativa; font-family: 'Open Sans', sans-serif; fonte de tamanho: 12px; text-decoration: none; Cor: #fff; imagem de fundo: linear de gradiente (inferior, RGB (100,170,30) 0% RGB (129,212,51) 100%); box-shadow: inset 0px 1px 0px #7F8EF1, 0px 6px 0px #0D496F; fronteira de raio: 5px; } .woocommerce #content input.button.alt: hover, .woocommerce #respond entrada # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button .ALT: hover, .woocommerce páginas #content input.button.alt: hover, entrada .woocommerce páginas #respond # submit.alt: hover, .woocommerce páginas a.button.alt: hover, botão .woocommerce páginas .button.alt: hover, .woocommerce páginas input.button.alt: hover {top: 7px; imagem de fundo: linear de gradiente (inferior, RGB (100,170,30) 100% RGB (129,212,51) 0%); box-shadow: inset 0px 1px 0px #0D496F, inserir 0px -1px 0px #0D496F; Cor: #156785; text-shadow: 0px 1px 1px rgba (255,255,255,0.3); fundo: RGB (44,160,202); }

Para aqueles que desejam otimizar o desempenho de sua loja on-line, seja em termos de conversão ou venda de produtos,

Também oferecemos plugins WordPress 3 premium projetados para esta tarefa.

1. WooCommerce Recover Abandoned Cart

seus clientes muitas vezes enchem suas cestas e as deixam: graças a WooCommerce Recuperar carrinho Abandoned você poderá contatá-los, lembrá-los do que compraram e convidá-los a realizar suas ações.

Recupere o carrinho abandonado para woocommerce

Defina o intervalo de tempo entre o momento em que um carrinho é abandonado e um lembrete personalizado por e-mail é enviado ao seu cliente com um link direto para a página de compras para que eles vejam em que estavam ponto para comprar.

Descarregar | Demo | hospedagem na web

2.WooCommerce Ocultar Preço e Plug-in do Botão Adicionar ao Carrinho

O plugin WooCommerce Ocultar Preços permite que os comerciantes criem várias regras para ocultar preços ou ocultar o botão “adicionar ao carrinho” de clientes não logados ou usuários que tenham certos direitos de acesso ao seu site de comércio eletrônico.

Woocommerce ocultar preço adicionar ao carrinho botão plugin ocultar por funções de usuário

Você pode ocultar o preço e o botão "adicionar ao carrinho" em determinados produtos ou em categorias específicas. Você pode substituí-los por um texto personalizado ou um botão que os levará ao  formulário de contato. Você pode criar tantas regras que ocultarão automaticamente o preço e os " Adicionar ao panier ”dependendo do que você deseja.

Descarregar | Demo | hospedagem na web

3. WooCommerce Currency Switcher

Este plug-in permite alterar os preços dos produtos de uma moeda para outra em tempo real.Trocador de moeda Woocommerce

Isso é especialmente importante no comércio eletrônico porque se destina a todo o mundo. Este plugin garante que não importa onde seus clientes estejam localizados, eles sempre poderão fazer pedidos em sua loja online.

Descarregar | Demo | hospedagem na web

Recursos Recomendados

Descubra outros recursos recomendados que o ajudarão otimize o desempenho de sua loja on-line. 

Conclusão

Aqui está ! Isso é tudo para este tutorial dedicado à personalização de botões Adicionar ao carrinho do WooCommerce. Não hesite em compartilhar com seus amigos no seu redes sociais preferido. 

No entanto, você também poderá consultar nossos Ressources, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress.

Mas, enquanto isso, conte-nos sobre seu Comentários e sugestões na seção dedicada.

...