Ir para o conteúdo principal

Como personalizar o botão "Adicionar ao carrinho" do WooCommerce

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

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 chegar lá:

  • 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

Nós vamos usar um plugin para WordPress 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 do plugin WordPress e ativação.

Após ativar o plugin, um novo submenu será adicionado ao menu apparence :

CSS Menu personalizado WordPress Plugin

O acesso a esta seção o levará a uma interface com uma caixa de texto na qual é possível 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.

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

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

Substitua a propriedade » backgroud: importante vermelho! Por um cor de sua escolha. Atualize os códigos e volte para sua loja online. De fato, usando o estilo que acabamos de fornecer, você pode alterar completamente a estrutura dos botões.

Com um pouco de pesquisa, você poderá criar botões exclusivos com um estilo que corresponde ao seu tema WordPress (especialmente se ele não é 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 eles compraram e convidá-los a concluir suas ações.

Recupere o carrinho abandonado para woocommerce

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

Defina o intervalo de tempo entre quando um carrinho de compras é abandonado e quando um email de lembrete personalizado é enviado ao seu cliente com um link direto para a página de compras para que eles possam ver em que estavam. o ponto de comprar.

Descarregar | Demo | hospedagem na web

2. WooCommerce Ocultar Preço & Adicionar ao carrinho Botão Plugin

O plug-in Ocultar preços do WooCommerce permite que os comerciantes criem várias regras para ocultar os preços ou oculte o botão "adicionar ao carrinho" a clientes ou usuários não conectados 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 alguns produtos ou em categorias específicas. Você pode substituí-los por texto personalizado ou por um botão que o levará ao formulário de contato. Você pode criar tantas regras que ocultarão automaticamente o preço e o botão " 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.Woocommerce currency switcher

Isso é particularmente importante no comércio eletrônico, pois é voltado para o mundo inteiro. Esse plug-in garante que, independentemente da situação geográfica de seus clientes, eles sempre possam fazer pedidos na sua loja online.

Descarregar | Demo | hospedagem na web

Recursos Recomendados

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

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [Recomendado]

Conclusão

Voila! É isso aí para este tutorial dedicado à personalização do botão Adicionar ao carrinho do WooCommerce. Sinta-se livre para compartilhá-lo com seus amigos em 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 o seu Comentários e sugestões na seção dedicada.

...

Este artigo contém comentários 8

  1. Bom Dia,
    Esse mesmo plugin pode me ajudar a mudar a cor das estrelas "comentários de clientes" nas páginas de produtos de comércio eletrônico? antecipadamente obrigado

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
3 ações
ação3
chilrear
Enregistrer