Como transformar as variações em botões?

22/06/2018 Matheus Guedes

Olá lojista, temos uma personalização para você. Se estiver insatisfeito com o modelo de exibição atual para o seu site. Poderá fazê-lo com um código que será amostrado a seguir. Primeiro, vemos que a configuração atual em sua loja, é algo como:

Para deixar algo como:

Você precisa inserir o código abaixo em Configurações > Aparência > Editar CSS, no campo estilos:

.product-page-options .select-styled {

background-color: transparent;

border-radius: 0;

position: inherit;

padding: 10px 0

}

.product-page-options .select-options {

display: block !important;

background-color: transparent;

position: inherit;

top: 0;

z-index: 999;

margin: 0

}

.product-page-options ul.select-options li {

display: inline-block

}

.product-page-options .select-options li {

margin: 1px;

background-color: #fff;

border: 1px solid #ccc;

text-indent: 2px;

color: #333;

padding-left: 5px;

padding-right: 6px

}

body#bodyProduct .select-options .selected {

background: #47aeff !important;

border: 1px solid #036fc3 !important;

color: #fff !important;

font-weight: 600

}

body#bodyProduct .select-options .disabled {

background: #d3d3d3 !important

}

.product-page-options ul.select-options li:hover {

background-color: #ccc

}

.product-page-options .select {

height: auto !important

}

Mais tutoriais na categoria Visual e personalização

Próximos artigos

Como inserir uma frase de sucesso na página de finalização do pedido?

Olá lojista, temos um pequeno ajuste que consideramos importante. Como deixamos isso personalizável, acaba que muitas pessoas deixam passar batido. Então, pensando nisso, estamos fazendo um tutorial para ajudar você a realizar essa mudança em sua ...

Inserção de informações de estoque e número de visitantes na página de produto

Olá Lojista! Esse tutorial traz um código que pode fazer você aumentar bastante suas vendas, pois desperta o gatilho da escassez nos seus potenciais ...

Como transformar as variações em botões?

Como inserir uma frase de sucesso na página de finalização do pedido?

Inserção de informações de estoque e número de visitantes na página de produto

Sobre Nós

Siga-nos

Termos de uso