Como Exibir Produtos em Destaque do WooCommerce (+ Produtos Relacionados) 

Em uma loja WooCommerce que eu gerenciava, eu costumava deixar o layout padrão decidir o que os compradores viam. Os clientes continuavam saindo sem explorar nada além do produto em que pousavam.

Duas pequenas mudanças corrigiram isso: produtos em destaque do WooCommerce para colocar os melhores itens onde as pessoas realmente olham, e produtos relacionados para sugerir uma próxima compra sensata. Juntos, eles levaram a mais cliques e pedidos maiores.

Neste guia, mostrarei 3 maneiras de exibir produtos em destaque, depois como configurar e personalizar produtos relacionados, upsells e cross-sells.

O Que São Produtos em Destaque no WooCommerce?

Um produto em destaque é aquele que você marca manualmente no WooCommerce para destacá-lo. Uma vez que você define um produto como “Em Destaque”, você pode exibi-lo em seções especiais no seu site, separado do seu catálogo regular.

Os melhores produtos para destacar geralmente são seus top de vendas, novidades ou itens de alta margem. Muitos proprietários de lojas alternam produtos em destaque sazonalmente, destacando equipamentos de inverno em dezembro ou itens de volta às aulas em agosto.

Produtos em destaque não são o mesmo que produtos relacionados. Você escolhe os produtos em destaque, enquanto o WooCommerce escolhe os produtos relacionados automaticamente com base em categorias e tags compartilhadas. Cobrirei como configurar produtos relacionados mais adiante neste guia.

Como Adicionar Produtos em Destaque no WooCommerce

Antes de poder exibir produtos em destaque, você precisa marcá-los no WooCommerce primeiro. Você pode fazer isso editando qualquer produto existente.

Vá para Produtos » Todos os Produtos na sua área de administração do WordPress. Em seguida, passe o mouse sobre um produto e clique na opção Editar.

Em seguida, localize o painel “Publicar” no lado direito do editor do WordPress. A partir daí, clique em Editar ao lado do título “Visibilidade do Catálogo”.

Clique na caixa de seleção “Este é um produto em destaque” e selecione OK. Em seguida, clique em Atualizar para salvar suas alterações.

Repita este processo para cada produto que você deseja definir como em destaque. Para agilizar, você pode clicar na opção Edição Rápida e encontrar a caixa de seleção “Produto em Destaque” nesse painel.

Alternativamente, você pode clicar no ícone de estrela ao lado de cada produto para destacá-lo.

Não tem certeza de quais itens exibir? Comece com seus mais vendidos ou ofertas sazonais em suas páginas de produto.

Depois de marcar seus produtos como em destaque, aqui estão três maneiras de exibi-los em sua loja.

Método 1: Exiba Produtos em Destaque do WooCommerce com o SeedProd

Este primeiro método usa o SeedProd para exibir vários produtos em destaque em sua loja ao mesmo tempo.

SeedProd é um dos melhores construtores de sites WordPress, com mais de 1 milhão de usuários. Você pode criar um tema WordPress personalizado com seu construtor de arrastar e soltar, sem necessidade de codificação.

Para proprietários de lojas, a parte útil é a integração com o WooCommerce. Você pode exibir dados de produtos ao vivo em qualquer lugar do seu site, e as flexíveis grades de produtos facilitam a criação de layouts personalizados sem código.

Veja como usar o SeedProd para exibir seus produtos em destaque do WooCommerce.

Passo 1. Instale e Ative o SeedProd

Comece instalando e ativando o SeedProd em seu site WordPress.

Você pode seguir este guia sobre como instalar um plugin do WordPress se precisar de ajuda.

Após ativar o SeedProd, vá para SeedProd » Configurações e insira sua chave de licença do SeedProd.

Você pode encontrar a chave de licença na seção “Downloads” do painel da sua conta no site do SeedProd.

Após inserir sua chave de licença, clique no botão Verificar Chave para armazenar as informações da sua conta.

Etapa 2. Crie um Tema WooCommerce

Em seguida, configure sua loja WooCommerce.

O SeedProd oferece duas maneiras de fazer isso:

• Tema WooCommerce pré-construído: importe um modelo de tema WooCommerce pronto, e o SeedProd cria todas as suas páginas de loja automaticamente.
• Partes individuais do tema: construa cada parte da sua loja uma de cada vez usando o botão Modelos de Tema.

Usaremos o tema pré-criado para este guia, pois ele configura tudo com um clique.

Para criar um novo tema WooCommerce, vá para SeedProd » Theme Builder e clique no botão Themes.

Isso abre a biblioteca de temas do SeedProd. Todos os temas são compatíveis com dispositivos móveis e você pode editar o design no construtor de arrastar e soltar.

Passe o mouse sobre qualquer design e clique na marca de seleção para importá-lo. Estamos usando o "WooCommerce Starter Theme" aqui.

Após importar, você verá todos os modelos que compõem seu site. Você pode editar cada um no construtor do SeedProd, como personalizar a página da Loja.

Etapa 3. Adicionar a Grade de Produtos em Destaque do WooCommerce

Nesta etapa, você editará a página da Loja e adicionará uma grade de produtos que exibe apenas seus produtos em destaque.

Encontre o modelo da página da Loja no construtor de temas e clique em Edit Design.

O construtor de páginas do SeedProd mostra blocos e seções à esquerda e uma visualização ao vivo à direita.

Clique em qualquer elemento para editar suas configurações.

Clique em um produto para abrir o painel Grade de Produtos, onde você pode:

• Alterar o número de colunas
• Exibir produtos por tipo ou categoria para layouts de produtos mais focados
• Mostrar paginação
• Alterar a ordem dos produtos

Você pode personalizar fontes, tamanhos de fonte, cores, espaçamento e muito mais na guia Avançado.

Adicionar conteúdo funciona da mesma maneira. Arraste um bloco do painel esquerdo e solte-o na página.

Role para baixo até o painel de blocos do WooCommerce na barra lateral esquerda. Em seguida, encontre o bloco Produtos em Destaque e arraste-o para sua página.

Clique no bloco para abrir suas configurações. Ele filtra seus produtos por status de Destaque automaticamente.

Tudo o que resta é personalizar a grade de produtos para atender às suas necessidades. Você pode fazer com que os produtos em destaque se destaquem alterando a cor do selo, a borda da imagem ou adicionando um título acima da grade.

Quando estiver satisfeito com o layout, clique no botão verde Salvar.

Você pode repetir este processo para personalizar o restante do seu tema, incluindo:

• Arquivos de Produto
• Página do Produto
• Cabeçalho e Rodapé
• Página do Blog
• Barra lateral
• Página inicial

Etapa 4. Publicar seu tema WooCommerce

Depois de terminar de configurar seus produtos em destaque, você está pronto para publicar.

Para fazer isso, vá para SeedProd » Theme Builder e ative o controle deslizante Enable SeedProd Theme para a posição "On".

É isso! Agora você pode visualizar sua loja e ver seus produtos em destaque ao vivo.

Método 2: Use o Bloco de Produto em Destaque do WooCommerce

O WooCommerce tem um bloco integrado de Produto em Destaque que você pode adicionar a qualquer página ou postagem da sua loja online. Nenhum plugin extra é necessário.

Ele tem menos opções do que o SeedProd, mas é rápido de configurar se você precisar apenas de uma exibição básica.

Para usar este método, crie ou edite uma página e clique no ícone de mais (+) no editor de blocos do WordPress para adicionar um novo bloco. Em seguida, digite “WooCommerce” no campo de pesquisa e clique no bloco Produto em Destaque .

A partir daí, escolha um produto para exibir e clique em Done.

Seu produto aparece na página imediatamente.

As configurações do bloco permitem controlar:

• Descrição
• Preço
• Sobreposição
• Opacidade da Sobreposição

O bloco Produto em Destaque mostra um produto por vez. Para uma grade de vários itens em destaque, adicione o bloco Coleção de Produtos em vez disso e escolha sua coleção “Produtos em Destaque”, que filtra por status de destaque para você.

Clique em Publicar ou Atualizar quando terminar. Em seguida, visualize sua página para ver os produtos ao vivo.

Se sua loja usa um tema clássico, você pode usar o mesmo bloco para exibir produtos em destaque na sua barra lateral do WooCommerce. Vá para Aparência » Widgets, clique no ícone de mais em qualquer barra lateral e adicione o bloco lá.

Salve suas alterações e, em seguida, visite qualquer página com essa barra lateral para ver o widget.

Método 3: Use o Shortcode de Produto em Destaque do WooCommerce

O terceiro método usa um shortcode. Ele funciona no editor clássico do WordPress, ou se você quiser adicionar produtos em destaque diretamente em um modelo de tema do WordPress.

Edite ou crie uma página e cole este shortcode no editor.

[featured_products]

Quando você visualizar a página, verá todos os seus produtos em destaque em uma grade.

Você pode controlar quantos produtos mostrar e quantas colunas usar. Por exemplo:

[featured_products limit="2" columns="2"]

Você também pode filtrar por categoria usando category="slug", alterar a ordem de classificação com orderby="date" ou orderby="popularity", e definir a direção com order="ASC" ou order="DESC".

A documentação atual do WooCommerce lista apenas [products visibility="featured"], que faz o mesmo trabalho. Ambos os shortcodes funcionam, mas a versão products é a documentada.

Experimente valores diferentes até encontrar um layout que funcione. As opções são limitadas em comparação com o SeedProd, mas é a maneira mais rápida de mostrar produtos em destaque sem nenhuma configuração.

Como Configurar Produtos Relacionados no WooCommerce (Sem Plugin)

Produtos em destaque colocam seus melhores itens na frente dos compradores. Produtos relacionados fazem o trabalho oposto: eles sugerem o que alguém pode querer em seguida, com base no produto que já está visualizando.

O WooCommerce gera sua seção “Produtos relacionados” automaticamente a partir de categorias e tags compartilhadas, então você não pode escolher manualmente essas sugestões sem um plugin. O que você pode controlar são upsells e cross-sells, que você define por produto.

Um upsell é uma versão mais cara do produto que alguém está visualizando. Um cross-sell é um produto que combina com o que está no carrinho, como uma capa sugerida ao lado de um celular.

Veja como a configuração padrão se compara à personalização dos seus produtos relacionados com o SeedProd:

Recurso	WooCommerce Padrão	Construtor SeedProd
Dificuldade de Configuração	Moderada (produto por produto)	Fácil (arrastar e soltar)
Controle de Design	Limitado	Controle visual completo
Opções de Posicionamento	Apenas página do produto	Produto, carrinho ou em qualquer lugar
Layouts Personalizados	Não suportado	Totalmente personalizável
Upsells e Cross-Sells	Sim	Sim
Visualização Móvel	Não	Sim
Plugin Necessário?	Não	Sim (SeedProd)

Vamos começar com o método integrado.

Etapa 1. Adicionar Produtos Vinculados no Editor do WooCommerce

Vá para Produtos » Todos os Produtos no seu admin do WordPress e edite qualquer produto WooCommerce. Dentro das opções do produto, role para baixo até a seção Dados do Produto e encontre a aba Produtos Relacionados.

Etapa 2. Escolher Upsells e Cross-Sells para Cada Produto

A seção Produtos Relacionados tem 2 opções: Upsells e Cross-sells.

Comece a digitar os nomes dos produtos no campo que você deseja usar e clique nos itens corretos quando eles aparecerem.

Etapa 3. Visualizar Produtos Relacionados na Página do Produto

Após adicionar cross-sells ou upsells aos seus produtos WooCommerce, role a página para cima e clique no botão Visualizar Alterações. Você verá os produtos relacionados sob a descrição do seu produto atual.

Este método não oferece muitas opções de personalização, mas é uma maneira rápida de começar a fazer upsell e cross-sell. Se você quiser controle sobre onde as sugestões aparecem e como elas se parecem, a próxima seção aborda isso.

Como Personalizar Produtos Relacionados do WooCommerce com SeedProd

A seção padrão de produtos relacionados fica apenas nas suas páginas de produto, e você não pode mudar sua aparência. Com o SeedProd, você pode colocar recomendações de produtos na sua página de carrinho, páginas de produto ou em qualquer outro lugar, e estilizar para combinar com sua loja.

Você precisará do SeedProd instalado com um tema WooCommerce importado para isso. Se você ainda não fez isso, siga os Passos 1 e 2 no Método 1 primeiro.

Etapa 1. Adicione Produtos Relacionados ao Layout da Sua Página de Carrinho

A página do carrinho é um lugar inteligente para recomendações porque os compradores já decidiram comprar. Para editar a sua, vá para o painel do Theme Builder, encontre o modelo de Carrinho, passe o mouse sobre ele e clique em Editar Design.

Sua página de carrinho de compras abre no mesmo editor visual que você usou anteriormente. Clicar em qualquer lugar na visualização permite personalizar as configurações desse bloco, como a tipografia do bloco de Carrinho, estilos de botão e cores de campo.

Agora role até o cabeçalho WooCommerce Template Tags na barra lateral esquerda e encontre o bloco Produtos Relacionados. Clique e arraste o bloco para o local na visualização da sua página.

Dentro das configurações do bloco, você pode ajustar as colunas e alterar o número de produtos relacionados. Você também pode ordenar os produtos por data, popularidade, avaliação, título e mais.

Na aba de configurações Avançadas, você pode ajustar a estilização do seu bloco de produtos relacionados, como a tipografia, cores, botões e sombras de imagem.

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

Etapa 2. Mostre Ofertas de Upsell nas Páginas de Produtos Individuais

Para fazer upsell de produtos WooCommerce, use o bloco Upsells do SeedProd. Ele puxa os upsells que você vinculou nas suas configurações de produto WooCommerce anteriormente, então configure-os primeiro.

O bloco Upsells só funciona em modelos de página de produto único, então volte ao painel do Theme Builder e edite o modelo da sua Página de Produto.

O modelo que estamos usando já apresenta recomendações de produtos. Então, vamos remover esses produtos relacionados clicando no ícone de lixeira, abrindo espaço para os upsells.

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

Você não verá uma visualização ao vivo deste bloco, mas pode personalizá-lo como o bloco de produtos relacionados. Não se esqueça de clicar em Salvar quando terminar.

Etapa 3. Publique e Visualize Seus Produtos Relacionados

Se o seu tema SeedProd ainda não estiver ativo, ative o controle deslizante Ativar Tema SeedProd, da mesma forma que você fez no Método 1. Em seguida, visualize suas páginas de produto e carrinho para ver as recomendações.

Aqui está um exemplo de produtos relacionados na página do carrinho:

E aqui estão os upsells na página do produto:

Se você quiser ocultar produtos relacionados, remova o bloco do seu modelo e salve novamente.

Perguntas Frequentes Sobre Produtos em Destaque e Relacionados do WooCommerce

Como remover o status de destaque de um produto no WooCommerce?

Vá para Produtos » Todos os Produtos no seu painel do WordPress e clique no ícone de estrela ao lado do produto para desativar o status de destaque. Você também pode usar Edição Rápida e desmarcar a caixa Produto em Destaque, depois salvar. O produto não aparecerá mais em exibições de produtos em destaque ou shortcodes.

Como exibir apenas produtos em destaque na minha página de loja do WooCommerce?

A maneira mais fácil é usar o SeedProd para personalizar sua página de loja WooCommerce e adicionar um bloco de Produtos em Destaque que filtra automaticamente por status de destaque. Se você preferir o loop de loja padrão, precisará de um plugin ou trecho de código que filtre produtos pela sinalização de destaque.

Posso limitar quantos produtos em destaque são exibidos?

Sim. Com o método de shortcode, adicione limit="4" para definir o número: [featured_products limit="4"]. Com o bloco de grade de produtos do SeedProd, você define a contagem de produtos diretamente no painel de configurações do bloco, sem necessidade de código.

Produtos em destaque do WooCommerce aparecem automaticamente na minha página inicial?

Não. Marcar um produto como destaque apenas lhe confere esse status no WooCommerce. Você ainda precisa adicionar um bloco, shortcode ou widget a uma página para que eles sejam exibidos. A maioria dos proprietários de lojas adiciona produtos em destaque à sua página de loja ou página inicial manualmente usando um dos três métodos neste guia.

Qual é a diferença entre upsells e cross-sells no WooCommerce?

Upsells são versões de maior valor ou atualizadas do produto atual, e são exibidas na página do produto individual. Cross-sells são produtos complementares que aparecem na página do carrinho durante o checkout. Você pode adicionar ambos na seção Produtos Vinculados ao editar um produto.

Existe um limite para produtos relacionados no WooCommerce?

Não há um limite estrito, mas é melhor mantê-lo entre 3 e 5 itens. Muitos podem sobrecarregar os compradores e poluir a página. Com ferramentas como o SeedProd, você pode escolher exatamente quantos produtos relacionados mostrar e onde exibi-los.

Mais Maneiras de Personalizar o WooCommerce

Quer fazer mais com sua loja WooCommerce?

Aqui estão alguns guias que podem ajudar:

• Como Personalizar a Aba Informações Adicionais do WooCommerce
• Como personalizar sua página de carrinho do WooCommerce
• Como Adicionar Avaliação por Estrelas às Páginas de Produto do WooCommerce
• Como Exibir Categorias e Tags de Produtos no WooCommerce
• Como Obter e Exibir Descrições de Produtos no WooCommerce
• Como Adicionar Botões Personalizados de Adicionar ao Carrinho no WooCommerce
• Como Criar uma Página de Agradecimento no WooCommerce (Facilmente)
• Como Corrigir o Erro de Carrinho de Compras do WooCommerce Não Funciona
• Como Ocultar Produtos Fora de Estoque no WooCommerce

Agora você sabe como exibir produtos em destaque de três maneiras e como colocar produtos relacionados, upsells e cross-sells exatamente onde os compradores os verão. Escolha o método que se adapta à sua loja.

Pronto para dar um visual personalizado às suas recomendações de produtos? Você não precisa tocar em uma linha de código. Obtenha o SeedProd e comece a projetar sua loja hoje mesmo.

Obrigado por ler! Adoraríamos saber sua opinião, então sinta-se à vontade para participar da conversa no YouTube, X e Facebook para mais conselhos e conteúdo úteis para expandir seus negócios.