O WooCommerce é o principal plugin de eCommerce para WordPress, capacitando milhões de empresas a transformar seus sites em robustas lojas online. Porém, muitas pessoas desconhecem seus shortcodes.
Este guia explica tudo o que você precisa saber sobre os shortcodes de WooCommerce, desde shortcodes essenciais que exibem produtos e gerenciam carrinhos até customizações avançadas para experiências de usuário personalizadas.
Vamos explorar como esses pequenos snippets de código podem afetar significativamente seu site de eCommerce.
O que são shortcodes?
Os shortcodes foram introduzidos no WordPress 2.5, em 2008. São pequenas partes de código entre colchetes, como este: [shortcode]. Funcionam como espaços reservados que dizem ao WordPress para executar uma função específica ou exibir determinado conteúdo dinamicamente.
Por exemplo, em vez de codificar manualmente uma grade de produtos complexa, você pode usar um shortcode para criá-la e exibi-la instantaneamente em seu site. Isso economiza tempo e reduz a possibilidade de erros, facilitando a manutenção e a atualização do seu site.
Com o passar dos anos, os shortcodes evoluíram, tornando-se mais poderosos e versáteis. O WooCommerce aproveita esse recurso, oferecendo uma variedade de shortcodes especificamente adaptados para a funcionalidade de eCommerce.
Começando a usar shortcodes de WooCommerce
Para usar os shortcodes de WooCommerce em seu site WordPress, verifique se o plugin WooCommerce está instalado e ativado.
Para fazer isso, faça login no painel WordPress, navegue até Plugins > Adicionar novo e procure por “WooCommerce”. Em seguida, clique em Instalar agora no plugin WooCommerce e em Ativar.
Por fim, você pode seguir o assistente de configuração do WooCommerce para definir as configurações básicas, como detalhes da loja, métodos de pagamento e opções de frete.
Quando você instala o plugin WooCommerce, seu site WordPress é atualizado automaticamente com as páginas Carrinho, Checkout e Minha Conta. No entanto, você pode fazer mais com seus produtos, e é isso que exploraremos com os shortcodes.
A sintaxe básica dos shortcodes
Os shortcodes de WooCommerce geralmente incluem atributos adicionais para personalizar sua saída. Aqui está a estrutura básica:
[shortcode attribute1="value1" attribute2="value2"]Por exemplo, o shortcode [products limit="4" columns="2"] exibe quatro produtos em um layout de duas colunas.
Como adicionar shortcodes em artigos, páginas e widgets
Os shortcodes podem ser adicionados em praticamente qualquer lugar no WordPress. Você pode adicioná-los a um artigo ou uma página simplesmente digitando ou colando-os em qualquer editor de texto no WordPress ou em um bloco de shortcodes se usar o Gutenberg ou qualquer construtor de páginas.
Para este guia, vamos usar o Gutenberg:
- Navegue até Posts ou Páginas no painel WordPress.
- Abra o post/página onde você deseja adicionar o shortcode.
- Clique no ícone + para adicionar um novo bloco.
Etapas para adicionar um shortcode com blocos do Gutenberg no WordPress. - Procure e selecione o bloco Shortcode.
- Cole seu shortcode no bloco.
Por exemplo, digamos que você queira exibir uma grade dos seus produtos mais recentes em sua página inicial. Usando o editor de blocos, você digitaria o shortcode: [products limit="3" columns="3"] e mandaria Atualizar ou Publicar sua página.
Isso criará uma grade com três produtos exibidos em uma coluna, oferecendo uma maneira dinâmica e atraente de mostrar suas ofertas mais recentes.
Você também pode adicionar shortcodes a widgets navegando até Aparência > Widgets. Adicione um widget de Texto à área de widgets que você deseja (barra lateral, rodapé, etc.). Digite seu shortcode na caixa de texto dentro do widget e salve o widget.
Shortcodes de WooCommerce essenciais
O WooCommerce fornece uma variedade de shortcodes que permitem que você exiba produtos, gerencie o carrinho de compras e aprimore o processo de checkout.
Vamos explorar os shortcodes de WooCommerce mais essenciais, seus atributos e exemplos detalhados para ajudar você a usá-los efetivamente na sua loja.
Shortcodes de exibição de produtos
O shortcode [products] é um dos mais versáteis do WooCommerce. Ele permite que você exiba uma lista de produtos com base em vários critérios.
Ele tem muitos atributos que permitem que você exiba os produtos como quiser:
limit— Número de produtos a serem exibidos. O padrão é-1(exibir todos).columns— Número de colunas. O padrão é4.orderby— Ordenar produtos por critérios específicos, comodate,title,price,popularity, etc.order— Ordem dos produtos. Pode serASC(crescente) ouDESC(decrescente).category— Slug da categoria do produto.tag— Slug da tag do produto.paginate— Permite a paginação. Pode sertrueoufalse. O padrão éfalse.
Por exemplo, se você quiser exibir os oito produtos mais recentes em um layout de quatro colunas, classificados pela data em que foram adicionados em ordem decrescente, pode usar o seguinte shortcode:
[products limit="8" columns="4" orderby="date" order="DESC"]
Se você também quiser ativar a paginação para que o usuário possa acessar outros produtos enquanto exibe o limite, poderá usar o atributo paginate.
[products limit="8" columns="4" orderby="date" order="DESC" paginate="true"]Você também pode querer exibir produtos de uma categoria específica. O atributo category permite fazer isso. O shortcode abaixo exibe seis produtos da categoria “accessories” em um layout de três colunas:
[products category="accessories" limit="6" columns="3"]
Cinco produtos são exibidos porque apenas cinco estão atualmente na categoria. Sete estarão disponíveis quando mais dois forem adicionados a essa categoria, mas somente seis serão exibidos devido ao limite.
O shortcode [product] também pode ser usado para exibir um único produto com base em seu ID ou SKU, adicionando o atributo id ou sku. Por exemplo, o shortcode abaixo exibe o produto com o ID 22.
[product id="22"]![Usando o shortcode [product] para exibir um único produto por ID.](https://kinsta.com/wp-content/uploads/2024/06/single-product-id.png)
Se quiser exibir mais de um produto de forma seletiva, você pode usar os atributos ids e skus.
[products columns="3" ids="22,35,26"]Esse shortcode exibe produtos com os IDs 22, 35 e 26.
Outro shortcode de que você pode precisar é o [product_page]. Esse shortcode é semelhante ao [product], mas exibe a página inteira do produto, incluindo abas, produtos relacionados e avaliações. Por exemplo, vamos exibir a página inteira do produto com ID 22.
[product_page id="22"]
Isso pode ser útil para uma seção de produto em destaque em uma página ou post.
Você também tem acesso a um atributo cat_operator que permite controlar como os produtos são filtrados com base em categorias. As opções disponíveis para esse atributo são:
AND– Exibir produtos nas categorias escolhidas.IN– Exibir produtos pertencentes a qualquer categoria escolhida (valor padrão).NOT IN– Exibir produtos que não pertençam às categorias escolhidas.
Por exemplo, se você quiser exibir produtos das categorias “clothing” e “accessories“, pode usar o operador AND:
[products category="clothing, accessories" cat_operator="AND"]Você também pode excluir produtos de uma categoria específica com o operador NOT IN. Por exemplo, se você quiser exibir todos os produtos menos os da categoria “clothing“.
[products category="clothing" cat_operator="NOT IN"]Shortcodes para carrinho e checkout
O WooCommerce fornece shortcodes específicos para páginas essenciais de eCommerce, como carrinho, checkout e conta de usuário.
Por exemplo, o shortcode [woocommerce_cart] pode exibir a página do carrinho de compras, incluindo todos os itens do carrinho, quantidades e o preço total.
Esse shortcode deve ser colocado na página designada como página do carrinho.
Da mesma forma, o shortcode [woocommerce_checkout] exibe a página de checkout, na qual os clientes podem inserir seus detalhes de pagamento e frete, e fazer seus pedidos.
Esse shortcode deve ser colocado na página designada como sua página de checkout.
O shortcode [woocommerce_my_account] pode ser usado para exibir a conta do usuário, incluindo seções para pedidos, downloads, endereços e detalhes da conta.
Por fim, o shortcode [woocommerce_order_tracking] ajuda você a exibir um formulário no qual os clientes podem inserir o ID do pedido e o e-mail para rastrear seus pedidos.
Esse shortcode pode ser colocado em qualquer página em que você queira que os clientes rastreiem seus pedidos.
Shortcodes de categorias de produtos
Quando quiser exibir uma lista ou grade de categorias de produtos, você pode usar o shortcode [product_categories]. Ele tem os seguintes atributos que podem ser usados para customizar sua aparência:
number— Número de categorias a serem exibidas.columns— Número de colunas.orderby— Ordenar categorias por critérios específicos.order— Ordem das categorias. Pode serASCouDESC.hide_empty— Ocultar categorias vazias. Pode ser1(true) ou0(false).
Por exemplo, se quiser exibir categorias de produtos em uma grade, você pode usar o seguinte shortcode:
[product_categories number="12" columns="4" orderby="name" order="ASC"]Esse shortcode exibe 12 categorias de produtos em uma grade de quatro colunas, classificadas por nome em ordem crescente.
Se você adicionar miniaturas, elas aparecerão aqui, melhorando a aparência do seu site. Você pode adicionar miniaturas acessando Produtos > Categorias >, editando uma categoria específica, e então rolando até o campo Miniaturas para carregar a imagem.
Da mesma forma, se quiser exibir produtos de uma categoria específica, você pode usar o shortcode [product_category]. Ele aceita um atributo per_page, que especifica o número de produtos a serem exibidos por página. Também aceita category para especificar o slug da categoria do produto e colunas para o número de colunas.
Por exemplo, este shortcode exibe oito produtos da categoria “clothing” (roupas) em um layout de quatro colunas.
[product_category category="clothing" per_page="8" columns="4"]
Shortcodes de WooCommerce avançados
Além dos shortcodes básicos de exibição de produtos, o WooCommerce oferece shortcodes avançados que proporcionam maior controle e opções de personalização. Esses shortcodes permitem personalizar a exibição e a funcionalidade da sua loja WooCommerce para atender às suas necessidades específicas.
Customizando a exibição de produtos
O shortcode [products] é altamente flexível e permite várias combinações de atributos para que você filtre e exiba os produtos de forma diferente.
Aqui estão mais alguns atributos que você pode usar:
on_sale— Se você deseja exibir produtos em promoção.trueoufalse.best_selling— Se você deseja exibir os produtos mais vendidos.trueoufalse.top_rated— Se você deseja exibir os produtos mais bem avaliados.trueoufalse.
Com isto, você pode exibir produtos em promoção.
[products on_sale="true" limit="8" columns="4"]Também pode exibir os produtos mais vendidos em uma categoria usando o shortcode abaixo:
[products category="accessories" best_selling="true" limit="6" columns="3"]Esse shortcode exibe seis produtos mais vendidos da categoria “accessories” em um layout de três colunas.
Shortcodes para casos de uso específicos
Os shortcodes de WooCommerce podem ser adaptados para atender a casos de uso específicos, fornecendo conteúdo dinâmico com base em vários critérios. Por exemplo, o shortcode [recent_products] pode ser usado para exibir produtos adicionados recentemente à sua loja WooCommerce.
[recent_products limit="5" columns="5"]Esse shortcode exibe os cinco produtos adicionados mais recentemente em um layout de cinco colunas.
De forma similar, o shortcode [featured_products] pode ser usado para exibir produtos marcados como destaque em sua loja WooCommerce.
[featured_products limit="6" columns="3"]
Esse shortcode exibe seis produtos em destaque em um layout de três colunas.
Você pode marcar um produto como em destaque navegando até a página de produtos e marcando-o com uma estrela, conforme mostrado na imagem abaixo.
Suponhamos que você esteja realizando promoções de alguns produtos específicos. Você pode usar o shortcode [sale_products] para exibir os produtos atualmente em promoção.
[sale_products limit="8" columns="3"]Para configurar um preço promocional para seus produtos, vá para Produtos > Todos os produtos e clique no item que você gostaria de oferecer com desconto. Em seguida, role a tela para baixo até a seção Dados do produto.
Se você inserir qualquer valor no campo Preço promocional ($) do WooCommerce, esse será o preço que os visitantes verão no frontend da loja. Esse campo substitui o valor de Preço normal ($). Quando não estiver realizando uma promoção, deixe esse campo vazio para não dar descontos acidentalmente.
Se você tiver um plugin que o ajude a definir os produtos mais vendidos, também poderá usar o shortcode [best_selling_products] para exibir os produtos mais vendidos na sua loja WooCommerce.
[best_selling_products limit="10" columns="4"]O shortcode [top_rated_products] também pode exibir os produtos mais bem avaliados em sua loja WooCommerce.
[top_rated_products limit="4" columns="2"]Resumo
Os shortcodes de WooCommerce são ferramentas poderosas que aprimoram a funcionalidade da sua loja on-line. O domínio desses shortcodes permite que você personalize a exibição de produtos, gerencie o carrinho de compras e otimize o processo de checkout.
Sinta-se à vontade para experimentar diferentes combinações de shortcodes para encontrar a configuração perfeita para sua loja. Com essas ferramentas, você pode criar um site de WooCommerce dinâmico e envolvente que atenda às necessidades dos seus clientes.
Após configurar a loja on-line perfeita para a sua empresa, você vai querer evitar uma situação em que a loja seja atacada, fique lenta ou, ocasionalmente, fique off-line, afetando os negócios.
O plugin WooCommerce pode, às vezes, tornar sites WordPress mais lentos, especialmente para grandes lojas com muitos produtos. Felizmente, com a Kinsta como seu provedor de hospedagem para sua loja WooCommerce, você não precisará se preocupar com isso.
Deixe um comentário