{"id":68994,"date":"2024-07-17T05:16:49","date_gmt":"2024-07-17T08:16:49","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=68994&preview=true&preview_id=68994"},"modified":"2024-07-29T07:06:52","modified_gmt":"2024-07-29T10:06:52","slug":"shortcodes-woocommerce","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/shortcodes-woocommerce\/","title":{"rendered":"Guia Completo dos Shortcodes de WooCommerce"},"content":{"rendered":"

O WooCommerce<\/a> \u00e9 o principal plugin de eCommerce<\/a> para WordPress, capacitando milh\u00f5es de empresas a transformar seus sites em robustas lojas online. Por\u00e9m, muitas pessoas desconhecem seus shortcodes<\/a>.<\/p>\n

Este guia explica tudo o que voc\u00ea precisa saber sobre os shortcodes de WooCommerce, desde shortcodes essenciais que exibem produtos e gerenciam carrinhos at\u00e9 customiza\u00e7\u00f5es avan\u00e7adas para experi\u00eancias de usu\u00e1rio personalizadas.<\/p>\n

Vamos explorar como esses pequenos snippets de c\u00f3digo podem afetar significativamente seu site de eCommerce<\/a>.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

O que s\u00e3o shortcodes?<\/h2>\n

Os shortcodes foram introduzidos no WordPress 2.5, em 2008<\/a>. S\u00e3o pequenas partes de c\u00f3digo entre colchetes, como este: [shortcode]<\/code>. Funcionam como espa\u00e7os reservados que dizem ao WordPress para executar uma fun\u00e7\u00e3o espec\u00edfica ou exibir determinado conte\u00fado dinamicamente.<\/p>\n

Por exemplo, em vez de codificar manualmente uma grade de produtos complexa, voc\u00ea pode usar um shortcode para cri\u00e1-la e exibi-la instantaneamente em seu site. Isso economiza tempo e reduz a possibilidade de erros, facilitando a manuten\u00e7\u00e3o e a atualiza\u00e7\u00e3o do seu site.<\/p>\n

Com o passar dos anos, os shortcodes evolu\u00edram, tornando-se mais poderosos e vers\u00e1teis. O WooCommerce aproveita esse recurso, oferecendo uma variedade de shortcodes especificamente adaptados para a funcionalidade de eCommerce.<\/p>\n

Come\u00e7ando a usar shortcodes de WooCommerce<\/h2>\n

Para usar os shortcodes de WooCommerce em seu site WordPress, verifique se o plugin WooCommerce<\/a> est\u00e1 instalado e ativado.<\/p>\n

Para fazer isso, fa\u00e7a login no painel WordPress, navegue at\u00e9 Plugins<\/strong> > Adicionar novo<\/strong> e procure por “WooCommerce”. Em seguida, clique em Instalar agora<\/strong> no plugin WooCommerce e em Ativar<\/strong>.<\/p>\n

Por fim, voc\u00ea pode seguir o assistente de configura\u00e7\u00e3o do WooCommerce para definir as configura\u00e7\u00f5es b\u00e1sicas, como detalhes da loja, m\u00e9todos de pagamento e op\u00e7\u00f5es de frete.<\/p>\n

Quando voc\u00ea instala o plugin WooCommerce, seu site WordPress \u00e9 atualizado automaticamente com as p\u00e1ginas Carrinho<\/strong>, Checkout<\/strong> e Minha Conta<\/strong>. No entanto, voc\u00ea pode fazer mais com seus produtos, e \u00e9 isso que exploraremos com os shortcodes.<\/p>\n

A sintaxe b\u00e1sica dos shortcodes<\/h3>\n

Os shortcodes de WooCommerce geralmente incluem atributos adicionais para personalizar sua sa\u00edda. Aqui est\u00e1 a estrutura b\u00e1sica:<\/p>\n

[shortcode attribute1=\"value1\" attribute2=\"value2\"]<\/code><\/pre>\n
Por exemplo, o shortcode [products limit=\"4\" columns=\"2\"]<\/code> exibe quatro produtos em um layout de duas colunas.<\/p>\n
Como adicionar shortcodes em artigos, p\u00e1ginas e widgets<\/h3>\n
Os shortcodes podem ser adicionados em praticamente qualquer lugar no WordPress. Voc\u00ea pode adicion\u00e1-los a um artigo ou uma p\u00e1gina simplesmente digitando ou colando-os em qualquer editor de texto<\/a> no WordPress ou em um bloco de shortcodes se usar o Gutenberg<\/a> ou qualquer construtor de p\u00e1ginas<\/a>.<\/p>\n
Para este guia, vamos usar o Gutenberg:<\/p>\n
    \n
  1. Navegue at\u00e9 Posts<\/strong> ou P\u00e1ginas<\/strong> no painel WordPress<\/a>.<\/li>\n
  2. Abra o post\/p\u00e1gina onde voc\u00ea deseja adicionar o shortcode.<\/li>\n
  3. Clique no \u00edcone +<\/strong> para adicionar um novo bloco.\n
    \"Etapas
    Etapas para adicionar um shortcode com blocos do Gutenberg no WordPress.<\/figcaption><\/figure><\/li>\n
  4. Procure e selecione o bloco Shortcode.<\/li>\n
  5. Cole seu shortcode no bloco.<\/li>\n<\/ol>\n
    Por exemplo, digamos que voc\u00ea queira exibir uma grade dos seus produtos mais recentes em sua p\u00e1gina inicial. Usando o editor de blocos<\/a>, voc\u00ea digitaria o shortcode: [products limit=\"3\" columns=\"3\"]<\/code> e mandaria Atualizar<\/strong> ou Publicar<\/strong>\u00a0sua p\u00e1gina.<\/p>\n
    Isso criar\u00e1 uma grade com tr\u00eas produtos exibidos em uma coluna, oferecendo uma maneira din\u00e2mica e atraente de mostrar suas ofertas mais recentes.<\/p>\n
    \"Exibindo
    Exibindo uma grade de produtos usando um shortcode no editor de blocos do WordPress.<\/figcaption><\/figure>\n
    Voc\u00ea tamb\u00e9m pode adicionar shortcodes a widgets<\/a> navegando at\u00e9 Apar\u00eancia<\/strong>\u00a0> Widgets<\/strong>. Adicione um widget de Texto<\/strong> \u00e0 \u00e1rea de widgets que voc\u00ea deseja (barra lateral, rodap\u00e9, etc.). Digite seu shortcode na caixa de texto dentro do widget e salve o widget.<\/p>\n
    Shortcodes de WooCommerce essenciais<\/h2>\n
    O WooCommerce fornece uma variedade de shortcodes que permitem que voc\u00ea exiba produtos, gerencie o carrinho de compras<\/a> e aprimore o processo de checkout.<\/p>\n
    Vamos explorar os shortcodes\u00a0de WooCommerce <\/span>mais essenciais, seus atributos e exemplos detalhados para ajudar voc\u00ea a us\u00e1-los efetivamente na sua loja.<\/span><\/p>\n
    Shortcodes de exibi\u00e7\u00e3o de produtos<\/h3>\n
    O shortcode [products]<\/code> \u00e9 um dos mais vers\u00e1teis do WooCommerce. Ele permite que voc\u00ea exiba uma lista de produtos com base em v\u00e1rios crit\u00e9rios.<\/p>\n
    Ele tem muitos atributos que permitem que voc\u00ea exiba os produtos como quiser:<\/p>\n