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

Leonardo_Vicentini_F · Maio 27, 2020, 3:39pm

tive que acertar… colocar os

!important

na frente

precisa so java tambem… so acertei onde estava errado.

Carlos_Silva · Maio 27, 2020, 3:40pm

Leonardo_Vicentini_F:

.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;
	}
}

O CÓDIGO JAVA DEIXA ELE NORMAL MESMO NÉ.

Leonardo_Vicentini_F · Maio 27, 2020, 3:41pm

sim, so acertei o CSS, pq o JavaScript (JS) estava certo

Carlos_Silva · Maio 27, 2020, 3:59pm

Leonardo_Vicentini_F:

.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;
	}
}

“”“SENSACIONAL”“”""VOCÊ E O CARA NESSA COMUNIDADE!!! OBRIGADO DEU CERTINHO AQUI.

Leonardo_Vicentini_F · Maio 27, 2020, 4:22pm

ufa, achei que ia dar ruim de novo…

Carlos_Silva · Maio 27, 2020, 4:50pm

Adicionei uma nova cor para ver se o código ia responder da mesma maneira. Ele não fez como a cor preta
subescrevendo a palavra pela cor. Eu adicionei uma nova opção de cor e ele não vez a substitução da palavra
pela cor correspondente do texto. Ex Cor Amarela. Gostaria de Saber se tem como deixar esse campo editavel
a opção de cores da escrita ou se tem como deixar o código automatico reconhecendo a escrita e transformando ela
em cor. Obrigado mais uma vez

Carlos_Silva · Maio 27, 2020, 4:53pm

Tentei criar um novo código usando o preto como exemplo só alterando o nome da cor pelo amarelo e não deu.

(function() {
var x = ("div.atributo-comum ul li a.atributo-item span").filter(function() { return ((this).text().toLowerCase().indexOf(‘Amarelo’) > -1)});
x.attr(“style”, “background-color: Yellow; border-radius: 15px;”);
x.addClass(“atributo-comum-custom-span”);
x.text("");
x.parent().addClass(“atributo-comum-custom-a”);
})();

Leonardo_Vicentini_F · Maio 27, 2020, 5:06pm

kkkkkkkkkkkkk o caminho é esse mesmo, só tem um pequeno detalhe, que vc teria matado se soubesse programar em javascript…

o javascript faz a pesquisa com exatidão, considerando maiúsculo e minusculo, sendo assim usei a função .toLowerCase() para deixar tudo minusculo, assim vc poderia escrever de qualquer jeito e sempre estaria certo a procura.

Mas vc colocou a palavra procurada com uma letra maiúscula, as lascou.
Coloque o que quer procurar tudo em minusculo que vai funcionar, essa eu garanto…

Carlos_Silva · Maio 27, 2020, 5:29pm

Você e o cara mano. Consegui fazer a alteração. Não sei programar mas sou bem curioso. Todas essas alterações no meu site foi só na curiosidade que conseguir fazer. Muito obrigado de coração você me ajudou muito.

Thais_Ginotti · Maio 27, 2020, 6:07pm

Leonardo_Vicentini_F:

.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");
})();

Muito obrigado pela ajuda de sempre!!! Você é top! Deu super certo no meu site!

Leonardo_Vicentini_F · Maio 27, 2020, 6:08pm

kkkk, esse pessoal mando ver nas customizações!

dlima13 · Julho 8, 2020, 8:58pm

Olá novamente Leonardo, tudo bem?

Primeiramente, obrigado por todo seu apoio, não só para mim, mas para muita gente por aqui.

Eu também estou tentando customizar a parte das variações, mas, não sei o que fiz de errado, que para mim o que funcionou foi só arrendondar os botões… (coloquei o código CSS direto no editor de CSS).
E o no caso do JavaScript coloquei uma nova página HTML, no rodapé, e tentei para todas as páginas, categorias, produtos, mas não percebi diferenças para começar a mudar as cores.

Está errado a forma que inseri algum desses dois códigos?

Obrigado.

Leonardo_Vicentini_F · Julho 8, 2020, 9:50pm

O que exatamente vc quer fazer?
Assim vai ficar mais fácil para seguir enfrente.
As vezes o site tem muita customização, e uma coisa quebra a outra.

dlima13 · Julho 8, 2020, 9:59pm

Olá Leonardo,

Pode ser isso mesmo.
Eu quero agora personalizar as as letras de dentro das caixas de variações.
Tanto quando está no padrão, quanto quando a pessoa já selecionou.
Pois hoje ele está branco e fica apenas com uma sombra. Quero começar a fazer testes de cores.

variacoes

Por enquanto só consegui deixar redondo com os códigos que vocês mandaram!! Obg!!

Obrigado.
Diego

Leonardo_Vicentini_F · Julho 9, 2020, 12:07am

Vc quer colocar cor nas caixas e no texto?

dlima13 · Julho 9, 2020, 12:10am

Olá,
Sim. Já consegui adicionar o efeito hover no botão de variação, com isso ele muda de cor quando passo o mouse em cima.
Mas, quero que ele também fique com o fundo alterado depois que a variação é selecionada.
Obg.

dlima13 · Julho 13, 2020, 1:53am

Olá,
Criei um novo tópico com a imagem de como eu gostaria que ficasse:

Obrigado.

Point_Distribuidora · Dezembro 3, 2021, 11:26pm

Olá boa noite, boa tarde ou bom dia dependendo do horário que esteja vendo essa mensagem. Gostaria de colocar um botão comprar flutuante quando o cliente estive na página do produto e estiver lendo a descrição do produto e para o mesmo não poder voltar até em cima queria ativa este recurso na versão mobile.

Alguém poderia me ajudar, mas desde já agradeço pela atenção.
…

BYMO · Janeiro 27, 2023, 3:21am

Script excelente, estava querendo mudar isso tb, mas eu tive 2 probleminhas.

Quando colocado em variações de cores e não texto, se tem 2 cores na variação ele está deixando apenas a primeira aparecendo e não dividindo as 2.

Alguma sugestão para arrumar?
Obrigado!

BYMO · Janeiro 27, 2023, 1:26pm

Navegando pelo Firefox o código deixou o ícone das cores redondo, mas a cor ficou aparecendo as 2 porém em formato de gota.

Alguma ideia do motivo dessa diferença?

Tópico		Respostas	Visualizações
Mudar as cores do botões da Variação do produto Layout	3	244	20 de Novembro de 2020
Alterar cor da fonte da variaçao Layout	6	166	6 de Janeiro de 2022
Erro nas variações Produtos e Vendas	1	178	31 de Janeiro de 2020
Alteração na ordem das grades dos produtos Layout	41	672	9 de Dezembro de 2020
Variaçoes de produto por cores Layout	7	231	15 de Julho de 2022

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

Tópicos relacionados