O bloco Upsells aprimora seu modelo WooCommerce Single Product, exibindo automaticamente produtos recomendados para upsell abaixo do produto atual. Esses são produtos que você designou manualmente como upsells no WooCommerce, oferecendo uma maneira selecionada de orientar os clientes em direção a 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 instalado, o bloco controla a exibição — com controle total sobre colunas, ordenação, tipografia, estilo dos botões e apresentação das imagens.

Requisitos:O bloco Upsells está disponível em nossoplano de licença Elite. Ele foi projetado para ser usado no modelo de produto único dentro do construtor de temas WooCommerce do SeedProd.

---

Adicionando o bloco de vendas adicionais ao seu modelo de produto único

Siga estas etapas para adicionar um bloco de vendas adicionais ao seu modelo de produto único do SeedProd:

Passo 1: Adicione 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

Depois de adicionar, clique no bloco 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 utilizadas para exibir produtos complementares na grade.
• Postagens por página: Defina o número máximo de produtos de upsell a serem exibidos. Use -1 para mostrar todas as vendas adicionais disponíveis.
• Ordenar por: Escolha o campo usado para classificar os produtos de upsell — Data, ID, Ordem do menu, Popularidade, Aleatório, Classificaçã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 vendas adicionais.

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, o tamanho, a espessura, o estilo, a altura da linha, o espaçamento entre letras e as maiúsculas e minúsculas dos títulos dos produtos.
• Descrição Tipografia: Defina as propriedades tipográficas para o texto da descrição do produto.
• Tipografia do preço: defina as propriedades tipográficas do texto do preço do produto.
• Cor do preço: defina a cor para os preços normais dos produtos.
• Cor do selo de promoção: defina a cor do preço promocional ou do selo de promoção.

Botão:

• Tipografia do botão: defina a família de fontes, tamanho, espessura, 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 — Plano, 2D, Vintage, Fantasma 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, Extragrande ou 2X Grande.
• Raio da borda: arredonde os cantos do botão usando um controle deslizante.

Imagem:

• Sombra: aplique uma sombra às imagens dos produtos usando tamanhos predefinidos — Nenhum, Linha do cabelo, Pequeno, Médio, Grande, Extragrande, 2X Grande ou Sombra inferior.
• Estilo da borda: escolha um estilo de borda para as imagens dos produtos — 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, direito, inferior e esquerdo.
• Preenchimento do espaço 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 nos quatro lados, com controles independentes para desktop, tablet e celular.
• Preenchimento: defina o espaçamento interno dentro do bloco wrapper nos quatro lados, com controles por dispositivo.

Atributos:

• Classe personalizada: adicione uma ou mais classes CSS personalizadas ao invólucro do bloco para obter um estilo específico.
• 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 personalizados.
• 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 na área de trabalho: alterne para ocultar o bloco quando visualizado em telas de desktop.
• Ocultar no tablet: alterne para ocultar o bloco quando visualizado em telas de tablet.
• Ocultar no celular: Alterne para ocultar o bloco quando visualizado em telas de celular.

Efeitos de animação:

• Efeito de rolagem: aplique uma animação acionada pela rolagem ao bloco, incluindo opções de rolagem vertical e horizontal com controles de direção, velocidade e deslocamento da janela de visualização.
• Efeito do mouse: aplique um efeito de paralaxe acionado pelo movimento do mouse ao bloco.

Etapa 4: Salve suas alterações

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

---

Você adicionou com sucesso um bloco de vendas adicionais ao seu modelo de produto único! Recomendações de vendas adicionais estrategicamente posicionadas são uma das formas mais eficazes de aumentar o valor médio dos pedidos no WooCommerce. Experimente diferentes layouts de colunas, estilos de botões e apresentações de imagens para criar uma seção de recomendações de produtos que se integre naturalmente ao design da sua loja.