Com o 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 #

Você pode adicionar Tabelas de tamanhos de produtos to your WooCommerce Elementor website by following the simple steps.
Before that, get ShopEngine Pro now 👇

Etapa 1: ativar o módulo Tabelas de tamanhos de produtos do ShopEngine #

From the WordPress dashboard –

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

Depois de ver as configurações, ativar o 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 ligue todos os módulos de uma vez.

Step 2: Add a new product size chart #

Para adicionar uma nova tabela de tamanhos, clique no +Adicionar novo botão

Epand the arrow sign, then –

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

Observação: A tabela de tamanhos atribuída será aplicável a todos os produtos da categoria.

Observação: você pode adicionar quantos gráficos desejar. Depois de adicionar e salvar, você pode voltar a qualquer momento para edite o título e a imagem do gráfico de gráficos já adicionados. E também excluir qualquer um dos 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. 

Observação: Se precisar de ajuda sobre como crie e edite um único modelo de produto do shopEngine confira nossa documentação.

1. From ShopEngine widgets
2. Find product size chart, turn it on
3. Salve as alterações

Quando estiver no modo Editar com Elementor do modelo de produto único, pesquise por Product Size Chart widget e simplesmente apenas arrastar e soltar no local desejado.

Step 4: Customize the Widget #

You will get two settings for the size chart in the Guia de conteúdo which includes:

• View cart as: Você pode exibir a tabela de tamanhos de duas maneiras, Modal e Normal.

Modal: Modal is the default option and with modal you also get the option to defina um rótulo de botão personalizado.

Normal: Se você quiser escolher um modo normal, no menu suspenso Exibir gráfico como, escolha Normal. Depois de escolher normal, você terá uma nova opção Título do gráfico, onde poderá definir um título personalizado para a imagem.

Etiqueta do botão: It allows you to customize the text displayed on the button.

Etapa 5. Configurações de estilo da tabela de tamanhos de produto modal/normal #

Dependendo do tipo de opção de gráfico de tamanho de visualização que você escolher, você obterá configurações de estilo relevantes. Para acessar as configurações de estilo, vá para a guia estilo no editor 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ão de tabelas de tamanhos: Expand the size chart menu, and you will find the following option:

• Tipografia:Escolha o tamanho da fonte, a família da fonte e a espessura da fonte.
• Cor e cor de fundo: Selecione a cor e a cor de fundo para a visualização instantânea e normal.
• Tipo de borda: Você pode escolher o tipo de borda como nenhuma, sólida, dupla, tracejada, etc.
• Largura: Escolha a largura esquerda, direita, superior e inferior.
• Cor: Selecione uma cor para a borda.
• Raio da borda (px):  Forneça um raio de borda.
• Preenchimento (px): Ajuste o preenchimento superior, direito, inferior e esquerdo.

Size Charts Popups: Expanda o pop-up da tabela de tamanhos para personalizar a seguinte opção:

• Raio da borda (px): Escolha um valor de raio de borda.
• Preenchimento (px): Ajuste o preenchimento superior, direito, inferior e esquerdo.
• Cor de fundo: Aqui você pode escolher a cor de fundo da imagem.

Se você quiser ir para a visualização Modal então depois de fazer todas as alterações clique em atualizar para salvar e passar para a próxima etapa.

Size Settings for Normal Size chart #

Por outro lado, se você optar por uma visualização normal, encontrará muitas opções na opção Estilo de gráfico de tamanho que pode personalizar:

• Alinhamento: Aqui você pode ajustar o alinhamento do cabeçalho da tabela de tamanhos.
• Cor do título: Escolha uma cor para o título.
• Tipografia do título: Aqui você pode personalizar a família da fonte, tamanho, espessura da fonte e altura da linha.
• Margem do título (px): Ajuste a margem ao redor do título aqui.
• Largura da imagem (px): Aqui você pode ajustar a altura da imagem.
• Preenchimento de imagem (px): Fornece valor de preenchimento para a imagem
• Raio da borda da imagem (px): Selecione um valor para o raio da borda.

Finally click on update to save WooCommerce product size charts.

Add size charts to product (Optional) #

Se você quiser atribuir uma nova tabela de tamanhos diferentes a um produto específico, then you can follow these steps. The new size chart that you will assign to a new product will have prioridade mais alta do que o gráfico de tamanho de categoria.

1. From the WordPress dashboard go to WooCommerce
2. Produtos ⇒ Todos os produtos
3. Click on edit option of the product you want to edit

Now from the product settings –

• Ir para 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. 

Agora, para ver o resultado final, vá para a página do produto que você acabou de editar e deverá ver a tabela do produto como a visualização abaixo.

Observação: Você precisa adicionar tabelas de tamanhos manualmente a todos os produtos para os quais deseja exibir a tabela de tamanhos.

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