Alteração nos Botões de Variações de Produtos

Layout
1

Estou tentando a dias fazer uma alteração e não consigo.

Eu criei uma variação na categoria de produtos para poder realizar vendas de KIT só que fica muito feito visualmente. Gostaria de estilizar os campos de opções como da figura 2 que peguei de exemplo. A figura 1 e a minha Loja e a 2 e como quero deixar os campos.

Obrigado!
https://cdn.awsli.com.br/78/78862/arquivos/image2.png

2

Deixar os campos redondos eu já consegui

Código

.atributos ul li a {
border-radius: 15px;
}

div.atributo-cor ul li a.atributo-item span {
border-radius: 15px;
}

Só falta Agora deixar as Variações no formato de texto como Cor mesmo.

Se alguém poder me ajudar nessa mudança que falta.

3 
.atributos ul li a {
    border-radius: 15px;
}

div.atributo-cor ul li a.atributo-item span {
    border-radius: 15px;
}

.atributo-comum a {
    padding: 2px;
}

@media only screen and (max-width: 767px){
	.atributo-comum-custom-a {
		padding: 2px;
		width: 35px;
		height: 35px;
	}

	.atributo-comum-custom-span {
		padding: 0px;
		width: 35px;
		height: 35px;
	}
}

(function() {
	var x = $("div.atributo-comum ul li a.atributo-item span").filter(function() { return ($(this).text().toLowerCase().indexOf('preto') > -1)});
	x.attr("style", "background-color: black; border-radius: 15px;");
	x.addClass("atributo-comum-custom-span");
	x.text("");
	x.parent().addClass("atributo-comum-custom-a");
})();
1 curtida
4

Boa noite!

O Código não funcionou. Obrigado

5

ai dentro tem dois tipo de Código CSS e JavaScript.

6

isso mesmo. Eu já tentei deixando só o java também e não deu certo. Obrigado!

7

@Leonardo_Vicentini_F achei legal essa sugestão. Devo inserir em codigo html cabeçalho-pagina do produto? Seria isso mesmo? Valeu!

8

css sempre cabeçalho,
javascript sempre rodapé,

sempre segui essa regra é sempre sucesso.

1 curtida
9

Parece que deu certo! Obrigado!
image

1 curtida
10

para deixar redondo os dois primeiros CSS
os outros codigos são para trocar a palavra pela cor e aumentar o tamanho da caixa de cor quando está na visão mobile.

11

Não alterei nenhum atributo e para mim ficou perfeito inclusive no mobile.

12

pode tirar o resto, pode te atrapanhar…

13

Feito. Deixei apenas esses. Ficou blz.

.atributos ul li a {
border-radius: 15px;
}

div.atributo-cor ul li a.atributo-item span {
border-radius: 15px;
}

.atributo-comum a {
padding: 2px;
}

14

Bom dia Leonardo. O código Java não funcionou aqui.

15

obeserva também que se o produto com 2 variaveis de cores só fica de uma cor no circulo no campo opções de cores.

16

Boa tarde! O Código funcionou aqui. Eu que não estava sabendo utilizalo.
Como que eu faço para ajustar o tamanho da cor que substituiu a palavra. Ela ficou menos que a primeira opção de cor que aparece. Gostaria de deixar os 2 campos do mesmo tamanho. Tem como você me ajudar. Obrigado!

17

remova tudo e salve, e vamos ver passo a passo, pq nao era para ficar assim com o codigo todo que coloquei.

18

ok. Vou fazer isso agora

19

achei a falha, quando adiciono uma nova classe…

.atributos ul li a {
    border-radius: 15px;
}

div.atributo-cor ul li a.atributo-item span {
    border-radius: 15px;
}

.atributo-comum a {
    padding: 2px;
}

.atributo-comum-custom-a {
    padding: 2px;
    min-width: 25px !important;
    min-height: 25px !important;
}

.atributo-comum-custom-span {
    padding: 0px;
    min-width: 25px !important;
    min-height: 25px !important;
}

@media only screen and (max-width: 767px){
	.atributo-comum-custom-a {
		padding: 2px;
		width: 35px;
		height: 35px;
	}

	.atributo-comum-custom-span {
		padding: 0px;
		width: 35px;
		height: 35px;
	}
}
20

Esse código e o css? Cara eu tenho muito que te agradecer.