Aviso personalizado em variação de produto

Código CSS/HTML
1

Como inserir um aviso personalizado em uma variação de um produto?

O código abaixo permite que você adicione uma nota, ou aviso, a alguma variação específica do seu produto, como por exemplo em um tamanho personalizado ou cor.

Exemplos de uso da customização desse post:

image (85)

image (86)
image (86)1340×580 213 KB

Para começar, você precisará saber o id da variação que você quer customizar, e para isso basta seguir as instruções do print abaixo:

Passo 01 - Escolher a variação e clicar com o botão direito em cima dela.
Passo 02 - Clicar em Inspecionar.
Passo 03 - Na tela de inspeção que se abrirá no navegador, copiar o número que será exibido dentro do elemento “data-variação-id”.

image
image1726×677 211 KB

Passo 04 - Após isso, acesse Personalize sua loja > Incluir código HTML, para incluir o seguinte código:

  • Local publicação: Rodapé
  • Página publicação: Página do produto
  • Tipo: HMTL

image (82)
image (82)1078×351 12.1 KB

  • Conteúdo:
    Dentro do bloco de código você vai colar o código abaixo e substituir o texto “COLAR-AQUI-O-ID-DA-VARIAÇAO” (aparece duas vezes no código) pelo id da variação que você buscou ao inspecionar a página do produto anteriormente.
<!-- Aviso produto personalizado -->
<script>
    $(document).ready(function () {
        $('[data-variacao-id="COLAR-AQUI-O-ID-DA-VARIACAO"]').on("click", function () {
            var msg = $('.msg-personalizado')
            if (msg.length) {
                $(msg).remove()
            }
            else {
                $(".principal .atributos").after("<div class='msg-personalizado'><strong>EXEMPLO:</strong><p>Este é um exemplo de aviso exibido ao selecionar a variação escolhida no código.</div>");
            }
        })
        $(document).on("click", function (event) {
            if (!$(event.target).closest('[data-variacao-id="COLAR-AQUI-O-ID-DA-VARIACAO"]').length) {
                var msg = $('.msg-personalizado')
                $(msg).remove()
            }
        })
    })
</script>
<style>
    .msg-personalizado {
        /*font-family: Montserrat;
         font-size: 10 px!important;
         background: #gray;
         border-color: #EED3D7;*/
        color: #B94A48;
        text-align: center;
        border-radius: 3px;
        margin-top: -5px;
        margin-bottom: 10px;
        padding: 15px 0;
    }
</style>
<!-- 59f82ca2cfb102635aec5cb7a989f18f -->
<!-- FIM Aviso produto personalizado -->
  • O texto a ser exibido deve ser personalizado dentro da área selecionada no print, onde o conteúdo que estiver entre < STRONG > e < /STRONG > será o título, destacado em negrito (ver print exemplo ao final).

image (83)
image (83)1287×121 6.46 KB

  • A cor do texto pode ser personalizada alterando o atributo “color” destacado no print, e colando ali o código hexadecimal da cor desejada.

image (84)

Passo 05 - Não se esqueça de salvar as alterações, pronto, só aguardar que dentro de alguns minutos estará disponível em sua loja!

Créditos: @RafaelGoulart-TAM

:warning: A Loja Integrada não se responsabiliza pela personalização deste código , pois o comportamento pode ser diferente dependendo do tema e outras personalizações. Qualquer mudança no layout inesperada, recomendamos a remoção do código.

3 curtidas