Mudar as cores do botões da Variação do produto

Boa tarde. Gostaria de alterar as cores dos botões de variação dos produtos.

Tenta usar esse código CSS:

/*Altera cor de fundo das variações*/
.produto .atributos .atributo-comum ul li a {
    background: #00bfff;
}
/*Altera cor do texto das variações*/
.produto .atributos .atributo-comum ul li a span {
    color: #fff;
}
2 curtidas

Jose uma duvida, eu consigo alterar individualmente. Por exemplo: nas cores das rodas. Alterar para Amarelo, Rosa e Vermelho?

Dá um pouco mais de trabalho porque você vai ter que alterar manualmente para separar cada variação, mas dá sim. Testa esse código:

#corpo > div > div.secao-principal.row-fluid.sem-coluna > div > div:nth-child(1) > div:nth-child(2) > div > div.atributos > div:nth-child(1) > ul > li:nth-child(1) > a {
    background: yellow;
}

#corpo > div > div.secao-principal.row-fluid.sem-coluna > div > div:nth-child(1) > div:nth-child(2) > div > div.atributos > div:nth-child(1) > ul > li:nth-child(2) > a {
    background: pink;
}

#corpo > div > div.secao-principal.row-fluid.sem-coluna > div > div:nth-child(1) > div:nth-child(2) > div > div.atributos > div:nth-child(1) > ul > li:nth-child(3) > a {
    background: red;
}

#corpo > div > div.secao-principal.row-fluid.sem-coluna > div > div:nth-child(1) > div:nth-child(2) > div > div.atributos > div:nth-child(3) > ul > li:nth-child(1) > a {
    background: white;
}

#corpo > div > div.secao-principal.row-fluid.sem-coluna > div > div:nth-child(1) > div:nth-child(2) > div > div.atributos > div:nth-child(3) > ul > li:nth-child(1) > a > span {
    color: black;
}

#corpo > div > div.secao-principal.row-fluid.sem-coluna > div > div:nth-child(1) > div:nth-child(2) > div > div.atributos > div:nth-child(3) > ul > li:nth-child(2) > a {
    background: black;
}

Eu acho que com um código JavaScript daria para fazer essa alteração de forma automatizada, mas não sei como montaríamos as condições para alterar cada botão.