O bloco de Upsells aprimora seu modelo de Produto Único do WooCommerce, exibindo automaticamente produtos de upsell recomendados abaixo do produto atual. Estes são produtos que você designou manualmente como upsells no WooCommerce, oferecendo uma maneira curada de guiar os clientes para itens complementares ou de maior valor.

Antes de adicionar este bloco, certifique-se de que seus produtos de upsell já estejam configurados no WooCommerce, navegando até a guia Produtos Vinculados de cada produto e adicionando itens ao campo Upsells. Uma vez no lugar, o bloco cuida da exibição — com controle total sobre colunas, ordenação, tipografia, estilo do botão e apresentação da imagem.

Requisitos: O bloco de Upsells está disponível em nosso plano de licença Elite licença. Ele foi projetado para uso no modelo Produto Único dentro do construtor de temas WooCommerce do SeedProd.

---

Adicionando o Bloco de Upsells ao Seu Modelo de Produto Único

Siga estas etapas para adicionar um bloco de Upsells ao seu modelo de Produto Único do SeedProd:

Etapa 1: Adicionar o Bloco

Em Tags de Modelo do WooCommerce, arraste e solte o bloco Upsells na seção desejada do seu modelo de Produto Único.

Etapa 2: Configurar as Definições de Conteúdo

Uma vez adicionado, clique no bloco de Upsells para abrir suas configurações. Na guia Conteúdo, você pode ajustar as seguintes opções de exibição:

• Colunas: Defina o número de colunas usadas para exibir produtos de upsell na grade.
• Posts por Página: Defina o número máximo de produtos de upsell a serem exibidos. Use -1 para mostrar todos os upsells disponíveis.
• Ordenar por: Escolha o campo usado para classificar os produtos de upsell — Data, ID, Ordem do Menu, Popularidade, Aleatório, Avaliação ou Título.
• Ordem: Defina a direção da classificação — ASC (ascendente) ou DESC (descendente).

Etapa 3: Personalizar o Design

Na guia Avançado, você pode personalizar a aparência visual do seu bloco de Upsells.

Estilos:

• Alinhamento: Defina o alinhamento horizontal da grade de produtos de upsell — Esquerda, Centro ou Direita — com controles por dispositivo para desktop, tablet e celular.
• Tipografia do Título: Defina a família da fonte, tamanho, peso, estilo, altura da linha, espaçamento entre letras e caixa de letras para os títulos dos produtos.
• Tipografia da Descrição: Defina as propriedades tipográficas para o texto da descrição do produto.
• Tipografia do Preço: Defina as propriedades tipográficas para o texto do preço do produto.
• Cor do Preço: Defina a cor para os preços regulares dos produtos.
• Cor do Selo de Venda: Defina a cor para o preço promocional ou selo de venda.

Botão:

• Tipografia do Botão: Defina a família da fonte, tamanho, peso, estilo e outras propriedades tipográficas para o texto do botão Adicionar ao Carrinho.
• Estilo do Botão: Escolha o estilo visual do botão Adicionar ao Carrinho — Flat, 2D, Vintage, Ghost ou Link.
• Cor do Botão: Defina a cor de fundo do botão.
• Tamanho do Botão: Escolha o tamanho do botão — Pequeno, Médio, Grande, X Grande ou 2X Grande.
• Raio da Borda: Arredonde os cantos do botão usando um controle deslizante.

Imagem:

• Sombra: Aplique uma sombra às imagens do produto usando tamanhos predefinidos — Nenhuma, Fina, Pequena, Média, Grande, X Grande, 2X Grande ou Sombra de Queda Inferior.
• Estilo da Borda: Escolha um estilo de borda para as imagens do produto — Sólida, Pontilhada ou Tracejada.
• Cor da Borda da Imagem: Defina a cor da borda da imagem do produto.
• Largura da Borda da Imagem: Defina larguras de borda individuais para cada lado da imagem do produto — Superior, Direita, Inferior e Esquerda.
• Espaçamento em Branco da Imagem: Adicione preenchimento interno entre a imagem do produto e sua borda.

Espaçamento:

• Margem: Defina o espaçamento externo ao redor do bloco em todos os quatro lados, com controles independentes para desktop, tablet e celular.
• Preenchimento: Defina o espaçamento interno dentro do wrapper do bloco em todos os quatro lados, com controles por dispositivo.

Atributos:

• Classe Personalizada: Adicione uma ou mais classes CSS personalizadas ao wrapper do bloco para estilização direcionada.
• ID CSS: O SeedProd gera automaticamente um ID CSS exclusivo para este bloco. Você pode usá-lo para referenciar o bloco em CSS ou JavaScript personalizado.
• Atributos Personalizados: Adicione atributos HTML personalizados ao elemento wrapper do bloco. Insira cada atributo em uma nova linha usando o formato chave|valor.

Visibilidade do Dispositivo:

• Ocultar no Desktop: Ative para ocultar o bloco quando visualizado em telas de desktop.
• Ocultar no Tablet: Ative para ocultar o bloco quando visualizado em telas de tablet.
• Ocultar no Celular: Ative para ocultar o bloco ao ser visualizado em telas de celular.

Efeitos de Animação:

• Efeito de Rolagem: Aplique uma animação acionada por rolagem ao bloco, incluindo opções de Rolagem Vertical e Rolagem Horizontal com controles de direção, velocidade e deslocamento de visualização.
• Efeito do Mouse: Aplique um efeito de paralaxe ao bloco, acionado pelo movimento do mouse.

Etapa 4: Salve Suas Alterações

Depois de terminar de configurar o bloco de Upsells e personalizar sua aparência, certifique-se de salvar seu trabalho.

---

Você adicionou com sucesso um bloco de Upsells ao seu modelo de Produto Único! Recomendações de upsell estrategicamente posicionadas são uma das maneiras mais eficazes de aumentar o valor médio do pedido no WooCommerce. Experimente o layout das colunas, os estilos dos botões e a apresentação das imagens para criar uma seção de recomendação de produtos que pareça nativa ao design da sua loja.