Flow eCommerce

Principalmente em lojas virtuais de moda é vantajoso exibir as medidas de cada tamanho de um determinado produto.

No exemplo abaixo exibimos uma calça:

A tabela é inserida aplicando um dos blocos de código abaixo (há um código específico para cada quantidade de colunas. No exemplo acima temos cinco colunas, uma para cada tamanho):

+===================================+

| Tabela 1 coluna |

+===================================+

 

<div class="tabmedidas">

<h2>Tabela de Medidas <a class="vejacomomedir" href="/como_tirar_medidas" target="_blank">veja como medir</a></h2>

<ul class="tabela1"><li class="topotabela"><ul><li class="colunabig"></li><li>P</li></ul></li>

<li><ul><li class="colunabig">Cós</li><li>64cm</li></ul></li>

<li><ul><li class="colunabig">Quadril</li><li>91cm</li></ul></li>

<li><ul><li class="colunabig">Gancho</li><li>21cm</li></ul></li>

<li><ul><li class="colunabig">Perna</li><li>64cm</li></ul></li>

<li><ul><li class="colunabig">Comprimento</li><li>100cm</li></ul></li>

</ul>

</div>

 

 

+===================================+

| Tabela 2 colunas |

+===================================+

 

<div class="tabmedidas">

<h2>Tabela de Medidas <a class="vejacomomedir" href="/como_tirar_medidas" target="_blank">veja como medir</a></h2>

<ul class="tabela2"><li class="topotabela"><ul><li class="colunabig"></li><li>P</li><li>M</li></ul></li>

<li><ul><li class="colunabig">Cós</li><li>64cm</li><li>64cm</li></ul></li>

<li><ul><li class="colunabig">Quadril</li><li>91cm</li><li>91cm</li></ul></li>

<li><ul><li class="colunabig">Gancho</li><li>21cm</li><li>21cm</li></ul></li>

<li><ul><li class="colunabig">Perna</li><li>64cm</li><li>64cm</li></ul></li>

<li><ul><li class="colunabig">Comprimento</li><li>100cm</li><li>100cm</li></ul></li>

</ul>

</div>

 

 

 

+===================================+

| Tabela 3 colunas |

+===================================+

 

<div class="tabmedidas">

<h2>Tabela de Medidas <a class="vejacomomedir" href="/como_tirar_medidas" target="_blank">veja como medir</a></h2>

<ul class="tabela3"><li class="topotabela"><ul><li class="colunabig"></li><li>P</li><li>M</li><li>G</li></ul></li>

<li><ul><li class="colunabig">Cós</li><li>64cm</li><li>64cm</li><li>64cm</li></ul></li>

<li><ul><li class="colunabig">Quadril</li><li>91cm</li><li>91cm</li><li>91cm</li></ul></li>

<li><ul><li class="colunabig">Gancho</li><li>21cm</li><li>21cm</li><li>21cm</li></ul></li>

<li><ul><li class="colunabig">Perna</li><li>64cm</li><li>64cm</li><li>64cm</li></ul></li>

<li><ul><li class="colunabig">Comprimento</li><li>100cm</li><li>100cm</li><li>100cm</li></ul></li>

</ul>

</div>

 

 

 

+===================================+

| Tabela 4 colunas |

+===================================+

 

<div class="tabmedidas">

<h2>Tabela de Medidas <a class="vejacomomedir" href="/como_tirar_medidas" target="_blank">veja como medir</a></h2>

<ul class="tabela4">

<li class="topotabela"><ul><li class="colunabig"></li><li>P</li><li>M</li><li>G</li><li>GG</li></ul></li>

<li><ul><li class="colunabig">Cós</li><li>64cm</li><li>64cm</li><li>64cm</li><li>64cm</li></ul></li>

<li><ul><li class="colunabig">Quadril</li><li>91cm</li><li>91cm</li><li>91cm</li><li>91cm</li></ul></li>

<li><ul><li class="colunabig">Gancho</li><li>21cm</li><li>21cm</li><li>21cm</li><li>21cm</li></ul></li>

<li><ul><li class="colunabig">Perna</li><li>64cm</li><li>64cm</li><li>64cm</li><li>64cm</li></ul></li>

<li><ul><li class="colunabig">Comprimento</li><li>100cm</li><li>100cm</li><li>100cm</li><li>100cm</li></ul></li>

</ul>

</div>

 

 

+===================================+

| Tabela 5 colunas |

+===================================+

 

<div class="tabmedidas">

<h2>Tabela de Medidas <a class="vejacomomedir" href="/como_tirar_medidas" target="_blank">veja como medir</a></h2>

<ul class="tabela5">

<li class="topotabela"><ul><li class="colunabig"></li><li>34</li><li>36</li><li>38</li><li>40</li><li>42</li></ul></li>

<li><ul><li class="colunabig">Cós</li><li>64cm</li><li>64cm</li><li>64cm</li><li>64cm</li><li>64cm</li></ul></li>

<li><ul><li class="colunabig">Quadril</li><li>91cm</li><li>91cm</li><li>91cm</li><li>91cm</li><li>91cm</li></ul></li>

<li><ul><li class="colunabig">Gancho</li><li>21cm</li><li>21cm</li><li>21cm</li><li>21cm</li><li>21cm</li></ul></li>

<li><ul><li class="colunabig">Perna</li><li>64cm</li><li>64cm</li><li>64cm</li><li>64cm</li><li>64cm</li></ul></li>

<li><ul><li class="colunabig">Comprimento</li><li>100cm</li><li>100cm</li><li>100cm</li><li>100cm</li><li>100cm</li></ul></li>

</ul>

</div>

Escolha a tabela conforme a quantidade de colunas necessárias, copie-a e cole-a no campo Tabela de Medidas na página de edição do produto no painel administrativo da sua loja:

Após copiar o código você deve fazer as seguintes edições:

• Apague ou adicione novas linhas (veja o exemplo de uma linha em amarelo);
  
• Mude os títulos das linhas (veja o exemplo de um titulo em azul);
• Mude os valores de cada coluna (veja o exemplo de um valor em verde);
  

<div class="tabmedidas">

<h2>Tabela de Medidas</h2>

<ul class="tabela5"><li class="topotabela"><ul><li class="colunabig"></li><li>34</li><li>36</li><li>38</li><li>40</li><li>42</li></ul></li>

<li><ul><li class="colunabig">Cós</li><li>64cm</li><li>64cm</li><li>64cm</li><li>64cm</li><li>64cm</li></ul></li>

<li><ul><li class="colunabig">Quadril</li><li>91cm</li><li>91cm</li><li>91cm</li><li>91cm</li><li>91cm</li></ul></li>

<li><ul><li class="colunabig">Gancho</li><li>21cm</li><li>21cm</li><li>21cm</li><li>21cm</li><li>21cm</li></ul></li>

<li><ul><li class="colunabig">Perna</li><li>64cm</li><li>64cm</li><li>64cm</li><li>64cm</li><li>64cm</li></ul></li>

<li><ul><li class="colunabig">Comprimento</li><li>100cm</li><li>100cm</li><li>100cm</li><li>100cm</li><li>100cm</li></ul></li>

</ul>

</div>

Após editar os valores, salve o produto, limpe o cache e a tabela estará visível.