Neste tutorial, voc\u00ea encontrar\u00e1:<\/p>\n
- \n
- Uma defini\u00e7\u00e3o de atributos WooCommerce<\/li>\n
- Como adicionar atributos \u00e0 sua loja<\/li>\n
- Como dar atributos aos produtos<\/li>\n
- Como fazer com que os atributos apare\u00e7am nas p\u00e1ginas dos produtos<\/li>\n
- Como exibir amostras de cores em vez de menus suspensos<\/li>\n<\/ul>\n
Vamos come\u00e7ar com uma vis\u00e3o geral dos atributos do produto.<\/p>\n
O que s\u00e3o atributos de produto WooCommerce?<\/h2>\n
Os atributos do WooCommerce permitem adicionar dados extras aos produtos para que voc\u00ea possa criar varia\u00e7\u00f5es do produto.<\/p>\n
Por exemplo, se voc\u00ea tem um chap\u00e9u \u00e0 venda em verde e amarelo, n\u00e3o quer vender as cores como dois produtos separados. Uma vez que \u00e9 o mesmo design de chap\u00e9u, mas em cores diferentes, voc\u00ea usaria um atributo em seu lugar. Voc\u00ea adicionaria um novo atributo "cor" e, em seguida, adicionaria varia\u00e7\u00f5es de cor "verde" e "amarelo" ao seu chap\u00e9u.<\/p>\n
Vamos fazer algumas capturas de tela e exemplos reais.<\/p>\n
Como adicionar novos atributos de produto<\/h2>\n
Os atributos podem ser adicionados a partir do menu Atributos listado no menu Produtos.<\/p>\n
![\"O](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c8ea4c51b.png\")
<\/a><\/p>\nSe voc\u00ea executou o assistente de configura\u00e7\u00e3o do WooCommerce, ver\u00e1 os atributos Cor e Tamanho j\u00e1 criados.<\/p>\n
![\"O](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c8ecd59c2.png\")
<\/a><\/p>\nVoc\u00ea pode ver "termos" adicionados para os atributos de cor e tamanho j\u00e1<\/p>\n
Para adicionar um novo atributo, tudo o que voc\u00ea precisa fazer \u00e9 inserir um nome e slug e clicar em Adicionar atributo.<\/p>\n
![\"O](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c8ef5db4d.png\")
<\/a><\/p>\nUm slug \u00e9 um nome totalmente em min\u00fasculas usado para URLs. Substitua todos os espa\u00e7os por h\u00edfens no slug.<\/p>\n
Depois de criar seu novo atributo, clique no link Configurar termos para adicionar op\u00e7\u00f5es ao atributo.<\/p>\n
![\"O](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c8f15d5c2.png\")
<\/a><\/p>\n“Termos" \u00e9 uma palavra vaga, mas \u00e9 a palavra que WooCommerce usa para op\u00e7\u00f5es dentro do seu atributo. Por exemplo, “Cor” \u00e9 um atributo e “azul,” cinza “e” verde “s\u00e3o alguns de seus termos.<\/p>\n
No meu exemplo, criei um atributo chamado “Material”, ent\u00e3o adicionarei alguns novos materiais, como “vidro” e “pl\u00e1stico”.<\/p>\n
![\"O](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c8f3cebf1.png\")
<\/a><\/p>\nVoc\u00ea pode adicionar quantos atributos com quantos termos desejar.<\/p>\n
Embora voc\u00ea possa criar atributos espec\u00edficos para produtos individuais, \u00e9 melhor adicion\u00e1-los assim por meio do menu Atributos. Isso os mant\u00e9m dispon\u00edveis para todos os produtos e torna o gerenciamento muito mais f\u00e1cil. Adicionar atributos a produtos individuais rapidamente se tornar\u00e1 confuso e pesado.<\/p>\n
Agora que voc\u00ea criou seu pr\u00f3prio atributo personalizado, veja como pode adicion\u00e1-lo a um produto.<\/p>\n
Como adicionar atributos a um produto<\/h2>\n
Depois de criar seus atributos, voc\u00ea est\u00e1 pronto para atribu\u00ed-los aos seus produtos.<\/p>\n
Comece visitando um de seus produtos no painel de administra\u00e7\u00e3o. Em seguida, localize a se\u00e7\u00e3o Dados do produto e clique na seta \u00e0 direita para expandi-la.<\/p>\n
![\"O](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c8f5dbe8e.png\")
<\/a><\/p>\nDepois de expandido, clique na se\u00e7\u00e3o Atributos na barra lateral esquerda.<\/p>\n
![\"O](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c8f7b6e44.png\")
<\/a><\/p>\nNo meu exemplo, o produto j\u00e1 tem um atributo, Cor, listado aqui:<\/p>\n
![\"O](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c8f9a85b2.png\")
<\/a><\/p>\nSe voc\u00ea clicar em um atributo, ele se expande para que voc\u00ea possa adicionar e remover diferentes valores \/ termos.<\/p>\n
![\"O](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c8fb9e1f7.png\")
<\/a><\/p>\nO bot\u00e3o Adicionar novo serve para adicionar termos totalmente novos que se tornam dispon\u00edveis para todos os produtos.<\/p>\n
Voc\u00ea pode clicar na se\u00e7\u00e3o Valor (es) para selecionar os termos existentes para adicionar ao produto.<\/p>\n
![\"O](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c8fd6df65.png\")
<\/a><\/p>\nEsses termos s\u00e3o do menu Produto> Atributos<\/strong><\/p>\n
Voc\u00ea pode adicionar mais atributos ao produto usando esta op\u00e7\u00e3o suspensa:<\/p>\n
![\"O](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c8ff8fb6d.png\")
<\/a><\/p>\nSe voc\u00ea est\u00e1 se perguntando como isso funcionaria, um exemplo seria uma camiseta que precisa de op\u00e7\u00f5es de cor e tamanho. Voc\u00ea adicionaria um atributo de cor e um atributo de tamanho.<\/p>\n
Como j\u00e1 mencionei, n\u00e3o recomendo a cria\u00e7\u00e3o de atributos de produto personalizados, mas voc\u00ea pode selecionar atributos preexistentes com o seletor suspenso apresentado acima.<\/p>\n
Uma coisa que voc\u00ea n\u00e3o pode esperar \u00e9 que, depois de adicionar seus atributos, eles n\u00e3o apare\u00e7am automaticamente na p\u00e1gina do produto.<\/p>\n
Como fazer seus atributos serem exibidos na p\u00e1gina do produto<\/h2>\n
Fazer com que seus atributos apare\u00e7am nas p\u00e1ginas dos produtos \u00e9 uma parte confusa do WooCommerce.<\/p>\n
Quando voc\u00ea adiciona atributos a um produto, mesmo se voc\u00ea marcar a caixa “vis\u00edvel na p\u00e1gina do produto”, as varia\u00e7\u00f5es ainda n\u00e3o ser\u00e3o exibidas em seu site.<\/p>\n
![\"O](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c9017a0fe.png\")
<\/a><\/p>\nMarcar esta caixa \u00e9 apenas uma etapa do processo<\/p>\n
Por padr\u00e3o, a \u00fanica diferen\u00e7a na p\u00e1gina do produto ser\u00e3o os atributos e seus valores listados na se\u00e7\u00e3o Informa\u00e7\u00f5es adicionais.<\/p>\n
![\"O](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c9037fb94.png\")
<\/a><\/p>\nPara adicionar a lista suspensa para seus atributos, voc\u00ea deve primeiro mudar seu produto de um “produto simples” para um “produto vari\u00e1vel” usando esta lista suspensa:<\/p>\n
![\"O](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c9056b83e.png\")
<\/a><\/p>\nEm seguida, voc\u00ea precisa abrir a se\u00e7\u00e3o Atributos e marcar a caixa “Usado para varia\u00e7\u00f5es” para cada atributo.<\/p>\n
![\"O](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c9079e16c.png\")
<\/a><\/p>\nCertifique-se de marcar a caixa para todos os atributos que deseja usar<\/p>\n
Quando terminar, clique no bot\u00e3o Salvar atributos.<\/p>\n
Em seguida, clique na se\u00e7\u00e3o Varia\u00e7\u00f5es. Voc\u00ea pode usar o menu suspenso para adicionar uma varia\u00e7\u00e3o de cada vez, mas \u00e9 mais r\u00e1pido usar a op\u00e7\u00e3o “Criar varia\u00e7\u00f5es de todos os atributos”.<\/p>\n
![\"O](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c909c73c5.png\")
<\/a><\/p>\nDepois de clicar em Ir, o WooCommerce criar\u00e1 todas as diferentes varia\u00e7\u00f5es de produto poss\u00edveis.<\/p>\n
![\"O](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c90c2f36c.png\")
<\/a><\/p>\nMeu produto tem duas varia\u00e7\u00f5es por causa dos termos de cor cinza e vermelho adicionados<\/p>\n
A \u00faltima etapa antes que suas varia\u00e7\u00f5es apare\u00e7am na p\u00e1gina do produto \u00e9 dar um pre\u00e7o a cada uma.<\/p>\n
Voc\u00ea vai querer preencher todos os campos, mas vou apenas adicionar pre\u00e7os no meu exemplo.<\/p>\n
![\"O](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c90e83994.png\")
<\/a><\/p>\nQuando terminar de adicionar pre\u00e7os a todas as varia\u00e7\u00f5es, clique no bot\u00e3o Salvar altera\u00e7\u00f5es.<\/p>\n
Agora voc\u00ea ver\u00e1 um menu suspenso permitindo que os compradores escolham suas varia\u00e7\u00f5es.<\/p>\n
![\"O](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c9111378f.png\")
<\/a><\/p>\nMeu exemplo usa apenas um atributo, mas voc\u00ea pode adicionar quantos quiser. Cada atributo ter\u00e1 seu pr\u00f3prio menu suspenso listando seus termos dispon\u00edveis.<\/p>\n
Embora funcione perfeitamente bem, os seletores suspensos n\u00e3o proporcionam a melhor experi\u00eancia de compra.<\/p>\n
Como exibir amostras de cores<\/h2>\n
O menu suspenso padr\u00e3o para varia\u00e7\u00f5es do produto n\u00e3o cria uma \u00f3tima experi\u00eancia do usu\u00e1rio<\/a>.<\/p>\n
Imagine que voc\u00ea tem uma camiseta dispon\u00edvel em cinco cores. Com um menu suspenso, os compradores n\u00e3o podem ver quantas cores est\u00e3o dispon\u00edveis at\u00e9 clicarem nele, e eles n\u00e3o veem os tons de cores reais. Eles s\u00f3 veem a palavra “azul”, por exemplo, em vez do tom de azul que seu produto usa.<\/p>\n
Dar aos visitantes amostras de cores para escolher contribui para uma experi\u00eancia de compra muito melhor.<\/p>\n
![\"O](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c9131f1dc.png\")
<\/a><\/p>\nEmbora essa op\u00e7\u00e3o n\u00e3o esteja dispon\u00edvel no WooCommerce, existem v\u00e1rios plug-ins excelentes que podem adicionar esse recurso ao seu site:<\/p>\n
Esses 6 plug-ins de varia\u00e7\u00e3o de produto para WooCommerce tornam seu site mais f\u00e1cil de usar<\/a><\/p>\n
Os plug-ins listados nessa cole\u00e7\u00e3o podem substituir a lista suspensa para op\u00e7\u00f5es de cor, tamanho e estilo, adicionar novas imagens de galeria por varia\u00e7\u00e3o e muito mais.<\/p>\n
Dom\u00ednio do atributo WooCommerce<\/h2>\n
Agora voc\u00ea sabe o que s\u00e3o os atributos do produto WooCommerce e como adicion\u00e1-los ao seu site.<\/p>\n
O uso de atributos ser\u00e1 uma parte fundamental do funcionamento de sua loja e da venda de varia\u00e7\u00f5es de produtos.<\/p>\n
Se voc\u00ea quiser um novo design excelente para sua loja, usei o tema Loja Moderna<\/a> ao longo deste tutorial. \u00c9 totalmente responsivo, personaliz\u00e1vel e carrega rapidamente.<\/p>\n