Começar uma loja WooCommerce com WordPress
O WooCommerce cuida da loja: os produtos, os pedidos, os impostos e os pagamentos. O que ele não faz é deixar tudo isso com a cara da sua marca. Este guia monta as quatro telas que o comprador realmente vê, usando blocos no editor que o WordPress já inclui.
Passo 1: Instalar WooCommerce
O WooCommerce é um plugin gratuito do diretório de plugins do WordPress, e continua no comando de tudo que é comercial: os dados dos produtos, o estoque, os pedidos, as regras de impostos, as zonas de frete e os gateways de pagamento. O Canvas nunca substitui essa camada, por isso suas outras extensões do WooCommerce continuam funcionando.
Duas formas de instalar
- Deixe o assistente de configuração fazer isso. Escolha um demo de loja durante a configuração. A etapa de plugins instala e ativa o WooCommerce antes da importação, porque uma loja precisa de um plugin de loja.
- Instale por conta própria em Plugins, Adicionar novo, e execute a configuração inicial do WooCommerce. Faça isso se você estiver adicionando uma loja a um site que já administra.
De qualquer forma, siga o assistente de configuração do WooCommerce uma vez e responda às perguntas sobre seu país, sua moeda e o que você vende. Essas respostas definem impostos e frete depois, e são trabalhosas para desfazer.
Configure um serviço de entrega de e-mails antes de aceitar um pedido real. As confirmações de pedido saem do WordPress pelo seu servidor por padrão, e uma loja cujos recibos caem no spam gera chamados de suporte que você não consegue responder.
Etapa 2: Comece por um demo de loja ou por um catálogo vazio
Você tem uma escolha aqui, e ela vale dez minutos de reflexão.
Importe um demo de loja
21 dos 88 Demos são lojas WooCommerce funcionais Importar uma delas traz produtos, categorias, atributos, cores de variação, uma loja com design pronto, uma página de produto com design pronto, carrinho e checkout, tudo no lugar e tudo editável. É a forma mais rápida de ver como as peças se encaixam, e você pode reverter toda a importação se decidir não usar.
Construa sobre o seu próprio catálogo
Se você já vende produtos e tem itens no banco de dados, escolha o escopo somente de páginas, no seu site existente. Você leva as páginas de demonstração e os registros que elas usam, sem as configurações, os menus ou a página inicial do site de demonstração, e seu catálogo continua exatamente onde está.
De qualquer forma, as páginas do WooCommerce no seu site são aproveitadas, então existe sempre apenas uma loja, um carrinho, um checkout e uma página da conta.
Etapa 3: Adicione seus primeiros produtos
Os produtos são registros do WooCommerce, adicionados em Produtos no painel administrativo do WordPress, e esta parte é propositalmente simples. Dedique seu tempo aqui em vez do layout, porque uma boa página de produto depende principalmente de bons dados de produto.
- Uma foto nítida por produto, tirada do mesmo jeito para cada item. Uma grade de catálogo parece planejada quando os formatos combinam, e montada às pressas quando não combinam.
- Uma descrição curta que responde à dúvida real do comprador. Tamanho, material, prazo de entrega, o que acontece se não servir.
- Categorias que combinam com a forma como as pessoas compram, não com a organização do seu estoque.
- Atributos para qualquer item variável. Cor, tamanho, acabamento. Atribua um valor de cor real aos termos de cor no admin, porque é isso que transforma uma lista suspensa em amostras de cor depois.
- Estoque, peso e dimensões se você envia produtos físicos. As regras de envio usam esses dados.
Adicione três produtos antes de criar qualquer design. Um layout avaliado com base em um único item de exemplo é um layout que você vai refazer.
Etapa 4: Desenhe a página da loja
A loja é um catálogo, e seu objetivo é levar o cliente rapidamente a uma página de produto. O Canvas oferece blocos para isso, em que a solução usual é uma única configuração do tema com três opções de layout.
Os blocos
Uma grade de produtos busca itens de uma categoria, de uma tag, de uma pesquisa ou de uma lista escolhida manualmente. Um carrossel de produtos faz o mesmo em uma linha, para a página inicial. Cards de categorias de produtos levam as pessoas para uma seção. Um filtro de preço permite que os compradores restrinjam um catálogo extenso. Cada um deles é um bloco com painel de configurações, então o número de colunas, a fonte e a ordenação são controles, não código.
O modelo por trás
A própria loja é um modelo de bloco que você pode abrir no Editor do site. Defina o layout em largura total, com barra lateral à esquerda, à direita ou nos dois lados, dependendo de os filtros e as categorias se justificarem no seu catálogo. Há 18 modelos de loja no total, cobrindo a loja, a página do produto, as páginas de arquivo, o carrinho e o checkout.
As configurações padrão da loja
Opções do tema reúnem 39 configurações de loja distribuídas em 5 abas: o catálogo, a página de produto, o carrinho e o checkout, o mini carrinho do cabeçalho e o modo de catálogo. Produtos por página, paginação, o formato da imagem do produto, se as imagens extras da galeria aparecem ao passar o mouse e o que a sobreposição ao passar o mouse oferece ficam ali. Um bloco que define uma dessas opções por conta própria ainda prevalece na página onde está.
Etapa 5: Desenhe a página do produto
Esta é a página que vende, então merece mais do que o arranjo padrão que todas as lojas da internet usam.
Monte a partir de peças
Cada parte de uma página de produto é um bloco: a galeria de imagens, o preço, a classificação com estrelas, os metadados, a descrição curta, as amostras de variações, o botão de adicionar ao carrinho, as abas, a linha de compartilhamento e os produtos relacionados. Mova-os, altere o estilo ou remova qualquer um deles, e a página continua funcionando, porque cada bloco solicita ao WooCommerce os próprios dados.
Ou comece com um layout pronto
Se preferir não começar pelas peças, escolha um dos layouts de página de produto único prontos e mova as peças: o padrão, um resumo fixo que acompanha a galeria ao rolar, uma lista, um design com destaque para cores, um design de loja, dois layouts de galeria com links personalizados e variações com barra lateral à esquerda, à direita ou duas barras laterais. Atribua um layout a cada produto pelo editor, ou defina o padrão da loja em Opções do tema.
O que colocar acima da dobra
A foto, o nome, o preço, a escolha de variação e o botão adicionar ao carrinho. Todo o resto, incluindo a descrição que a maioria das pessoas nunca lê, pode ficar abaixo. Verifique isso em um celular antes de decidir que discorda.
Etapa 6: O carrinho e a finalização da compra
Essas duas telas são onde o dinheiro se perde e, na maioria dos temas, são as duas telas que você não pode tocar. Aqui, elas são blocos como todo o resto.
O carrinho
Um bloco Canvas Cart Table para os itens, um bloco Canvas Cart Totals para os valores e um bloco Canvas Cross-Sells para o produto que o comprador realmente pode adicionar. Mantenha-o curto e deixe o botão bem visível. O erro mais comum no carrinho é um bloco de conteúdo promocional entre os totais e o botão de finalizar compra.
O checkout
Um bloco de cobrança para o formulário, um bloco de revisão do pedido para o que está sendo comprado e um bloco de avisos para as mensagens que informam ao comprador o que aconteceu. O WooCommerce continua cuidando do pedido, do pagamento e dos e-mails; você decide como a tela é apresentada.
Regras que se pagam sozinhas
- Peça apenas os campos que a entrega realmente exige.
- Mostre o custo total, incluindo a entrega, antes da etapa de pagamento.
- Informe em dias, por extenso, quando o pedido vai chegar.
- Coloque sua política de devolução onde um comprador indeciso de primeira viagem vai vê-la.
Passo 7: Amostras de variação, adicionar ao carrinho e estilos de card
Três comportamentos de loja que normalmente exigem um plugin cada estão incluídos na integração.
- Amostras de cor para atributos. Dê uma cor a um termo de atributo de produto na área administrativa, e os produtos variáveis passam a oferecer bolinhas de cor ou botões no lugar de um menu suspenso. Assim, o cliente escolhe a variação só de olhar, o que faz mais diferença no celular.
- Adicionar ao carrinho sem recarregar a página. Adicionar um produto a partir de uma grade, de um carrossel ou de uma sobreposição de card atualiza o carrinho na própria página, e o comprador continua na página que estava navegando, enquanto o carrinho do cabeçalho segue atualizando a contagem.
- Estilos do cartão de produto. Fixe todas as imagens do catálogo em um mesmo formato para que a grade fique alinhada, escolha se as imagens extras da galeria aparecem ao passar o mouse ou se são exibidas como slideshow, e defina o que a sobreposição ao passar o mouse oferece: comprar, visualização rápida ou ambos.
Os três são configurações. Nenhum deles exige um trecho de código, um tema filho ou um segundo plugin, e cada um pode ser desativado se você preferir o comportamento mais simples.
Alguns temas vendem essa camada à parte. O OceanWP inclui uma integração gratuita com o WooCommerce e oferece o Ocean eCommerce Pro como produto separado, e como o Canvas se compara ao OceanWP detalha o que cada plano inclui para uma loja.
Etapa 8: Pagamentos, velocidade e, depois, um pedido de teste
Deixe o design para o final, o dinheiro em primeiro lugar. Siga estes passos antes de avisar alguém que a loja está aberta.
A configuração comercial no WooCommerce
- Conecte os gateways de pagamento que você pretende usar e conclua a verificação deles, que costuma levar mais tempo do que você espera.
- Defina regras de impostos e zonas de entrega para os locais para onde você realmente envia produtos.
- Escreva as páginas de reembolso, devoluções e entrega, e adicione links para elas no rodapé e na finalização da compra.
Velocidade no Canvas
O WooCommerce carrega scripts e folhas de estilo em todas as páginas de um site, inclusive nas que não vendem nada. Cinco ajustes devolvem esse controle: remover o JavaScript do WooCommerce em páginas que não exibem nada da loja, desativar o rastreamento de atribuição de pedidos, impedir que o script de fragmentos do carrinho consulte o servidor em todas as páginas que mostram um carrinho, e remover as bibliotecas de medição de força da senha e de seleção fora das páginas de conta e de finalização da compra. Elas fazem parte de 35 otimizações, e todas podem ser revertidas.
Depois, faça um pedido real
Compre algo na sua própria loja, pelo celular, usando dados móveis. Pague com um cartão real se seu gateway permitir estorno de teste. Confira se o e-mail de confirmação chega, confira se o pedido aparece na área administrativa e então estorne o valor para você mesmo. Tudo o que você encontrar nesses cinco minutos é algo que um cliente acabaria encontrando.
Fontes
Quando este guia descrever algo fora do próprio Canvas, estas são as páginas oficiais que o documentam.
- Instalando e desinstalando o WooCommercewoocommerce.com · O WooCommerce é gratuito, instala pela tela de Plugins e abre o próprio assistente de configuração
- Páginas do WooCommercewoocommerce.com · O WooCommerce define uma página para cada um destes: a loja, o carrinho, a finalização de compra e a conta
- Configurando impostos no WooCommercewoocommerce.com · As alíquotas de imposto são definidas nas configurações do WooCommerce
- Configurando zonas de enviowoocommerce.com · Uma zona de envio é uma área geográfica para a qual você envia produtos
- Rastreamento de atribuição de pedidoswoocommerce.com · O que a atribuição de pedidos registra e a configuração do WooCommerce que a desliga
Próximos passos
Dois guias sobre o restante do site ao redor da loja, e os recursos da loja em detalhes.
Perguntas frequentes
A FAQ completa responde ao resto, e a documentação detalha cada configuração.
Ainda preciso do plugin WooCommerce?
Sim, uma loja Canvas continua usando o plugin WooCommerce. O Canvas adiciona blocos, modelos e opções por cima dele e deixa o plugin no comando, então pedidos, produtos, impostos, frete e pagamentos continuam onde suas outras extensões esperam encontrá-los. Se você começar por um demo de loja, o assistente de configuração instala e ativa o WooCommerce antes de a importação ser executada.
Os blocos de loja são uma compra à parte?
Não, os blocos de loja do Canvas estão incluídos em todos os planos, sem custo extra. Todos os 24 blocos de loja são premium, e todo plano inclui todos os blocos premium, junto com todos os 18 modelos de loja e todos os 21 demos de loja. Não há um nível de e-commerce nem um complemento de loja.
Posso combinar estes com os blocos do WooCommerce?
Sim, misture-os à vontade: os blocos de loja do Canvas são blocos registrados comuns, então eles ficam lado a lado com os blocos do WooCommerce e os blocos nativos do WordPress no mesmo modelo e na mesma página. Substitua uma peça por vez e deixe o resto do layout como está.
Importar um demo de loja vai gerar dois checkouts?
Não. Uma importação de demo de loja Canvas deixa você com um único checkout. O importador encontra as páginas de loja, carrinho, checkout e conta que seu site já tem e aponta para elas os menus e links da demo, então você mantém um de cada. Seus produtos e pedidos existentes não são alterados, e toda a importação pode ser revertida.
Crie seu próximo site com o Canvas
Iniciante, freelancer ou agência, você recebe os mesmos blocos e os mesmos Demos. Comece com um site e crie quantos precisar com a mesma licença.