Procurando uma maneira fácil de mostrar os produtos em destaque do WooCommerce em seu site?
Com a categoria de produto em destaque, você pode exibir seus produtos mais importantes onde os compradores podem vê-los com mais facilidade. Dessa forma, você pode fornecer instantaneamente aos usuários o que eles querem, melhorando a experiência do usuário e fechando as vendas mais rapidamente.
Este artigo mostrará três maneiras de adicionar produtos em destaque à sua loja WooCommerce.
O que são produtos em destaque do WooCommerce?
Os produtos em destaque são um ID de categoria no WooCommerce que permite que você exiba itens específicos em sua loja. Depois de definir um produto do WooCommerce como "Em destaque", você pode exibi-lo em seu site separado de outros produtos.
Por exemplo, você pode permitir que os compradores filtrem a visibilidade do catálogo de produtos por "Destaque" para mostrar os produtos que você recomenda. Como resultado, é mais fácil para os compradores encontrarem seus melhores produtos sem ter que percorrer todos os produtos do seu site.
Como definir um produto em destaque no WooCommerce?
Antes de exibir os produtos em destaque em seu site, primeiro você precisa definir determinados produtos com a configuração de visibilidade de produto "Em destaque". Você pode fazer isso editando um produto existente ou adicionando um novo produto no WooCommerce.
Para adicionar a configuração "Produto em destaque" a um produto existente, vá para Produtos " Todos os produtos na á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 "Publish" (Publicar) no lado direito do editor do WordPress. A partir daí, clique em Edit (Editar ) ao lado do título "Catalog Visibility" (Visibilidade do catálogo).
Agora você pode clicar na caixa de seleção "Este é um produto em destaque" e selecionar OK. Agora, clique em Update (Atualizar ) para salvar suas alterações.
Repita esse processo para cada produto que você deseja definir como em destaque. Para agilizar o processo, você pode clicar na opção Quick Edit (Edição rápida ) e localizar a caixa de seleção "Featured Product" (Produto em destaque) nesse painel.
Como alternativa, você pode clicar no ícone de estrela ao lado de cada produto para destacá-lo.
Depois de escolher os produtos a serem apresentados em seu site WooCommerce, você estará pronto para exibi-los nas páginas de produtos.
A seguir, mostraremos como fazer isso.
Como faço para mostrar os produtos em destaque no WooCommerce?
Há várias maneiras de exibir produtos em destaque em seu site WooCommerce. Primeiro, compartilharemos um método superfácil que permite personalizar o feed de produtos de acordo com o estilo e a marca do seu site sem código.
O segundo e o terceiro métodos oferecem menos opções de personalização, mas permitem que você exiba produtos em destaque usando os widgets e códigos de acesso integrados do WooCommerce.
Método 1: Exibir produtos em destaque do WooCommerce com o SeedProd
O primeiro método usará o SeedProd para exibir vários produtos em destaque por página no WooCommerce.
O SeedProd é um dos melhores criadores de sites WordPress com mais de 1 milhão de usuários. Ele permite que você crie qualquer tipo de site com seu poderoso construtor de arrastar e soltar, sem necessidade de codificação.
Você pode criar um tema personalizado do WordPress com o fácil construtor de temas do WordPress, criar uma loja on-line inteira com a integração do WooCommerce e usar o poderoso construtor de páginas para criar páginas de destino de alta conversão.
O SeedProd também oferece vários blocos e seções para ajudar a personalizar cada parte do seu site.
Por exemplo, os proprietários de sites do WooCommerce podem usar tags de modelo do WooCommerce para exibir dados dinâmicos de produtos em qualquer lugar. Além disso, as grades de produtos flexíveis permitem que você crie belos layouts de produtos para envolver e converter os compradores.
Com isso em mente, veja como exibir produtos do WooCommerce com a configuração em destaque com o SeedProd.
Etapa 1. Instalar e ativar o SeedProd
A primeira etapa é instalar o SeedProd em seu site WooCommerce.
Observação: você precisará do plano SeedProd Elite para acessar os recursos do WooCommerce do SeedProd.
Você pode seguir este guia sobre como instalar um plug-in do WordPress se precisar de ajuda.
Depois de instalar o arquivo .zip do plug-in SeedProd, acesse SeedProd " Settings 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 da SeedProd.
Depois de inserir sua chave de licença, clique no botão Verify Key ( Verificar chave ) para armazenar as informações de sua conta.
Etapa 2. Criar um tema WooCommerce
A próxima etapa é criar uma página de produto do WooCommerce. Há duas maneiras de fazer isso com o SeedProd:
Tema pré-construído para WooCommerce
Você pode criar um tema completo do WooCommerce importando um modelo de tema pronto para o WooCommerce. O modelo de tema criará automaticamente todas as páginas necessárias para sua loja do WooCommerce.
Partes individuais do tema
Como alternativa, você pode criar as diferentes partes da sua loja WooCommerce individualmente com o botão Theme Templates.
Usaremos o método de tema pré-criado neste guia porque ele faz tudo automaticamente para você.
Para criar um novo tema do WooCommerce, vá para SeedProd " Theme Builder e clique no botão Themes (Temas ).
Ao clicar nesse botão, você abrirá a biblioteca de temas do WordPress e do WooCommerce do SeedProd. Cada tema é 100% responsivo a dispositivos móveis, e você pode editar o design e o layout com o construtor de páginas do SeedProd.
Passe o mouse sobre qualquer design e clique no ícone de marca de seleção para importá-lo para o construtor de temas. Usaremos o "WooCommerce Starter Theme" para este guia.
Após importar o tema, você verá todos os diferentes modelos que compõem o design do site. Você também pode personalizar cada modelo individualmente para adaptá-los às necessidades do seu site com o construtor de páginas do SeedProd.
Mostraremos como fazer isso personalizando a página Shop.
Etapa 3. Adicionar a grade de produtos em destaque do WooCommerce
Editaremos o modelo da página Shop para esta etapa e usaremos o bloco de grade de produtos do SeedProd para exibir vários produtos com a configuração em destaque.
Localize o modelo de página "Shop" no painel do construtor de temas e clique em Edit Design para abrir o construtor de páginas do tipo arrastar e soltar.
O construtor de páginas do SeedProd é muito fácil de usar. Há blocos e seções à esquerda e uma visualização ao vivo à direita.
Você pode editar o design existente clicando em qualquer elemento e ajustando as configurações. Por exemplo, clicar em qualquer produto mostrará o painel de configurações da Grade de produtos, onde você pode:
- Alterar o número da coluna
- Exibir produtos por tipo e categoria de produto
- Mostrar paginação
- Alterar a ordem dos produtos
Você pode personalizar as fontes, os tamanhos de fonte, as cores, o espaçamento e muito mais na guia Advanced (Avançado).
Adicionar conteúdo à sua página é igualmente fácil. Basta arrastar um bloco do painel esquerdo e soltá-lo na visualização.
Isso é o que faremos para adicionar produtos em destaque à página de sua loja.
Primeiro, role a tela para baixo até o painel de blocos do WooCommerce na barra lateral esquerda. Em seguida, encontre o bloco Featured Products e arraste-o para sua página.
A partir daí, clique nele para abrir as configurações do bloco. Como você pode ver, o bloco filtra seus produtos do WooCommerce pelo status "Featured product" automaticamente.
Tudo o que resta é personalizar a grade de produtos para atender às suas necessidades.
Por exemplo, talvez você queira que os produtos em destaque se sobressaiam mais. Nesse caso, você pode alterar a cor do emblema, alterar a borda da imagem e até mesmo adicionar um título extra para ajudar os usuários a encontrar os produtos.
Quando estiver satisfeito com a aparência de sua página, clique no botão verde Save (Salvar ). Agora você pode seguir o mesmo processo para personalizar o restante do design do seu novo tema do WooCommerce, incluindo a página:
- Arquivos de produtos
- Página do produto
- Cabeçalho e rodapé
- Página do blog
- Barra lateral
- Página inicial
Etapa 4. Publique seu tema WooCommerce
Depois de adicionar produtos em destaque ao seu site e personalizar o tema, você poderá colocá-lo em funcionamento em seu site.
Para fazer isso, vá para SeedProd " Theme Builder e coloque a opção Enable SeedProd Theme na posição "On".
É isso aí!
Agora você pode visualizar o tema do WooCommerce e ver o layout personalizado dos produtos em destaque.
Método 2: usar o widget de produtos em destaque do WooCommerce
Outra maneira de exibir produtos em destaque em sua loja on-line é usar o widget Featured Products integrado do WooCommerce. Você pode usá-lo para adicionar produtos em destaque a páginas, posts e na barra lateral do seu site.
Esse método não inclui tantas opções de personalização quanto o método anterior. Mas se você precisar de uma maneira simples de mostrar suas mercadorias mais importantes, é uma boa solução.
Para usar esse 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 Featured Products.
A partir daí, escolha um produto para exibir e clique em Concluído.
O produto escolhido agora será incorporado diretamente em sua página. Nas configurações do bloco, você pode personalizar o seguinte:
- Descrição
- Preço
- Sobreposição
- Opacidade da sobreposição
Você também pode arrastar cada produto para um bloco de colunas para tornar o layout mais atraente.
Clique no botão Publicar ou Atualizar quando estiver satisfeito com a aparência de tudo. Em seguida, você poderá visualizar seus produtos ao vivo em seu site.
Você pode usar o mesmo widget para exibir os produtos em destaque na barra lateral do WooCommerce. Para fazer isso, vá para Appearance " Widgets, clique no ícone de mais em qualquer barra lateral e adicione o widget Featured Products.
Lembre-se de salvar as alterações; depois, você poderá visitar qualquer página com essa barra lateral para visualizar o widget da barra lateral.
Método 3: Usando o código de acesso WooCommerce Featured Products
O último método que abordaremos é o uso de um shortcode para adicionar produtos em destaque do WooCommerce à sua loja on-line. Você pode usar esse método se usar o editor clássico do WordPress ou desejar exibir produtos em destaque no tema do WordPress.
Para usar o método de shortcode, edite ou crie uma nova página e cole o seguinte shortcode do WooCommerce no editor.
[featured_products]
Ao visualizar a página, você verá qualquer produto com a configuração "em destaque" em uma grade na sua página.
Você pode personalizar o shortcode para exibir os produtos de forma diferente, adicionando mais produtos e colunas. Por exemplo, seu shortcode pode ter a seguinte aparência:
[featured_products per_page="2" columns="2"]
Brinque com o shortcode até encontrar um layout que se adapte à sua loja. As opções de personalização são limitadas, mas é uma maneira fácil de colocar seus produtos em destaque na frente de seus clientes.
More Ways to Customize WooCommerce
Displaying featured products is just one of the many ways to tweak your store. For more WooCommerce customizations, please see the following guides:
- How to Customize the WooCommerce Additional Information Tab
- 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
- How to Display Related Products in WooCommerce
- Como exibir categorias e tags de produtos no WooCommerce
- Como obter e exibir descrições de produtos no WooCommerce
- Como corrigir o problema de não funcionamento do WooCommerce View Cart
- How to Hide Out of Stock Products in WooCommerce
Aí está!
Esperamos que este artigo tenha ajudado você a aprender como exibir os produtos em destaque do WooCommerce em seu site.
Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, fique à vontade para deixar um comentário com perguntas e feedback.
Você também pode nos seguir no YouTube, no X (antigo Twitter) e no Facebook para obter mais conteúdo útil para expandir seus negócios.
