Con el Product Size Charts module by ShopEngine, you can add a product size chart of any information you want in an image format on the product page. You can add as many charts as you want, and a single one from  the product settings of each product.

Add Product Size Charts to your WooCommerce site using ShopEngine #

Puedes añadir Tablas de tallas de productos to your WooCommerce Elementor website by following the simple steps.
Before that, get ShopEngine Pro now 👇

Paso 1: habilite el módulo de gráficos de tamaños de productos de ShopEngine #

From the WordPress dashboard –

• Go to ShopEngine Modules
• Find Product Size Charts, enable it and click on the settings icon.

Una vez que veas la configuración, habilitar el módulo. You should see a successfully saved message after that.

Note:  You can also enable all the modules at the same time. Check out how you can Encienda todos los módulos a la vez.

Step 2: Add a new product size chart #

Para agregar una nueva tabla de tallas, haga clic en +Agregar nuevo botón

Epand the arrow sign, then –

• give a name for the chart title
• Click on the select icon to elige una imagen for this product size chart
• Select category to which you want to assign the size chart.
• Finally, click on Save Changes.

Nota: La tabla de tallas asignada será aplicable en todos los productos de la categoría.

Nota: Puede agregar tantos gráficos como desee. Después de agregar y guardar, puedes volver en cualquier momento para editar el título y la imagen del gráfico de gráficos ya agregados. Y también borrar cualquiera de los gráficos existentes.

Step 3: Add Product Size Charts widgets to Single Product Template #

Once you are done creating your size charts, you need to add the WooCommerce Product Size Charts widget to your single product page template by ShopEngine to make it visible on the front end. 

Nota: Si necesita ayuda sobre cómo crear y editar una plantilla de producto único de shopEngine consulte nuestra documentación.

1. From ShopEngine widgets
2. Find product size chart, turn it on
3. guardar los cambios

Una vez que esté en el modo Editar con Elementor de la plantilla de producto único, busque Product Size Chart widget y simplemente solo arrastrar y soltar en el lugar deseado.

Step 4: Customize the Widget #

You will get two settings for the size chart in the Pestaña de contenido which includes:

• View cart as: Puedes mostrar la tabla de tallas de dos maneras, Modal y Normal.

Modal: Modal is the default option and with modal you also get the option to establecer una etiqueta de botón personalizada.

Normal: Si desea elegir un modo normal, en el menú desplegable Ver gráfico como, elija Normal. Después de elegir normal, obtendrá una nueva opción Encabezado del gráfico donde puede establecer un encabezado personalizado para la imagen.

Etiqueta del botón: It allows you to customize the text displayed on the button.

Paso 5. Configuración de estilo de la tabla de tallas de producto modal/normal #

Dependiendo del tipo de opción de gráfico de tamaño de vista que elija, obtendrá configuraciones de estilo relevantes. Para acceder a la configuración de estilo, vaya a la pestaña de estilo en el editor de Elementor.

Style Settings for Modal Size Chart #

For the modal view option of size chart, you will get the following style settings that you can customize according to your choice.

Botón de tablas de tallas: Expand the size chart menu, and you will find the following option:

• Tipografía:Elija el tamaño de fuente, la familia de fuentes y el peso de la fuente.
• Color y color de fondo: Seleccione el color y el color de fondo para la vista normal y flotante.
• Tipo de borde: Puede elegir el tipo de borde como ninguno, sólido, duplicado, discontinuo, etc.
• Ancho: Elija el ancho izquierdo, derecho, superior e inferior.
• Color: Seleccione un color para el borde.
• Radio del borde (px):  Proporcione un radio de borde.
• Relleno (px): Ajuste el acolchado superior, derecho, inferior e izquierdo.

Size Charts Popups: Expanda la ventana emergente de la tabla de tallas para personalizar la siguiente opción:

• Radio del borde (px): Elija un valor de radio de borde.
• Relleno (px): Ajuste el acolchado superior, derecho, inferior e izquierdo.
• Color de fondo: Aquí puedes elegir el color de fondo de la imagen.

Si quieres optar por la vista modal luego de hacer todos los cambios haga clic en actualizar para guardar y pasar al siguiente paso.

Size Settings for Normal Size chart #

Por otro lado, si opta por una vista normal, encontrará muchas opciones en la opción Estilo de tabla de tallas que puede personalizar:

• Alineación: Aquí puede ajustar la alineación del encabezado de la tabla de tallas.
• Color del título: Elija un color para el título.
• Tipografía del título: Aquí puede personalizar la familia de fuentes, el tamaño, el peso de la fuente y la altura de la línea.
• Margen del encabezado (px): Ajuste el margen alrededor del encabezado aquí.
• Ancho de la imagen (px): Aquí puede ajustar la altura de la imagen.
• Relleno de imagen (px): Proporcionar valor de relleno para la imagen.
• Radio del borde de la imagen (px): Seleccione un valor para el radio del borde.

Finally click on update to save WooCommerce product size charts.

Add size charts to product (Optional) #

Si quieres asignar una nueva tabla de tallas diferente a un producto específico, then you can follow these steps. The new size chart that you will assign to a new product will have prioridad más alta que la tabla de tamaño de categoría.

1. From the WordPress dashboard go to WooCommerce
2. Productos ⇒ Todos los productos
3. Click on edit option of the product you want to edit

Now from the product settings –

• Ir a Size Charts
• Check the Product chart option
• Once you check the chart option, the chart dropdown will be accessible. Choose the option you want from the dropdown.

Finally, update the product and see preview #

Once you choose your product chart, scroll up and click on update to save. 

Ahora, para ver el resultado final, vaya a la página del producto que acaba de editar y debería ver el gráfico del producto como se muestra en la vista previa a continuación.

Nota: Debe agregar manualmente tablas de tallas a todos los productos para los cuales desea mostrar la tabla de tallas.

Here is a preview of Product size cart with normal view.