Um guia de designers para WooCommerce

Se você está projetando uma loja WooCommerce como Shopify ou desenvolvendo um tema WooCommerce existente, este artigo Designers Guide To WooCommerce é para você. Essa composição fornece um pouco mais de informações sobre estilo, alteração de designs e outras informações que abrangem páginas relacionadas ao WooCommerce.

Este plugin é uma ferramenta amigável e muito flexível; no entanto, nem todos os sites serão suportados. Ao usar os recursos e abordagens suportados pelo WooCommerce, você pode acelerar o processo de design e desenvolvimento.

Ele permite que os usuários personalizem as modificações, mas com custo adicional. A maneira mais rápida de ver quais recursos existem é visitar a demonstração do Storefront dentro do WooCommerce. Se você precisar de alguma maneira de aprender a usar o Woocommerce de maneira geral, consulte os guias de cúpula para ajudá-lo a começar. WooCommerce cria as seguintes novas páginas. Existem tipos de páginas para as quais você precisará projetar.

A primeira são as Páginas de Produtos. Essas páginas têm dois tipos, a saber: Páginas de Arquivo de Produto e Páginas Únicas de Produto.

As páginas de arquivo de produtos exibem miniaturas das categorias de produtos disponíveis. Eles mostram outra página de arquivo do produto quando você clica na miniatura da categoria. Em seguida, ele exibe o único produto quando você clica em uma miniatura do produto.

O outro tipo é o Product Single Pages. Aqui, eles exibem produtos únicos e combinam imagens do produto, informações do cabeçalho do produto, informações detalhadas do produto e produtos relacionados, vendas cruzadas e vendas adicionais.

Também possui Páginas Especiais , que incluem Carrinho de Compras e Checkout . Os carrinhos de compras geralmente são exibidos de forma condensada como um widget de barra lateral, às vezes em formato expandido na página Carrinho junto com as informações de entrega. O checkout, por outro lado, é quando o cliente está fazendo o check-out e requer informações de endereço.

Diferentes tipos de produtos

Esta ferramenta possui diferentes tipos de Produtos;

O primeiro é o Cabeçalho do Produto que é dividido em cinco partes. Estes são:

1. Nome do produto – estes são mostrados nas páginas de resumo/arquivo e páginas únicas
2. Recurso do produto - Você verá nas páginas de resumo/arquivo e páginas de singles
3. Imagem – As imagens em destaque são exibidas no resumo e imagens adicionais na página do produto único
4. Descrição longa – Isso é mostrado na área Descrição do produto na parte inferior da página do produto único
5. Breve Descrição – Isso é mostrado na parte superior da página do produto único

Esta ferramenta também permitirá que um usuário do produto.

Cada categoria precisa de uma imagem de categoria fornecida e uma descrição, e também pode ter subcategorias. Por exemplo, Sapato é uma categoria e a marca de sapatos é uma subcategoria. Os arquivos de categorias de produtos são gerados automaticamente com as seguintes seções: título ou nome da categoria, descrição da categoria, miniatura de uma categoria para cada subcategoria da categoria atual, miniaturas de produtos opcionais incluem o título, preço e Adicionar ao carrinho para cada produto em a categoria atual. Ao clicar em uma categoria abre uma nova categoria, clicar na miniatura de um produto abre o produto.

Além disso, em Páginas de produtos, elas são geradas automaticamente com o seguinte:

Imagens do produto – São imagens em destaque e imagens complementares para o produto. Título do produto, preço do produto, descrição resumida do produto, quantidade para adicionar ao carrinho (com + e controles), botão Adicionar ao carrinho, categorias de SKU do produto (unidade de manutenção de estoque) e tags.

As guias do produto incluem a descrição longa do produto, incluindo galeria de imagens opcional, informações adicionais, como o tíquete de atributos do produto a ser exibido na página do produto e as análises opcionais do produto. Ao clicar em uma categoria abre uma nova categoria, clicar na miniatura de um produto abre o produto.

Upsells – Estas são as coisas “você também pode gostar” seguidas de thumbs/títulos para upsells.

Vendas cruzadas – Estes são os produtos relacionados seguidos pelas miniaturas.

Na apresentação do produto, as opções são a apresentação Padrão e Opcional. O padrão exibe a imagem em destaque na parte superior da página do produto, com as miniaturas de imagem suplementares abaixo em 3 colunas de miniaturas. Por outro lado, a apresentação opcional exibe a imagem em destaque sem miniaturas abaixo e exibe todas as imagens na guia Descrição.

Outra parte da ferramenta são os widgets de pesquisa de produtos que estão disponíveis para serem colocados em widgets da barra lateral ou widgets de rodapé. Se você deseja pesquisar por qualquer site, ele possui as Opções de pesquisa em todo o site. Abaixo está a caixa de pesquisa de produtos que permite pesquisar um nome de produto, uma descrição curta e uma descrição longa. A outra divisão das opções de pesquisa ampla é chamada de detalhamento de categoria. É um campo suspenso que permite a seleção de qualquer categoria ou subcategoria. O kit de nuvem de tags orgulhoso tem um menu suspenso que permitirá que você selecione etiquetas de preço.

Os widgets de pesquisa de Opções de Pesquisa de Categoria de Produto só aparecerão quando os arquivos de categoria de produto gerados automaticamente estiverem sendo exibidos. A primeira é a navegação em camadas. Isso permite que o usuário refine produtos com base em atributos e ajuda efetivamente o usuário no que está procurando. Filtro de preço do produto — exibe uma escala móvel que permite que os produtos sejam filtrados por uma faixa de preço. Best-sellers—exibe o título/thumb/preço de uma lista selecionada automaticamente dos produtos mais vendidos. O produto em destaque exibe o título/polegar/preço dos produtos marcados como Produtos em destaque. À venda: Exibe os produtos que têm um Preço de venda inserido além do preço.

Se um usuário quiser estilizar seu WooCommerce, temos opções como Product thumbs. Quando os produtos aparecem como miniaturas de produtos, são exibidos 4 elementos, incluindo miniatura, título, preço, adicionar ao carrinho. Estilo CSS que pode ser usado para plano de fundo do produto, borda do produto, preenchimento e margem. Em seguida é a miniatura. Isso inclui borda, preenchimento e margens. O título inclui fonte, peso, cor e tamanho, o mesmo que preço. Em adicionar ao carrinho inclui a cor do botão, a cor da etiqueta, a borda e o raio.

Também é mostrado na ferramenta o adesivo de venda, a palavra 'venda' aparece sobre as miniaturas do produto à venda - o estilo CSS pode ser usado: cor de fundo, cor da fonte, cor da borda. Largura da borda, borda sólida/tracejada, raio da borda.

As variações de produtos permitem que um cliente configure um produto de vestuário disponível em cores ou designs diferentes. Quando são usadas variações de produtos, as páginas de arquivo de produtos exibirão um botão “Escolher opções” em vez de um botão Adicionar ao carrinho.

Em resumo, definimos os principais elementos que você precisa pensar ao projetar uma loja WooCommerce. Explicamos os diferentes tipos de páginas, as informações do produto, bem como as opções de pesquisa e estilo. Divirta-se construindo sua loja WooCommerce.

Leia mais sobre os temas WordPress Woocommerce aqui.