O mundo do e-commerce se baseia na flexibilidade. Uma loja online de sucesso precisa ser capaz de alterar, adaptar e destacar produtos específicos instantaneamente. Embora muitos lojistas acreditem que isso exija um desenvolvedor, a verdade é que uma ferramenta poderosa e integrada ao WooCommerce facilita todo o processo: o shortcode de produto do WooCommerce. Essa ferramenta simples, porém versátil, permite exibir produtos, criar grades personalizadas e construir páginas dinâmicas sem escrever uma única linha de código.
Este guia completo ensinará você a dominar o [products] . Você aprenderá a usar seus atributos para criar exibições de produtos personalizadas e impressionantes para qualquer página, postagem ou área de widget. Seja você um iniciante que deseja adicionar alguns produtos à sua página inicial ou um usuário avançado que precisa criar uma landing page complexa e com filtros, este artigo será sua referência completa.
O básico: sua lista essencial de shortcodes do WooCommerce
Antes de analisarmos o [produtos] , vamos entender o que são shortcodes e qual a sua função no WordPress. Um shortcode é um pequeno trecho de código entre colchetes, como [shortcode] . O WordPress o substitui por um marcador de posição com conteúdo ou funcionalidade dinâmica quando a página é visualizada. Você pode usar shortcodes em qualquer lugar onde possa adicionar texto, incluindo no editor clássico, nos blocos do Gutenberg e em construtores de páginas como o Elementor .
Embora nosso foco seja o [products] , o WooCommerce oferece uma lista completa de shortcodes para páginas essenciais da loja. Esses shortcodes geralmente são inseridos nas páginas que o WooCommerce cria automaticamente durante a configuração:
[woocommerce_cart]– Exibe o conteúdo da página do carrinho.[woocommerce_checkout]– Exibe o formulário de finalização da compra.[woocommerce_my_account]– Exibe o painel de controle da conta do cliente.[woocommerce_order_tracking]– Fornece um formulário para que os clientes acompanhem seus pedidos.
O [products] é o mais versátil de todos. Ele é a chave para exibir produtos em páginas e posts que não sejam a página principal da loja. Sua estrutura básica é simplesmente [products] . Por si só, este shortcode exibirá uma grade com seus produtos mais recentes. O verdadeiro poder, no entanto, reside em seus atributos.
Saiba mais: Como configurar um carrinho de compras no WordPress para vendas online perfeitas
Transforme suas páginas de produtos com poderosos códigos curtos
Dê vida à sua loja WooCommerce com layouts dinâmicos e experiências de compra perfeitas.
Anatomia do código curto [produtos]
A verdadeira flexibilidade do shortcode de produto do WooCommerce reside em seus atributos. Atributos são parâmetros que você adiciona dentro dos colchetes para controlar quais produtos são exibidos e como eles aparecem. Você pode considerá-los como comandos que fornecem instruções específicas ao shortcode.
Aqui está uma visão geral rápida dos atributos mais comuns que você usará. Esta é a sua lista essencial de shortcodes de produtos do WooCommerce.
| Atributo | Função | Valores possíveis |
limite | Define o número de produtos a serem exibidos. | Qualquer número inteiro positivo (por exemplo, 8, 12) |
colunas | Define o número de colunas na grade. | 1 para 6 |
ordenar por | Especifica como os produtos são classificados. | data , título , id , popularidade , classificação , rand |
ordem | Define a ordem de classificação. | ASC (Ascendente) ou DESC (Descendente) |
IDs | Exibe produtos específicos por ID. | Lista de IDs de produtos separados por vírgula (ex: "1,2,3") |
SKUs | Exibe produtos específicos por SKU. | Lista de SKUs de produtos separados por vírgula (ex.: "moletom-01, camiseta-02" ) |
categoria | Filtra por slug ou ID da categoria do produto. | Lista de categorias separadas por vírgulas (ex: "roupas,acessórios" ) |
em promoção | Exibe os produtos que estão atualmente em promoção. | verdadeiro |
visibilidade | Filtros por visibilidade do produto. | visível , catálogo , pesquisa , em destaque |
paginar | Habilita a paginação para uma lista de produtos. | verdadeiro |
aula | Adiciona uma classe CSS personalizada à grade. | Qualquer nome de classe CSS (ex.: "my-custom-grid" ) |
Lembre-se sempre de usar aspas retas ( "" ) em torno dos valores dos seus atributos. Um erro comum é usar aspas curvas, o que quebrará o shortcode.
Leia também: Como corrigir o problema de produtos do WooCommerce que não aparecem na página da loja: soluções rápidas
Dominando a Seleção de Produtos: Casos de Uso Práticos e Avançados de Shortcodes
Agora, veja exemplos reais de shortcodes de produtos do WooCommerce e aprenda a usá-los com eficácia. Esses exemplos ajudam você a criar seções de produtos dinâmicas e personalizadas em qualquer página.
Exibindo produtos em destaque
O shortcode de produtos em destaque do WooCommerce é uma ótima maneira de exibir seus itens mais vendidos ou promovidos na página inicial. Para usá-lo, você precisa primeiro marcar os produtos como "em destaque" no painel do WooCommerce. Acesse "Produtos", passe o mouse sobre um item e clique no ícone de estrela. A estrela ficará azul, indicando que o produto está em destaque.
Shortcode: [products visibility="featured"]
Este código curto exibe todos os produtos que você marcou como em destaque. Você pode combiná-lo com outros atributos para refinar a exibição.
Exemplo: Exibir 8 produtos em destaque em uma grade de 4 colunas, classificados aleatoriamente. [products visibility="featured" limit="8" columns="4" orderby="rand"]
Produtos específicos por ID ou SKU
Às vezes, você precisa exibir um ou dois produtos específicos, talvez em uma postagem de blog ou página de destino . É aí que o shortcode de ID de produto do WooCommerce se torna útil. Você pode usar o `ids` com uma lista de IDs de produtos separados por vírgulas.
Código curto: [products ids="12, 35, 78"]
Você também pode usar os códigos SKU dos produtos, que podem ser mais fáceis de lembrar.
Shortcode: [products skus="shirt-01, pants-02"]
Como encontrar IDs e SKUs: No painel do WordPress, acesse WooCommerce → Produtos. O ID do produto aparece em uma pequena coluna ao lado do nome do produto. Você também pode passar o mouse sobre o título do produto para ver o ID na URL. O SKU está na página de edição do produto, na seção "Dados do produto".
Filtrar por categoria
O shortcode de categoria de produto do WooCommerce é um dos atributos mais poderosos. Ele permite criar seções dedicadas a um tipo de produto específico, como uma seção de "Camisetas Novas" ou uma página de "Acessórios".
Código curto: [categoria de produtos="camisetas"]
Para encontrar o slug de uma categoria, acesse WooCommerce → Produtos → Categorias . O slug é um nome amigável para a URL da categoria.
Exemplo: Exibir 9 produtos das categorias “moletons com capuz” e “camisetas” em 3 colunas. [products category="moletons com capuz, camisetas" limit="9" columns="3"]
Exibindo produtos em promoção e mais vendidos
Criar uma página dedicada a vendas é uma ótima estratégia de marketing. Você pode fazer isso facilmente com um shortcode.
Código curto para "Em promoção": [products on_sale="true"]
Da mesma forma, você pode apresentar seus produtos de melhor desempenho.
Código curto para Mais Vendidos: [products best_selling="true"]
Combinando filtros para telas personalizadas
A verdadeira mágica acontece quando você combina vários atributos. Isso permite criar tabelas de produtos precisas e atraentes.
Exemplo: Exibir os 12 produtos mais populares e em promoção da categoria “roupas” em 4 colunas. [products category="clothing" on_sale="true" orderby="popularity" limit="12" columns="4"]
Esse controle detalhado permite que você crie uma experiência de compra única que mantém os clientes engajados.
Opções avançadas de exibição: paginação, classificação e estilo personalizado
O shortcode de produto do WooCommerce seleciona produtos e controla sua aparência e comportamento em uma página.
Paginação para listas de produtos extensas
Você precisa de paginação em páginas com muitos produtos para evitar longos tempos de carregamento e uma experiência ruim para o usuário . O `paginate` lida com isso perfeitamente.
Shortcode: [products paginate="true" per_page="12"]
O atributo `per_page` a paginação para especificar quantos itens aparecem em cada página. Este é um elemento crucial do shortcode de produto do WooCommerce com funcionalidade de paginação.
Classificação e ordenação
Você pode definir a ordem dos seus produtos usando os atributos orderby e order
orderby="price": Ordena os produtos por preço.orderby="rating": Ordena pela avaliação média do cliente.orderby="popularity": Ordena pelo número de compras.orderby="rand": Embaralha os produtos aleatoriamente a cada carregamento de página.
O order` define a direção da ordenação. `order="ASC"` para ordem crescente (por exemplo, do menor para o maior preço) e `order="DESC"` para ordem decrescente (por exemplo, do maior para o menor preço).
Exemplo: Exibir 10 produtos ordenados da classificação mais alta para a mais baixa. [products limit="10" orderby="rating" order="DESC"]
Estilização personalizada com aulas
Para designers ou desenvolvedores, o `class` é uma ferramenta poderosa para a personalização de shortcodes de produtos do WooCommerce. Ele permite adicionar uma classe CSS exclusiva ao elemento que envolve a grade de produtos. Isso possibilita aplicar estilos personalizados à saída do shortcode sem afetar outras grades de produtos no site.
Shortcode: [products class="hero-products"]
Em seguida, no seu CSS personalizado, você pode selecionar esta classe: .hero-products .product { background-color: #f5f5f5; border: 1px solid #ccc; }
Dicas de compatibilidade
O shortcode de produto do WooCommerce funciona com o editor clássico, o editor de blocos Gutenberg (usando um bloco dedicado para "Shortcode") e a maioria dos principais construtores de páginas. Ele também foi projetado para ser responsivo, o que significa que se ajustará a diferentes tamanhos de tela. No entanto, sempre teste seus shortcodes em computadores e dispositivos móveis para garantir que sejam exibidos corretamente.
Casos de uso estratégicos: onde e por que usar códigos curtos de produtos
Conhecer a sintaxe é uma coisa; usá-la estrategicamente é outra. Aqui estão algumas ideias para melhorar sua loja usando o shortcode de produto do WooCommerce .
- Página inicial: Crie seções dedicadas para "Novidades", "Mais Vendidos" e "Em Promoção" para direcionar os visitantes imediatamente aos seus produtos mais importantes.
- Postagens no blog: Incorpore um único produto ou uma pequena grade de produtos em uma postagem do blog. Se você escrever uma postagem sobre como combinar uma jaqueta nova, use um shortcode para exibir essa jaqueta específica e outros produtos complementares diretamente abaixo da postagem.
- Páginas de destino por categoria: Crie páginas de destino personalizadas para uma categoria específica. Você pode adicionar conteúdo exclusivo e usar um código curto para exibir apenas os produtos dessa categoria.
- Páginas de destino de marketing: Para uma nova campanha, você pode criar uma página de destino que apresente produtos com uma tag específica ou de uma nova coleção, usando um shortcode de produto WooCommerce personalizado para impulsionar as conversões.
Saiba mais: Como adicionar uma opção de gorjeta na página de finalização de compra do WooCommerce
Melhores práticas para resolução de problemas e otimização
Mesmo com uma ferramenta simples como um shortcode, podem surgir problemas. Veja como resolver problemas comuns e garantir o bom desempenho do seu site.
- Verifique se há erros de digitação: a falta de um colchete, um erro de digitação no nome de um atributo ou aspas incorretas podem fazer com que o shortcode seja exibido como texto simples. Verifique seu código novamente.
- Encontre IDs e slugs: Certifique-se de usar os IDs de produto, SKUs e slugs de categoria corretos. A maneira mais fácil de verificar essas informações é no painel do WordPress.
- Cache e desempenho: Exibir muitos produtos com um único shortcode pode deixar seu site lento. Use os
`limit`e`paginate`para controlar a quantidade de produtos. Utilize um bom plugin de cache para acelerar o carregamento das páginas.
- Necessidades avançadas: Se você precisar de filtragem dinâmica, paginação AJAX ou outros recursos complexos, talvez precise de um plugin específico. Ferramentas como WooCommerce Product Table ou WooCommerce Product Filters podem ampliar significativamente a funcionalidade do shortcode.
Conclusão: Seu conjunto de ferramentas para exibição dinâmica de produtos no WooCommerce
O shortcode de produto do WooCommerce é revolucionário para lojistas. Ele oferece uma maneira simples, porém poderosa, de criar exibições de produtos dinâmicas, envolventes e altamente personalizadas em todo o seu site. Ao dominar o [products] e seus atributos, você pode transformar suas páginas estáticas em ferramentas de merchandising irresistíveis.
Comece pelo básico, como uma seção de produtos em destaque na sua página inicial, e depois experimente combinações mais avançadas para criar páginas de destino exclusivas e incorporar produtos estrategicamente no conteúdo do seu blog. Este shortcode permite que você crie uma loja online profissional e fácil de usar sem precisar mexer em nenhum código. Salve este guia e comece a criar vitrines de produtos melhores hoje mesmo!
Perguntas frequentes sobre o código curto de produto do WooCommerce
O que é um shortcode do WooCommerce?
Um shortcode do WooCommerce é um pequeno trecho de texto entre colchetes (por exemplo, [produtos]). O WordPress substitui isso por conteúdo dinâmico da sua loja WooCommerce, como listas de produtos, conteúdo do carrinho ou formulários de finalização de compra.
Como faço para usar a lista de shortcodes de produtos do WooCommerce?
Você utiliza a lista de shortcodes de produtos do WooCommerce adicionando o [products] e seus atributos a qualquer página, postagem ou área de widget do seu site WordPress. Cada atributo permite filtrar ou personalizar a exibição dos produtos.
Como posso exibir produtos de uma categoria específica?
Você pode usar o de categoria dentro do [products] . Por exemplo, [products category="clothing"] exibirá todos os produtos da categoria "clothing". Este é o shortcode de categoria de produto do WooCommerce.
Posso exibir produtos de uma tag ou atributo específico usando um shortcode?
Sim. O [products] suporta filtragem por slugs de tags ( tag="new-collection" ) e até mesmo por atributos personalizados e seus termos. Isso proporciona um alto nível de controle sobre quais produtos você exibe.
Como faço para usar o shortcode de produtos em destaque do WooCommerce?
Para usar o shortcode de produtos em destaque do WooCommerce, primeiro marque os produtos como em destaque clicando no ícone de estrela ao lado deles na lista de produtos. Em seguida, use o shortcode [products visibility="featured"] em qualquer página ou postagem.
