Durante muito tempo, deixei que o WooCommerce cuidasse dos produtos relacionados por conta própria. Configurava alguns upsells ou cross-sells e seguia em frente. Mas comecei a notar a frequência com que os clientes saíam sem explorar mais nada, especialmente quando as sugestões não correspondiam ao que eles realmente estavam procurando.
Comecei a testar diferentes maneiras de exibir produtos relacionados. Coloquei-os em uma posição mais alta na página, adicionei-os ao carrinho e usei o SeedProd para criar layouts que realmente faziam sentido. Essas pequenas alterações resultaram em mais cliques e pedidos maiores.
Neste guia, mostrarei como exibir os produtos relacionados do WooCommerce usando as ferramentas integradas e um construtor visual de arrastar e soltar, com base no que funcionou melhor para mim.
Resumo rápido: Como mostrar produtos relacionados no WooCommerce
- Configure produtos vinculados no WooCommerce
Use o editor de produtos padrão para adicionar upsells e cross-sells a itens individuais. - Exiba produtos relacionados sem usar um plugin
Permita que o WooCommerce mostre automaticamente sugestões com base em categorias e tags de produtos. - Personalize layouts de produtos relacionados com o SeedProd
Use um construtor de arrastar e soltar para controlar onde e como os itens relacionados aparecem em sua loja. - Adicione recomendações de produtos ao carrinho ou à página de checkout
Incentive compras de última hora antes do checkout usando os blocos do SeedProd. - Mostre ofertas de upsell em páginas de produtos individuais
Troque os padrões do WooCommerce por um layout mais limpo e de maior conversão.
| Recurso | Padrão do WooCommerce | Criador do SeedProd |
|---|---|---|
| Dificuldade de configuração | Moderado (produto por produto) | Fácil (arrastar e soltar) |
| Controle de projeto | Limitada | Controle visual total |
| Opções de colocação | Somente página do produto | Produto, carrinho ou qualquer outro lugar |
| Layouts personalizados | Não suportado | Totalmente personalizável |
| Upsells e Cross-Sells | Sim | Sim |
| Visualização móvel | Não | Sim |
| É necessário um plug-in? | Não | Sim (SeedProd) |
Dito isso, vamos dar uma olhada em como exibir produtos relacionados no WooCommerce.
Como configurar produtos relacionados no WooCommerce (sem necessidade de plug-in)
Se você não quiser alterar o tema do WooCommerce ou adicionar um plug-in de produtos relacionados ao seu site, os proprietários de lojas poderão exibir os produtos relacionados usando as configurações padrão do WooCommerce.
Esse método não oferece muitas opções de personalização, mas fornece uma maneira fácil de fazer upsell e cross-sell de produtos para aumentar o valor médio do pedido das vendas da loja.
Etapa 1. Adicionar produtos vinculados no editor do WooCommerce
Primeiro, vá para Products " All Products (Produtos " Todos os produtos ) no administrador do WordPress e edite qualquer produto do WooCommerce. Dentro das opções do produto, role para baixo até a seção Product Data (Dados do produto) e encontre a guia Linked Products (Produtos vinculados ).

Etapa 2. Escolha Upsells e Cross-Sells para cada produto
A seção Linked Products tem duas opções diferentes: Upsells e Cross-Sells.
Lembre-se, upsells são itens semelhantes ao produto original, mas com um preço mais alto. Cross-sells são produtos similares que os compradores podem querer comprar além do produto principal.
Comece a digitar os nomes dos produtos no campo que deseja usar e clique nos itens corretos quando eles aparecerem.

Etapa 3. Visualizar produtos relacionados na página do produto
Depois de adicionar cross-sells ou upsells aos seus produtos do WooCommerce, role a página para cima e clique no botão Preview Changes (Visualizar alterações ).
Você verá os produtos relacionados abaixo da descrição do produto atual.

Como personalizar os produtos relacionados do WooCommerce com o SeedProd
Agora, vamos dar uma olhada em como mostrar recomendações personalizadas de produtos relacionados com o SeedProd.

O SeedProd é um dos melhores construtores de páginas e sites de arrastar e soltar para WordPress. Ele permite que você crie e personalize qualquer parte do seu site WordPress visualmente e sem código.
Você também pode usar o SeedProd para personalizar sua loja WooCommerce. Com modelos completos de sites do WooCommerce e poderosos blocos do WordPress, você pode adaptar sua loja on-line às suas necessidades específicas de design sem contratar um desenvolvedor.
Por exemplo, você pode criar páginas personalizadas de categorias de produtos, configurar descrições de recursos de produtos e até mesmo adicionar um carrinho de menu à navegação da sua loja.
Esse método substituirá seu tema atual do WooCommerce por um design personalizado.
Ele não requer código, códigos de acesso, temas secundários, complementos ou plug-ins de produtos recomendados. Você não precisará nem mesmo editar seu arquivo functions.php. Em vez disso, você pode personalizar tudo visualmente, sem complicação.
Portanto, siga as etapas abaixo para adicionar facilmente novos produtos recomendados ao WooCommerce com o Theme Builder do SeedProd.
Etapa 1. Instalar e ativar o SeedProd com suporte ao WooCommerce
Para começar a usar esse método, você precisará obter a versão Elite do SeedProd.
Ele vem com suporte total ao WooCommerce e todos os blocos e seções de que você precisa para personalizar, fazer vendas cruzadas e upsell de produtos na sua loja.
Depois de escolher seu plano e criar sua conta, vá até a guia Downloads de sua conta SeedProd e faça o download do plug-in.

Enquanto estiver lá, copie a chave de licença do produto, pois você precisará dela em breve.
Agora, acesse seu site do WordPress e carregue o arquivo .zip do SeedProd em sua loja. Se precisar de ajuda com isso, siga estas instruções sobre como instalar e ativar um plug-in do WordPress.
Quando o plug-in estiver ativo, navegue até SeedProd " Settings e cole a chave de licença que você copiou há alguns instantes no campo disponível.

Clique no botão Verify Key e você estará pronto para começar a personalizar seu site WooCommerce.
Etapa 2. Escolha um kit de modelo do WooCommerce no SeedProd
Em seguida, acesse SeedProd " Theme Builder em seu painel do WordPress. É aqui que você poderá personalizar cada parte do seu tema do WooCommerce, mas, primeiro, você precisará escolher um modelo.

Para escolher um modelo, clique no botão Temas.
Você também pode selecionar o filtro WooCommerce para ver apenas os kits de modelos WooCommerce.

Quando encontrar um kit de que goste, passe o mouse sobre ele e clique no ícone de marca de seleção.

O SeedProd importará todo o kit para seu site WordPress, incluindo páginas de produtos, carrinhos de compras, checkouts, arquivos de produtos e páginas de lojas. Você pode ver todas essas partes do modelo no painel do Theme Builder.

Você também descobrirá que o SeedProd cria automaticamente páginas de conteúdo como as páginas sobre, de contato e de serviço da demonstração do modelo. Você pode encontrar essas páginas no menu de páginas padrão do WordPress, onde pode clicar para editá-las com o construtor de arrastar e soltar do SeedProd.

Depois de instalar o modelo, você está pronto para começar a adicionar produtos relacionados à sua loja. Vamos começar mostrando os produtos relacionados na página do carrinho.
Para editar a página do carrinho, verifique se você está no painel do Theme Builder, localize o modelo Cart (Carrinho), passe o mouse sobre ele e clique no link Edit Design (Editar design ).

Sua página do carrinho de compras será aberta no editor visual do SeedProd.
Etapa 3. Adicionar produtos relacionados ao layout da página do carrinho
Quando a página do carrinho for aberta, você verá que ela tem um layout de duas colunas com blocos e seções do WordPress à esquerda e uma visualização ao vivo à direita.

Ao clicar em qualquer lugar da visualização, você pode personalizar as configurações e as opções de estilo desse bloco com apenas alguns cliques. Por exemplo, as configurações do bloco Cart permitem que você altere a tipografia, os estilos dos botões, as cores dos campos e muito mais.

Adicionar produtos relacionados à página do carrinho é muito fácil com o SeedProd.
Role até o título WooCommerce Template Tags na barra lateral esquerda e encontre o bloco Products Related. Agora clique e arraste o bloco para o lugar em sua visualização de página.

Nas configurações do bloco, você pode ajustar as colunas e alterar o número de produtos relacionados. Você também pode solicitar produtos específicos escolhendo uma opção no menu suspenso:
- Data
- ID do produto
- Pedido de menu
- Popularidade
- Aleatório
- Classificação
- Título

Na guia Advanced settings (Configurações avançadas ), você pode ajustar o estilo do bloco de produtos relacionados. Por exemplo, você pode alterar a tipografia, as cores, os botões, as sombras da imagem e muito mais.

Quando estiver satisfeito com a aparência de tudo, clique no botão Save (Salvar ) no canto superior direito da tela.

Agora vamos dar uma olhada em como fazer up-sell de produtos no WooCommerce com o SeedProd.
Etapa 4. Mostrar ofertas de upsell em páginas de produtos individuais
Se quiser fazer up-sell de produtos do WooCommerce, você pode usar o bloco Upsell do SeedProd. Mas, primeiro, você precisará vincular produtos nas configurações de produto do WooCommerce seguindo as etapas do Método 1.
O bloco Upsell do SeedProd só funciona em modelos de página de produto único, portanto, você precisará voltar ao painel do Theme Builder e editar seu modelo de página de produto.

O modelo que estamos usando já apresenta recomendações de produtos. Portanto, vamos remover os produtos relacionados clicando no ícone da lixeira.

Em seguida, localize o bloco Upsell na seção WooCommerce Template Tags e arraste-o para a sua página.

Você não verá uma visualização ao vivo desse bloco, mas pode personalizá-lo como o bloco de produtos relacionados.
Continue personalizando seu site WooCommerce até que esteja satisfeito com a aparência desejada. E não se esqueça de clicar no botão Save para salvar suas alterações regularmente.
Etapa 5. Publique seu tema e torne-o ativo
Quando estiver pronto para publicar as alterações em seu site, vá para a página Theme Builder e localize a opção Enable SeedProd Theme (Ativar tema SeedProd ). Coloque-o na posição "Yes" e suas alterações serão publicadas.

Agora você pode visualizar suas páginas de produtos individuais e páginas de carrinho para ver recomendações de produtos semelhantes.
Aqui está um exemplo da página do carrinho:

E aqui estão os exemplos de upsell na página do produto:

Se quiser ocultar os produtos relacionados, basta remover a nova seção da sua página.
Aí está!
Perguntas frequentes sobre produtos relacionados no WooCommerce
Mostrar produtos relacionados no WooCommerce não se trata apenas de preencher espaço na página. É uma maneira simples de ajudar os compradores a encontrar mais do que desejam e pode aumentar sua receita com tranquilidade no processo.
Se você está satisfeito com a configuração padrão, o WooCommerce oferece o que você precisa para começar. Mas se você quiser ter mais controle sobre a aparência e o local em que as coisas aparecem, o SeedProd facilita a personalização de tudo sem escrever uma única linha de código.
Você também pode gostar destes outros tutoriais e dicas sobre o WooCommerce:
- Melhores plug-ins do WooCommerce para sua loja
- Como adicionar botões personalizados Adicionar ao carrinho no WooCommerce
- Como criar uma página de agradecimento do WooCommerce (facilmente)
- Como personalizar a guia Informações adicionais do WooCommerce
- Como adicionar o botão Exibir carrinho no WooCommerce
- Como alterar o título da página da loja no WooCommerce
- Como criar uma impressionante galeria de imagens de produtos no WooCommerce
- Como adicionar classificação por estrelas às páginas de produtos do WooCommerce
- Como obter e exibir descrições de produtos no WooCommerce
- Como exibir produtos em destaque no WooCommerce
- Como ocultar produtos fora de estoque no WooCommerce
Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, sinta-se à vontade para participar da conversa no YouTube, X e Facebook para obter mais conselhos úteis e conteúdo para expandir seus negócios.
