Cor do botão comprar está mudando o ver mais

Layout
1

Olá, gostaria de ter o botão COMPRAR na cor verde, mas ao colocar o código que encontrei aqui ele muda também a cor do botão VER MAIS tanto na listagem da página inicial como nos produtos relacionados.

Existe uma maneira de só mudar a cor do botão COMPRAR para verde?

Obrigado!

botao_comprar_vermais
botao_comprar_vermais1366×768 187 KB

2

Coloca o código em Incuir HTML > Criar código > Seleciona CSS, PÁGINA DE PRODUTO E RODAPÉ

2 curtidas
3

Então mas quando insiro o código ele deixa o botão COMPRAR e o VER MAIS na página do produtos ambos verdes…o VER MAIS da página inicial fica rosa.

4

Cola esse código:

.g_ .produto div.principal .botao.principal.botao-comprar {
    width: 100%;
    background-color: #código da sua cor;
}

ver se vai funcionar

2 curtidas
5

Pelo menos pra mim não mudou a cor.

Estou usando este:


#listagemProdutos.listagem .listagem-item .acoes-produto .botao-comprar, 
.listagem.aproveite-tambem .listagem-item .acoes-produto .botao-comprar,
.produto div.principal .acoes-produto .comprar .botao-comprar,
.produto .acoes-flutuante .botao-comprar,
.finalizar-compra .botao.principal,
#finalizarCompra{
    background-color: #25d366 !important;
    border-color:  #25d366 !important;
}
6

No painel de Visual da Loja tem a opção para deixar a cor verde padrão para os botões, mas minha ideia era deixar VERDE apenas os botões COMPRAR e FINALIZAR COMPRA.

7

esse código que você ta usando é pra deixar todos os botões verde, por isso ta deixando todos verde, excluir esse código ai, e tenta esse outro código:

a.botao.botao-comprar.principal.grande {
    background-color: #8bc34a !important;
}

.g_ .listagem-item:hover .acoes-produto a.botao.botao-comprar.principal {
    background: blue;
}

body.pagina-carrinho.tema-transparente button.botao.principal.grande {
    background: blue;
}
2 curtidas
8

Então com este código funciona, mas agora embaixo nos Produtos Relacionados qnd vai com o mouse em cima alterna entre verde e rosa.

E ainda falta eu deixar o FINALIZA COMPRA verde tb.

9

É por que eu coloquei como hover, tira o segundo código e coloca esse

.produto .acoes-produto a.botao.botao-comprar.principal {
    background-color: blue;
}

Para trocar a cor do botão finalizar, troca o 3 código por esse

body.pagina-carrinho.tema-transparente button.botao.principal.grande {
    background-color: blue !important;
}
2 curtidas
10

Perfeito! Resolveu o problema do COMPRAR e VER MAIS, agora estão diferentes e tb o FINALIZAR COMPRA.