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 :
Acessar esta seção o levará a uma interface com uma caixa de texto onde você pode inserir o código 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).
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.
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.
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.
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.
- 50 WooCommerce plugins para melhorar a sua loja on-line
- Plugins do 9 WordPress para criar um programa de afiliados
- 9 WooCommerce plugins para melhorar os atributos de seus produtos variáveis
- 5 WordPress plugins para editar visualmente CSS no seu blog
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.
...
Bom Dia,
Esse mesmo plug-in pode me ajudar a alterar a cor das estrelas "avaliações de clientes" nas páginas de produtos woocommerce? desde já, obrigado
Olá Beata
Nunca tentei e duvido que seja possível.
Olá, e como aumentar o tamanho do botão Adicionar ao carrinho? obrigado
Bom Dia,
Você deve usar o código CSS para isso. Caso contrário, eu recomendo o plugin Yellow Pencil que você pode baixar no Codecanyon.
Bem, é fantástico traduzir um trecho de código do inglês para o italiano. CSS está cheio de erros! Mas podemos fazer isso ?!
désolé
Boa noite, tenho uma pergunta. Como alteramos a cor do preço nas subcategorias do WooCommerce ???
Obrigado já pela sua resposta.
Nico
Olá Nico,
Muitos temas prémio oferecem essa opção, caso contrário, você pode usar CSS para personalizá-lo.
cordialmente