Como inserir mais tabs/abas na página de produto?

  28/05/2018         Matheus Guedes

Olá lojistas, fizemos um código para você. Para que insira novas tabs no produto, você deve inserir o seguinte código abaixo em Configurações > Aparência > Editar JS:



$("#myTab li:last-of-type").after('<li class=""><a href="#Entrega" data-toggle="tab" aria-expanded="false">Formas de Entrega</a></li>');


$("#myTabContent .tab-pane:last-of-type").after('<div class="tab-pane fade" id="Entrega" itemprop="description">'+'<p>As preposições de entrega são:</p>'+'</div>');

O código acima inseree 1 tab, logo depois da última tab de produto em sua loja. Veja que de vermelho é o nome da aba e de verde o link de acesso da aba. Veja que nas duas linhas, temos Entrega de verde, ambas devem ser iguais em seu código, pois 1 será o link de acesso e o segundo a resposta desse link. De azul é o texto que conterá dentro dessa nova aba. Caso queira pular uma linha, dentro desse texto, utilize o código <br>, que em html tem o significado de soltar 1 linha. Dessa forma, conseguirá escrever um novo conteúdo para essa aba e aparecerá em todos os produtos.

Caso deseje inserir mais uma aba, basta replicar o código acima e mudar os parâmetros informados, conforme o código abaixo:

$("#myTab li:last-of-type").after('<li class=""><a href="#Garantiasepag" data-toggle="tab" aria-expanded="false">Pagamento e Entrega</a></li>');

$("#myTabContent .tab-pane:last-of-type").after('<div class="tab-pane fade" id="Garantiasepag" itemprop="description">'+'<p>Formas de Pagamento:</p>'+'<br>'+'Boleto: 5% de desconto (Pagamento em qualquer casa lotérica ou banco),'+'<br>'+'Transferência Bancária ou Depósito: 5% de desconto.'+'<br>'+'Cartão de Crédito em 3x sem juros.'+'<br>'+'Cartão de crédito em até 12x com juros.'+'<br>'+'<br>'+'Pensando sempre no conforto e comodidade dos nossos clientes, oferecemos 3 formas de envio:'+'<br>'+'Correios:'+'<br>'+'Pac'+'<br>'+'Sedex'+'<br>'+'<br>'+'Entrega por Motoboy:'+'<br>'+'Para Porto Alegre e algumas regiões metropolitanas de POA, consulte disponibilidade para sua região.'+'<br>'+'<br>'+'Prazo de Entrega:'+'<br>'+'Correios: Os prazos de entrega dos Correios podem variar de 3 a 12 dias útes dependendo do seu CEP.'+'<br>'+'Entrega por motoboy: 1 dia útil após confirmação da compra e pagamento.'+'<br>'+'<br>'+'Todos os produtos ofertados em nosso site, estão disponíveis a Pronta Entrega'+'</div>');





Próximos artigos

Como inserir um painel de identificação dos itens em minha conta

Olá lojista, fizemos esse código para você.Insira o código abaixo em Configurações > Editar JS:$('#accordion-pedidos > .panel-body > table > tbody').prepend('.<tr class="click_row">'+'<td...

Como transformar as variações em botões?

Olá lojista, temos uma personalização para você. Se estiver insatisfeito com o modelo de exibição atual para o seu site. Poderá fazê-lo com um código que será amostrado a seguir. Primeiro, vemos que a configuração atual em sua loja, é algo como:...