Seleção de variação dos produtos

Layout
1

Boa tarde pessoal, estou com uma baita duvida aqui, eu possui vários produtos uns com poucas variações outros com muitas. Na loja quando tem poucas variações a opção é por botão, o que é perfeito, já os que tem muitas aparece uma lista, que fica meio desconfigurada e ruim de escolher, existe como eu deixar apenas as opções de botão para todos os produtos?

Modo com a lista:
Captura de Tela 2024-04-19 às 15.23.33

o

2 
body.pagina-produto  .atributos .wrapper-dropdown {
    position: relative;
    padding: 0px;
    margin: 0px 0;
    border-radius: 0;
    border: none;
}

body.pagina-produto .atributos .wrapper-dropdown:after {
    content: "";
    display:none;
}

body.pagina-produto .atributos .wrapper-dropdown.show, 
body.pagina-produto .atributos .wrapper-dropdown.show .dropdown {
    opacity: 1;
}

body.pagina-produto .atributos .wrapper-dropdown .dropdown {
    position: relative;
    top: unset;
    left: unset;
    right: unset;
    font-weight: normal;
    background: white;
    border: none;
    max-height: unset;
    overflow: auto;
    display: block;
}

body.pagina-produto .atributos .wrapper-dropdown > span {
    display:none;
}

body.pagina-produto .atributos .wrapper-dropdown .dropdown li {
    float: left;
    margin: 5px;
}

image

3 curtidas
3

CSS melhorado para o caso de hover e select active

body.pagina-produto  .atributos .wrapper-dropdown {
    position: relative;
    padding: 0px;
    margin: 0px 0;
    border-radius: 0;
    border: none;
}

body.pagina-produto .atributos .wrapper-dropdown:after {
    content: "";
    display:none;
}

body.pagina-produto .atributos .wrapper-dropdown.show, 
body.pagina-produto .atributos .wrapper-dropdown.show .dropdown {
    opacity: 1;
}

body.pagina-produto .atributos .wrapper-dropdown .dropdown {
    position: relative;
    top: unset;
    left: unset;
    right: unset;
    font-weight: normal;
    background: white;
    border: none;
    max-height: unset;
    overflow: auto;
    display: block;
}

body.pagina-produto .atributos .wrapper-dropdown > span {
    display:none;
}

body.pagina-produto .atributos .wrapper-dropdown .dropdown li,
body.pagina-produto .atributos .wrapper-dropdown .dropdown li:hover{
    float: left;
    margin: 5px;
}

body.pagina-produto .atributos .wrapper-dropdown .dropdown li a:hover, 
body.pagina-produto .atributos .wrapper-dropdown .dropdown li.active a {
    border: 0;
    margin: 0;
    transform: scale(1);
    border: 1px solid black;
}

body.pagina-produto .atributos .wrapper-dropdown .dropdown li a {
    padding: 0;
}

body.pagina-produto .atributos .wrapper-dropdown .dropdown li a.indisponivel:before {
    display:none;
}

image

image
image576×752 42.8 KB

2 curtidas
4

Perfeito, estou apenas esperando atualizar o código para testar, mas a principio deu certo, muito obrigado, agora sem querer abusar tenho outra duvida, teria como ao clicar um uma imagem ele selecionar a variação dela? pois como está a loja ele pode selecionar uma opção no menu, depois clicar em uma imagem da galeria e acabar comprando errado.

5

Funcionou muito bem, muito obrigado @Leonardo_Vicentini_F .

1 curtida
6

Acho complicado fazer isso, é possivel, mas complicado, pq o cara pode só querer ver fotos e n mudar a variação. E dai gerar eventos e comportamentos não desejados.

1 curtida