Como criar um pop-up de guia de tamanho simples no tema Flatsome

Publicados: 2022-06-29

Um guia de tamanhos no tema Flatsome é importante se você tiver uma loja de roupas online. O guia de tamanhos ajuda seus clientes a encontrar as roupas que melhor se adaptam a eles de acordo com suas medidas. É por isso que é uma boa prática adicionar um guia de tamanhos à página do seu produto que ajudará os clientes a escolher o tamanho certo das roupas e é o melhor plugin pop-up do WordPress.

Neste tutorial, veremos como podemos adicionar um 'Guia de Tamanho' ao tema Flatsome. Quando os clientes clicarem neste botão de guia de tamanho, um guia de tamanho aparecerá na caixa de luz. Implementaremos o guia de tamanhos no tema Flatsome usando um código de demonstração que você pode editar e definir as medidas como preferir.

Crie um Guia de Tamanhos no Tema Flatsome Passo a Passo

Passo 1:

Primeiro, precisamos criar um bloco UX. No painel, passe o mouse sobre a opção 'UX Blocks' e clique em 'Add New'.

Passo 2:

Dê ao bloco o título 'Size Guide' para que o shortcode seja [block id=”size-guide”]

temas gratuitos de woocommerce

Etapa 3:

Clique na guia 'Texto' no editor para selecioná-lo. Copie e cole o código fornecido no editor. Você pode personalizar os valores conforme sua necessidade. Agora clique em 'Publicar' para finalizar a criação do Bloco UX. O editor de texto padrão é o mesmo em todos os melhores temas do WooCommerce.

 [Gap = Vão]

[title text="Guia de tamanhos"]

<div class="size-guide">
<table class="tamanho-guia-tabela">
<thead>
<tr>

<th class="tooltip" title="Estados Unidos">EUA</th>
<th class="tooltip" title="Reino Unido">Reino Unido</th>
<th class="tooltip" title="Itália">TI</th>
<th class="tooltip" title="França">FR</th>
<th class="tooltip" title="Alemanha">DE</th>
<th class="tooltip" title="Japão">JP</th>

</tr>
</thead>

<tbody>

<tr>

<td>2</td>
<td>6</td>
<td>38</td>
<td>34</td>
<td>32</td>
<td>7</td>

</tr>

<tr>

<td>4</td>
<td>8</td>
<td>40</td>
<td>36</td>
<td>34</td>
<td>9</td>

</tr>

<tr>

<td>6</td>
<td>10</td>
<td>42</td>
<td>38</td>
<td>36</td>
<td>11</td>

</tr>

<tr>

<td>8</td>
<td>12</td>
<td>44</td>
<td>40</td>
<td>38</td>
<td>13</td>

</tr>

<tr>

<td>10</td>
<td>14</td>
<td>46</td>
<td>42</td>
<td>40</td>
<td>15</td>

</tr>

<tr>

<td>12</td>
<td>16</td>
<td>48</td>
<td>44</td>
<td>42</td>
<td>17</td>

</tr>

<tr>

<td>14</td>
<td>18</td>
<td>50</td>
<td>46</td>
<td>44</td>
<td>19</td>

</tr>

<tr>

<td>16</td>
<td>20</td>
<td>52</td>
<td>48</td>
<td>46</td>
<td>21</td>

</tr>

<tr>

<td>18</td>
<td>22</td>
<td>54</td>
<td>50</td>
<td>48</td>
<td>23</td>

</tr>

<tr>

<td>20</td>
<td>24</td>
<td>56</td>
<td>52</td>
<td>50</td>
<td>25</td>

</tr>

<tr>

<td>22</td>
<td>26</td>
<td>58</td>
<td>54</td>
<td>52</td>
<td>27</td>

</tr>

<tr>

<td>24</td>
<td>28</td>
<td>60</td>
<td>56</td>
<td>54</td>
<td>29</td>

</tr>

</tbody>

</table><!-- /.size-guide-table -->

</div><!-- /.guia de tamanho -->

[Gap = Vão]

<p>

<small>Esta é uma demonstração do guia de tamanhos (os tamanhos podem estar incorretos).</small>

</p>

guia de tamanhos no tema Flatsome

Passo 4:

No painel, passe o mouse sobre 'Aparência' e clique em 'Editor de arquivo de tema'.

Etapa 5:

Dentro do 'Theme File Editor', clique em 'Theme Functions'(functions.php) para abri-lo.

Etapa 6:

Agora cole o código abaixo no arquivo 'Theme Functions' (functions.php) . Em seguida, clique em 'Atualizar arquivo' para salvar a personalização.

Observe que, é altamente recomendável que você use um tema filho para fazer alterações em seus arquivos de tema. Certifique-se de ter um backup do seu site antes de fazer qualquer alteração nos arquivos do tema.

Cole este código dentro do 'Theme Functions' como mostrado na imagem.

**************************************************** ********************************************

 add_action( 'woocommerce_single_product_summary', function() {

echo do_shortcode( '[button text="Size Guide" size="xsmall" radius="99" link="#size-guide"][lightbox width="600px" padding="20px"][block][/lightbox ]');

}, 12);

**************************************************** ********************************************

Etapa 7:

Como alternativa, você pode optar por mostrar o botão Guia de tamanhos apenas para produtos de categorias específicas. Nesse caso, cole o código abaixo ao invés do anterior dentro do arquivo 'Theme Functions'(functions.php) .

**************************************************** **************************************************** **

 add_action( 'woocommerce_single_product_summary', function() {

// Mostrar botão apenas se o produto tiver uma dessas categorias.

if ( has_term( array( 'tshirts', 'hoodies' ), 'product_cat' ) ) {

echo do_shortcode( '[button text="Size Guide" size="xsmall" radius="99" link="#size-guide"][lightbox width="600px" padding="20px"][block][/lightbox ]');

}

}, 12);

**************************************************** **************************************************** **

Etapa 8:

Dentro do 'Theme File Editor' em que estamos trabalhando, clique em 'Stylesheet'(style.css) para abrir o arquivo no editor. Os temas gratuitos mais populares do WordPress WooCommerce podem ser editados usando o editor de arquivos de temas.

Etapa 9:

Cole o código abaixo dentro do arquivo 'Stylesheet'(style.css) . Em seguida, clique em 'Atualizar arquivo' para salvar a personalização.

**************************************************** **************************************************** **************************

 .tabela de guia de tamanho tr th,
.tabela-guia de tamanhos tr td {
alinhamento de texto: centro;
largura: 100px;
}

.tamanho-guia-tabela tr:nth-filho(par) {
cor de fundo: #fbfbfb;
}

.tamanho-guia-tabela {
cor de fundo: #f5f5f5;
}

**************************************************** **************************************************** ****************************

Etapa 10:

Agora abra qualquer produto e você encontrará o botão 'Size Guide' que criamos logo abaixo do preço. Clique no botão 'Guia de tamanhos' .

Etapa 11:

Ao clicar no botão 'Guia de tamanhos' , o guia de tamanhos, você aparecerá na caixa de luz. Podemos ver que nosso 'Guia de Tamanhos' está funcionando perfeitamente.

guia de tamanhos no tema Flatsome

Conclusão

Nas etapas mencionadas acima, abordamos como você pode criar facilmente um botão 'Guia de tamanhos' que abrirá um guia de tamanhos na caixa de luz para seus clientes. Este guia de tamanhos garantirá que seus clientes possam escolher suas roupas perfeitas e mantê-los mais engajados em sua loja online.

Esperamos que este tutorial tenha sido útil para você. Siga-nos para mais tutoriais incríveis como este! Sinta-se à vontade para conferir nosso tutorial sobre como adicionar rótulos de menu no tema Flatsome.