Um guia simples sobre códigos de acesso WooCommerce

Você pode ter ouvido falar sobre códigos de acesso WooCommerce e provavelmente os usou também. Mas você pode não saber como e onde funciona.

Se você deseja desbloquear todo o potencial do WooCommerce, definitivamente desejará se familiarizar com os códigos de acesso.

Por quê? Porque os códigos de acesso alimentam grande parte da funcionalidade do plug-in, incluindo todas as páginas, como a página do carrinho, a página de checkout, as páginas do produto, as páginas da categoria do produto, a página Minha conta.

E se você entender melhor como os códigos de acesso do WooCommerce funcionam, poderá criar facilmente páginas de vendas altamente personalizadas e criar um site de loja online incrivelmente poderoso para qualquer situação.

O que são os códigos de acesso do WooCommerce, por que usá-los, como você pode usá-los... abordaremos todos eles neste artigo.

O que são códigos de acesso WooCommerce?

Em termos leigos, os códigos de acesso no WooCommerce são pequenos pedaços de código/texto envoltos em colchetes que se parecem com [isto].

Esses códigos de acesso são, na verdade, enormes quantidades de código condensadas em uma frase mais curta para um proprietário de loja WooCommerce não técnico usar.

Os códigos de acesso podem alcançar qualquer coisa para você, como:

• Exibir checkout em qualquer página
• Exiba os mais vendidos em sua página inicial
• Lance produtos relacionados quando os clientes demonstram interesse em um produto
• Exibir vídeo e áudio
• Adicionar um controle deslizante criativo
• Inserir botões Adicionar ao carrinho
• Destaque produtos em destaque em blocos Gutenberg, barras laterais e outras áreas com widgets

…qualquer outra coisa

Agora, com o básico dos códigos de acesso entendidos, vamos ver como você os adiciona à sua loja.

Como adicionar códigos de acesso à sua loja WooCommerce?

Administrar uma loja WooCommerce é demorado para qualquer um. Gerenciamento de loja, criação de ofertas, cupons, melhorias de checkout… existem centenas de tarefas a serem observadas. Para economizar tempo, os códigos de acesso são úteis.

Os códigos de acesso também melhoram a precisão, reduzindo os erros associados à escrita de códigos longos.

Existem três maneiras de adicionar códigos de acesso:

Inserindo códigos de acesso usando o editor de blocos Gutenberg

Com o editor Gutenberg, é fácil adicionar códigos de acesso.

• Vá para o painel de administração do WordPress.
• Clique em Pages > Add New . Você também pode editar qualquer página existente.



• Clique no sinal de plus para adicionar um novo bloco, digite 'shortcode' na barra de pesquisa e selecione o bloco Shortcode .
• Agora, digite seu código de acesso no campo. Por exemplo – [products] .
• Clique no botão azul Publish ou Update no canto superior direito da página e seus produtos agora serão exibidos em sua nova página.

Inserindo códigos de acesso usando o editor clássico/editor do WordPress

Adicionar códigos de acesso com o editor Classic também é fácil. Basta adicionar os códigos de acesso, certificando-se de incluir os colchetes ([ e ]).

Inserindo códigos de acesso usando widget

Para adicionar um código de acesso a uma área com widget, basta adicionar um widget de Texto com o código de acesso. Em seguida, carregue a página para ver o conteúdo do shortcode em sua barra lateral.

Como funcionam os códigos de acesso do WooCommerce?

Embora pareçam simples, os códigos de acesso são realmente bastante poderosos! Vamos cobrir as diferentes partes que compõem um shortcode.

O próprio shortcode :
Como mencionado acima, os shortcodes são uma única palavra ou conjunto de palavras conectadas com sublinhados, assim:

• [products]
• [woocommerce_order_tracking]

Embora alguns códigos de acesso funcionem sozinhos, outros exigem alguns parâmetros.

Parâmetros :
Parâmetros ou Argumentos (chamados Args em algumas documentações do WooCommerce) são maneiras de tornar o shortcode mais específico. Por exemplo, adicionando id=”36″ ao código de acesso [add_to_cart] , ele criará um botão 'Adicionar ao carrinho' para o produto com ID 36.

Lista de códigos de acesso WooCommerce embutidos

Existem cinco códigos de acesso essenciais disponíveis no WooCommerce.

1. [woocommerce_cart] – mostra a página do carrinho
2. [woocommerce_checkout] – mostra a página de checkout
3. [woocommerce_my_account] – mostra a página da conta do usuário
4. [woocommerce_order_tracking] – mostra o formulário de rastreamento de pedidos
5. [products] – mostra os produtos

Na maioria dos casos, esses códigos de acesso serão adicionados às páginas automaticamente por meio do assistente de integração do WooCommerce e não precisam ser usados ​​manualmente.

Vejamos cada shortcode e como usá-los.

[woocommerce_cart]

Este shortcode adiciona a funcionalidade do carrinho WooCommerce à página. Ele exibirá todos os produtos que o usuário adicionou ao carrinho. Não há parâmetros para adicionar a este código de acesso.

[woocommerce_checkout]

Como o nome sugere, este shortcode exibe a página de checkout. Certifique-se de que esta página esteja configurada corretamente. Afinal, se os clientes não encontrarem a página de checkout com facilidade ou acharem o checkout complicado, eles não comprarão nada.

Nenhum parâmetro extra para adicionar a este shortcode também.

[woocommerce_my_account]

Este código de acesso mostra a página Minha Conta contendo todas as informações do cliente, bem como seus pedidos anteriores de sua loja.

Por padrão, o número de pedidos exibidos é definido como 15. Você pode alterá-lo para exibir todos os pedidos colocando o número -1. Você pode adicionar parâmetros ou argumentos a este shortcode assim:

variedade(
     'usuário_atual' => ''
 )

 woocommerce_my_account

O argumento do usuário atual é definido automaticamente usando get_user_by( 'id', get_current_user_id() ) .

[woocommerce_order_tracking]

Este shortcode cria uma página de “rastreamento de pedidos”, que permite que os clientes vejam o status atual de seus pedidos. Não há outros argumentos.

[produtos]

O shortcode [products] é um dos shortcodes mais robustos. Ele permite exibir produtos por ID de postagem, SKU, atributos, categorias com suporte para paginação, classificação aleatória e tags de produtos .

Ele substituiu a necessidade de vários códigos de acesso , como [featured_products] , [sale_products] , [best_selling_products] , [recent_products] , [product_attribute] e [top_rated_products] usados ​​nas versões do WooCommerce abaixo de 3.2.

Há uma tonelada de parâmetros que permitem personalizar os tipos e quantidades de produtos exibidos.

Para adicionar um parâmetro, basta escrever seu nome, seguido do sinal de igual e o valor desejado entre aspas. Certifique-se de que está dentro do código de acesso [products] .

Por exemplo, para exibir cinco produtos da categoria vestuário, use este código de acesso: [products limit="5" category="clothing"] .

Atributos de produtos disponíveis

Os atributos a seguir estão disponíveis para uso em conjunto com o código de acesso dos produtos. Existem alguns parâmetros que ajudam a controlar o layout das páginas de produtos. Vamos examiná-los com exemplos, começando com os atributos do produto de exibição.

Exibir atributos do produto

• limite – controla o número de produtos exibidos. O padrão é e -1 (exibir todos) ao listar produtos e -1 (exibir todos) para categorias. Exemplo – [products limit="3"]
• colunas – controla o número de colunas a serem exibidas. O padrão é 4. embora isso geralmente se reduza a um número menor no celular (dependendo do seu tema). Exemplo – [products columns="3"]
• paginate – determina se as páginas de resultados do seu produto serão paginadas. Usado em conjunto com limite. O padrão é false, definido como true para paginar. Exemplo – [products paginate="true"]
• orderby – personaliza a forma como os seus produtos são encomendados. O padrão é o título do produto. Uma ou mais opções podem ser passadas adicionando ambos os slugs com um espaço entre eles. As opções disponíveis são:
  • data – a data em que o produto foi publicado.
  • id – o ID de postagem do produto.
  • menu_order – a Ordem do Menu, se definida (os números mais baixos são exibidos primeiro).
  • popularidade – o número de compras.
  • rand – encomendar aleatoriamente os produtos no carregamento da página (pode não funcionar com sites que usam cache, pois pode salvar um pedido específico).
  • classificação – a classificação média do produto.
  • título – o título do produto. Exemplo – [products orderby="date"]
• skus – adicione SKUs específicos separados por vírgula. Exemplo – [products skus="shirt-black-small, shirt-black-large"]
• categoria – exibe produtos que possuem um determinado slug de categoria. Você pode adicionar mais de uma categoria colocando uma vírgula entre elas. Exemplo – [products category="watches, purses"]
• tag – exibe produtos que possuem um determinado slug de tag. Você pode adicionar mais de uma tag colocando uma vírgula entre elas. Exemplo – [products tag="rainy, kids"]
• order – informa se a ordem do produto é crescente (ASC) ou decrescente (DESC), usando o método definido em orderby. O padrão é ASC. Exemplo – [products order="DESC"]
• class – adiciona uma classe wrapper HTML para que você possa modificar a saída específica com CSS personalizado. Exemplo – [products class="custom-element"]
• on_sale – exibe produtos de venda. Não use em conjunto com best_selling ou top_rated. Exemplo – [products on_sale="true"]
• best_selling – exibe os produtos que mais vendem. Não use em conjunto com on_sale ou top_rated. Exemplo – [products best_selling="true"]
• top_rated – exibe os produtos mais bem avaliados. Não use em conjunto com on_sale ou best_selling. Exemplo – [products top_rated="true"]

Em seguida, os atributos do produto de conteúdo.

Atributos do produto de conteúdo

Esses códigos de acesso podem ser usados ​​para exibir produtos com base em seus atributos – tamanho, cor, etc.

• atributo – exibe produtos com um determinado atributo.
• termos – exibe produtos com determinados termos que estão vinculados ao atributo. Isso deve ser usado com o atributo acima. Por exemplo, o atributo pode ser cores e os termos são vermelho, azul ou amarelo.
• termos_operador – permite realizar cálculos para determinar quais termos serão incluídos. Da mesma forma, eles devem ser usados ​​com atributo e termos. As opções disponíveis são:
  • AND – exibe produtos de todos os atributos escolhidos.
  • IN – exibe produtos com o atributo escolhido. Este é o valor de Terms_operator padrão.
  • NOT IN – exibe produtos que não estão nos atributos escolhidos.
• tag_operator – o mesmo que o termo operador acima, exceto para tags. As opções disponíveis são:
  • AND – exibe produtos de todas as tags escolhidas.
  • IN – exibe os produtos com as tags escolhidas. Este é o valor tag_operator padrão.
  • NOT IN – exibe produtos que não estão nas tags escolhidas.
• visibilidade – exibe produtos dependendo de sua visibilidade em seu site. As opções disponíveis são:
  • visível – produtos visíveis na loja e resultados de pesquisa. Esta é a opção de visibilidade padrão.
  • catálogo – produtos visíveis apenas na loja, mas não nos resultados da pesquisa.
  • search – produtos visíveis apenas nos resultados da pesquisa, mas não na loja.
  • oculto – produtos ocultos da loja e da pesquisa e acessíveis apenas por URL direto.
  • destaque – produtos marcados como produtos em destaque.
• categoria – exibe produtos que possuem um determinado slug de categoria.
• tag – exibe produtos que possuem um determinado slug de tag.
• cat_operator – permite realizar cálculos para determinar quais produtos serão incluídos. As opções disponíveis são:
  • AND – exibe produtos que pertencem a todas as categorias escolhidas.
  • IN – exibe produtos dentro da categoria escolhida. Este é o valor cat_operator padrão.
  • NOT IN – exibe produtos que não estão na categoria escolhida.
• ids – exibe produtos com base em uma lista separada por vírgulas de IDs de postagem.
• skus – exibe produtos com base em uma lista de SKUs separada por vírgulas.

Se o produto não estiver sendo exibido, certifique-se de que ele não esteja definido como “Oculto” na “Visibilidade do catálogo”.

Exemplos de cenários de produtos baseados em atributos

Cenário 1 – Itens de venda aleatória

Você deseja exibir quatro produtos em promoção.

[products limit="4" columns="4" orderby="popularity" class="quick-sale" on_sale="true"]

Este shortcode indica explicitamente quatro produtos com quatro colunas (que serão uma linha), mostrando os itens à venda mais populares. Ele também adiciona uma classe CSS de venda rápida, que você pode modificar em seu tema.

Cenário 2 – Produtos em destaque

Você deseja exibir seus produtos em destaque, dois por linha, com no máximo quatro itens.

[products limit="4" columns="2" visibility="featured"]

Este shortcode diz que até quatro produtos serão carregados em duas colunas e que eles devem ser apresentados. Embora não declarado explicitamente, ele usa os padrões, como classificação por título (A a Z).

Cenário 3 – Produtos mais vendidos

Você deseja exibir seus três produtos mais vendidos em uma linha.

[products limit="3" columns="3" best_selling="true"]

Para mais exemplos, consulte a documentação dos códigos de acesso do WooCommerce.

Categorias de Produtos

Esses dois códigos de acesso exibirão suas categorias de produtos em qualquer página.

1. [product_category] – exibe produtos em uma categoria de produto especificada.
2. [product_categories] – exibe todas as suas categorias de produtos. Este é o código de acesso genérico para exibir uma categoria específica. Você precisará adicionar um parâmetro específico, listado abaixo, para realmente exibir um (ou mais).

Atributos de categoria de produto disponíveis

• ids – exibe categorias específicas por seus ids. Para ser usado em product_categories. Exemplo – [products _categories ids="1,2"]
• categoria – pode ser o id da categoria, nome ou slug. Para ser usado em [product_category]
• limite – determina o número de categorias que serão exibidas. Exemplo – [products _categories limit="3"]
• colunas – determina o número de colunas que serão exibidas. O padrão é 4.
• hide_empty – isso ocultará categorias vazias. O padrão é “1”, que ocultará categorias vazias. Defina como "0" para mostrar categorias vazias. .Exemplo – [products _categories hide_empty="1"]
• pai – isso mostrará as categorias filhas de uma categoria pai específica, que é segmentada por id. Por exemplo, [parent=”3″] exibirá as categorias filhas da categoria cujo id é 3. Se você definir pai como “0”, somente as categorias de nível superior serão exibidas. Exemplo – [products _categories parent="0"]
• orderby – controla a ordem em que as categorias são exibidas. O padrão é ordenar por “nome”. Pode ser definido como “id”, “slug” ou “menu_order”. Se você quiser ordenar pelos ids que você especificou, então você pode usar orderby=”include”. Exemplo – [products _categories orderby="id"]
• order – informa se a ordenação da categoria é crescente (ASC) ou decrescente (DESC), usando o método definido em orderby. Padrões para ASC. Exemplo – [products _categories order="ASC"]

Exemplos de cenários de categoria de produto

Mostrar apenas categorias de nível superior
Imagine que você só queria mostrar as categorias de nível superior em uma página e excluir as subcategorias, bem, é possível com o seguinte shortcode: [product_categories number="0" parent="0"] .

Outros códigos de acesso úteis

[Adicionar ao carrinho]

Este código de acesso permite que você crie facilmente um botão Adicionar ao carrinho para um produto específico, que é segmentado por id. Existem alguns parâmetros. Tal como acontece com outros códigos de acesso, cada um deve ser colocado entre duas aspas, “assim”.

• id : Escolha o produto por ID
• style : Personalize o CSS do botão diretamente
• sku : escolha o produto por SKU
• show_price : Escolha se o preço é exibido com o botão. Existem duas opções, “VERDADEIRO” e “FALSO”
• class : atribua uma classe HTML ao botão, para que você possa segmentá-lo com código CSS
• quantidade : Escolha a quantidade do produto que será adicionado ao carrinho. Na maioria dos casos, isso será apenas "1"

Exemplo: [add_to_cart show_price="TRUE" quantity="1" class="example-cart-button"]

Adicionar ao URL do carrinho

Este código de acesso exibirá a URL real de um determinado produto. Existem apenas dois parâmetros:

• id: segmente o produto por ID
• sku: segmente o produto por SKU

Exemplo: [add_to_cart_url]

Isso exibirá o URL no botão adicionar ao carrinho de um único produto por ID.

[shop_messages]

Deseja exibir mensagens do WooCommerce em páginas que não são do WooCommerce? Este código de acesso permitirá que você exiba notificações como “Este produto foi adicionado ao seu carrinho” em qualquer página com ele.

Códigos de acesso de cupom

O WooCommerce também oferece uma maneira de exibir cupons disponíveis em qualquer página e gerar cupons automaticamente. No entanto, você precisará comprar a extensão Smart Coupons. Consulte as postagens abaixo para obter os códigos de acesso:

• Como exibir cupons disponíveis em qualquer página
• Como gerar cupons automaticamente

Códigos de acesso de solução de problemas

Pode acontecer que os códigos de acesso inseridos não funcionem. Aqui está o que você precisa verificar:

O shortcode está entre as tags :
Ao adicionar um código de acesso a uma página, certifique-se de que ele não esteja entre tags, que são projetadas para exibir (e não executar) código.

As aspas são encaracoladas, não retas
Outro erro comum é se as aspas (usadas com parâmetros) forem anguladas, ou “curvas” (assim: “) e não retas (assim: “). Os parâmetros não funcionarão com aspas curvas.

Consulte este documento para obter mais detalhes.

Lista de plugins de shortcode do WooCommerce

Além de códigos de acesso WooCommerce embutidos e gratuitos, aqui estão alguns plugins que ajudarão você a personalizar sua loja.

• Conjunto de códigos de acesso Woo
• Shortcode de revisões SIP para WooCommerce
• SIP Front-End Bundler para WooCommerce

Conclusão

Os códigos de acesso do WooCommerce são excepcionalmente úteis e poderosos. Embora possa parecer um pouco técnico, é bastante fácil de usar e implementar.

Espero que este guia tenha ajudado você a resolver todas as suas dúvidas relacionadas aos códigos de acesso do WooCommerce.

Enquanto isso, você também pode conferir nossos populares plugins WooCommerce que ajudam a tornar sua loja WooCommerce mais rápida e inteligente.

Se você tiver alguma dúvida ou sugestão, deixe um comentário abaixo e vamos resolver isso!