Trocar nome nativos das cores

Código CSS/HTML
1

Olá pessoal.
Conseguimos alterar os botões de cores para os nomes, mas aparecem os nomes nativos das cores:

image
image499×282 11.4 KB

Tentamos usar o JS abaixo mas sem sucesso:

<script>
document.addEventListener("DOMContentLoaded", function () {
  const colorMap = {
    "425963": "Marrom",
    "426172": "Azul Bebê",
    "426353": "Rosa Bebê",
    "425684": "Café",
    "425945": "Marsala",
    "425832": "Verde Militar",
    "426141": "Caramelo",
    "425760": "Verde Militar",
    "425765": "Marrom",
    "425368": "Azul Marinho"
  };
  document.querySelectorAll('.atributo-item\\\\\\\[data-grade-id="8945"\\\\\\\]').forEach(el => {
    const id = el.getAttribute("data-variacao-id");
    if (colorMap\\\\\\\[id\\\\\\\]) {
      el.setAttribute("data-variacao-nome", colorMap\\\\\\\[id\\\\\\\]);
      el.innerText = colorMap\\\\\\\[id\\\\\\\];
    }
  });
});
</script>

Alguma dica de como mudar o nome das cores para aparecer no produto?
Brown = Marrom
Blosson = Rosa Bebê

1 curtida
2

O que voce precisa fazer não é trocar os nomes e sim cria uma nova grade com os nomes desejados ou seja uma nova grade de cores assim voce não terá essa dor de cabeça. Por ex: Grade titulo: (Cores) “ Use um nome diferente do padrão do loja integrada que é (“Cor”) Sub Titulo ( a cor dejada). Blz

1 curtida
3

comu
comu1024×768 123 KB

1 curtida
4

Conseguimos acertar a cores via JS, mas fazendo assim ele já iria mudar o nome das cores que já estão na loja ou somente nos produtos novos?