Cómo crear una ventana emergente de guía de tamaño simple en Flatsome Theme

Publicado: 2022-06-29

Una guía de tallas en el tema Flatsome es importante si tienes una tienda de ropa en línea. La guía de tallas ayuda a tus clientes a encontrar la ropa que les queda mejor según sus medidas. Es por eso que es una buena práctica agregar una guía de tallas a la página de su producto que ayudará a los clientes a elegir la talla correcta de ropa y es el mejor complemento emergente en WordPress.

En este tutorial, veremos cómo podemos agregar una 'Guía de tallas' al tema Flatsome. Cuando los clientes hagan clic en este botón de guía de tallas, aparecerá una guía de tallas en el cuadro de luz. Implementaremos la guía de tallas en el tema Flatsome usando un código de demostración que puedes editar y establecer las medidas como prefieras.

Crear una guía de tallas en Flatsome Theme paso a paso

Paso 1:

Primero, necesitamos crear un bloque UX. En el tablero, pase el cursor sobre la opción 'UX Blocks' y haga clic en 'Add New'.

Paso 2:

Dale al bloque el título 'Guía de tallas' para que el shortcode sea [block id=”size-guide”]

temas de woocommerce gratis

Paso 3:

Haga clic en la pestaña 'Texto' en el editor para seleccionarlo. Copie y pegue el código dado en el editor. Puede personalizar los valores según sus necesidades. Ahora haga clic en 'Publicar' para terminar de crear el Bloque UX. El editor de texto predeterminado es el mismo en todos los mejores temas de WooCommerce.

 [brecha]

[texto del título="Guía de tallas"]

<div class="guía-de-tallas">
<clase de tabla="tabla-guía-de-tamaños">
<cabeza>
<tr>

<th class="tooltip" title="Estados Unidos">EE. UU.</th>
<th class="tooltip" title="Reino Unido">Reino Unido</th>
<th class="tooltip" title="Italia">TI</th>
<th class="tooltip" title="Francia">FR</th>
<th class="información sobre herramientas" title="Alemania">DE</th>
<th class="información sobre herramientas" title="Japón">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>

</tabla><!-- /.tabla-guía-de-tallas -->

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

[brecha]

<p>

<small>Esta es una demostración de la guía de tallas (las tallas pueden ser incorrectas).</small>

</p>

guía de tallas en el tema Flatsome

Paso 4:

En el tablero, coloque el cursor sobre 'Apariencia' y haga clic en 'Editor de archivos de temas'.

Paso 5:

Dentro del 'Editor de archivos de temas', haga clic en 'Funciones de temas' (funciones. php) para abrirlo.

Paso 6:

Ahora pegue el código que se proporciona a continuación en el archivo 'Funciones de tema' (functions.php) . Luego haga clic en 'Actualizar archivo' para guardar la personalización.

Tenga en cuenta que le recomendamos encarecidamente que utilice un tema secundario para realizar cambios en los archivos de su tema. Asegúrese de tener una copia de seguridad de su sitio web antes de realizar cualquier cambio dentro de los archivos del tema.

Pegue este código dentro de las 'Funciones del tema' como se muestra en la imagen.

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

 add_action('woocommerce_single_product_summary', función () {

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

}, 12);

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

Paso 7:

Alternativamente, puede optar por mostrar el botón Guía de tallas solo para productos de categorías específicas. En ese caso, pegue el código que se proporciona a continuación en lugar del anterior dentro del archivo 'Funciones del tema' (functions.php) .

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

 add_action('woocommerce_single_product_summary', función () {

// Solo mostrar el botón si el producto tiene una de estas categorías.

if ( has_term( array( 'camisetas', 'sudaderas con capucha' ), 'product_cat' ) ) {

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

}

}, 12);

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

Paso 8:

Dentro del 'Editor de archivos de temas' en el que estamos trabajando, haga clic en 'Hoja de estilo' (style.css) para abrir el archivo en el editor. Los temas gratuitos más populares de WordPress WooCommerce se pueden editar con el editor de archivos de temas.

Paso 9:

Pegue el código proporcionado a continuación dentro del archivo 'Hoja de estilo' (style.css) . Luego haga clic en 'Actualizar archivo' para guardar la personalización.

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

 .size-guide-table tr th,
.size-guide-table tr td {
alineación de texto: centro;
ancho: 100px;
}

.size-guide-table tr:nth-child(even) {
color de fondo: #fbfbfb;
}

.size-guide-table th {
color de fondo: #f5f5f5;
}

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

Paso 10:

Ahora abra cualquier producto y encontrará el botón 'Guía de tallas' que creamos justo debajo del precio. Haga clic en el botón 'Guía de tallas' .

Paso 11:

Al hacer clic en el botón 'Guía de tallas' , la guía de tallas aparecerá en el cuadro de luz. Podemos ver que nuestra 'Guía de tallas' funciona perfectamente.

guía de tallas en el tema Flatsome

Conclusión

En los pasos mencionados anteriormente, hemos explicado cómo puede crear fácilmente un botón de 'Guía de tallas' que abrirá una guía de tallas en la caja de luz para sus clientes. Esta guía de tallas garantizará que sus clientes puedan elegir la ropa perfecta y mantenerlos más comprometidos con su tienda en línea.

Esperamos que este tutorial te haya sido útil. ¡Síguenos para más tutoriales increíbles como este! No dude en consultar nuestro tutorial sobre cómo agregar etiquetas de menú en el tema Flatsome.