Desenvolvimento de Lojas Online com WooCommerce e o Tema Gratuito Astra

Por: Joseph de Souza

Instalação do WordPress e do WooCommerce

Em primeiro lugar, temos de instalar o WordPress, seguido do WooCommerce. Em seguida, avançamos para a configuração da nossa loja online.
No primeiro ecrã, será apresentada uma mensagem de boas-vindas com o texto «Welcome to Woo». Clique no botão «Set up my store».
Em seguida, ser-lhe-á pedido que escolha entre três opções: estou a começar o meu negócio, já estou a vender ou estou a configurar uma loja para um cliente. Pode selecionar uma destas opções e clicar em continuar. Na página seguinte, na secção que pede algumas informações sobre a sua loja, introduza o nome da loja, selecione o setor de atividade, escolha o país e introduza o seu endereço de e-mail.
Avance para o ecrã seguinte, onde será apresentada uma página com várias opções adicionais. Desmarque-as e continue. Será então apresentado o ecrã seguinte. Terá de adicionar os seus produtos, configurar os pagamentos, personalizar a loja e realizar algumas outras tarefas. Depois, pode aceder ao ecrã de configuração para configurar a sua loja.
Na parte superior, encontrará vários separadores: Geral, Produtos, Envio, Pagamentos, Contas e Privacidade, E-mails, Integração, Site, Visibilidade, Ponto de Venda e Avançado.


  

Passo 1: Definições do WooCommerce — Geral e Produtos

Agora vamos concentrar-nos nas definições. O primeiro separador é Geral. Aqui, introduzimos a morada da loja, a localidade, o país, o código postal e as opções gerais. Podemos especificar os locais onde pretendemos vender e as zonas para as quais fazemos envios. Também podemos ativar ou desativar os impostos e os códigos de cupão. Nas opções de moeda, podemos definir a moeda predefinida, a posição do símbolo da moeda, o separador de milhares, entre outras opções.



No separador Produtos, podemos especificar várias opções relacionadas com os produtos, incluindo a página predefinida da loja e a imagem de substituição, entre outras.
O separador seguinte é Inventário. Podemos ativar a gestão de stock se quisermos que a loja também controle o inventário. No caso de uma loja que não venda produtos físicos, devemos desativar a gestão de stock.
Todas as notificações relacionadas com o stock de uma loja que envia produtos físicos e tem a gestão de inventário ativada estarão disponíveis aqui. Se a gestão de stock estiver ativada e não quisermos que as encomendas sejam canceladas automaticamente, devemos deixar o campo «Manter stock (minutos)» em branco.
Se não quisermos que a loja faça a gestão do stock, basta desativar esta opção.

Passo 2: Definições do WooCommerce — Produtos Digitais e Descarregáveis, como Livros Eletrónicos

Em seguida, acedemos ao separador Produtos descarregáveis. Devemos selecionar o método de descarregamento de ficheiros «Forçar descarregamentos». Esta opção proporciona maior segurança aos ficheiros descarregados. Além disso, podemos restringir o acesso aos descarregamentos ativando a opção «Os descarregamentos exigem início de sessão», obrigando o cliente a iniciar sessão quando pretender descarregar os artigos comprados. No campo relativo ao nome do ficheiro, acrescente uma sequência única ao nome para aumentar a segurança.
Na secção Diretórios de descarregamento aprovados, deve introduzir os diretórios que correspondem a diretórios físicos existentes no alojamento web. Um diretório físico tem de existir efetivamente no servidor de alojamento. O segundo diretório apresentado corresponde ao caminho absoluto, que inclui o nome do domínio. Por exemplo, considere o seguinte URL: https://www.myebookstore.com/wp-content/uploads/woocommerce_uploads/ .   

No separador Avançado, podemos configurar algumas opções avançadas. Por enquanto, vamos manter as definições predefinidas.

Passo 3: Configuração das Zonas e dos Métodos de Envio (para Produtos Físicos)

Na secção Envio, quando vendemos produtos físicos, temos de criar zonas de envio e, em seguida, configurar as opções de envio para cada zona. Isto permite definir diferentes tarifas e métodos de envio para as várias zonas criadas. Uma zona pode corresponder a um único país, a um grupo de países ou a determinadas regiões dentro de um país.
As zonas também permitem especificar diferentes taxas de imposto, métodos de envio e custos de transporte para cada zona.   

Passo 4: Configuração dos Métodos de Pagamento e das Opções de Conta do Cliente

Na secção Pagamentos, podemos configurar as várias opções de pagamento, incluindo os métodos de pagamento offline. Qualquer extensão personalizada de gateway de pagamento que tenhamos instalado também aparecerá aqui.
Também podemos restringir os métodos de pagamento a determinados países através de uma extensão como Conditional Payments for WooCommerce.

Na secção Contas e Privacidade, são disponibilizadas algumas opções adicionais.
Podemos permitir que os clientes criem uma conta durante o processo de finalização da compra ou na página «A minha conta». Também podemos personalizar as opções de criação de conta, enviando uma ligação para definir a palavra-passe ou gerando os dados de início de sessão da conta.

Passo 1: WooCommerce — E-mails Automáticos

Em seguida, vamos analisar os e-mails automáticos enviados pela loja WooCommerce. Podemos ativar as notificações por e-mail enviadas pela nossa loja online em determinadas situações. Se tivermos instalado uma extensão especializada na personalização de e-mails, como Mailonix - Email Template Customizer for WooCommerce, será apresentada uma breve pré-visualização do e-mail no final deste separador.



Na secção Visibilidade do site, podemos escolher entre publicar a loja ou apresentá-la como «Em breve». No modo «Em breve», a loja só é apresentada ao administrador. Na secção Ponto de Venda, podemos adicionar a morada física da loja, caso exista.
Podem ser apresentados outros separadores se tivermos instalado extensões adicionais, como Sequential Order Numbers ou PDF Ink Lite, caso pretendamos adicionar marcas de água aos livros eletrónicos em PDF disponibilizados para descarregamento.
Numa loja virtual com a extensão PDF Ink Lite instalada, podemos aceder às definições da extensão de marca de água clicando no respetivo separador.

Passo 1: WooCommerce — Separador Avançado

No separador Avançado, temos de configurar as páginas para que o WooCommerce saiba para onde encaminhar os utilizadores durante o processo de finalização da compra.
Por exemplo, podemos definir as páginas do carrinho, de finalização da compra, «A minha conta» e dos termos e condições. Todas estas páginas podem ser configuradas aqui. Também podemos configurar os pontos finais da conta, como Encomendas, Consultar encomendas, Descarregamentos, Editar conta e Moradas, entre outros. Estas são, em resumo, as várias definições que temos de configurar numa nova loja.

Ligações Permanentes dos Produtos no WooCommerce

Para definir uma ligação permanente personalizada para uma página de produto no WooCommerce, temos de introduzir uma base personalizada, como /product/. Para isso, aceda a Definições >> Ligações permanentes no painel de administração.

Adicionar a Pesquisa ao Menu

Crie uma página de pesquisa. Introduza o título e apenas o shortcode da extensão Advanced Woo Search, ou seja:
[aws_search_form]

Personalização do Tema Astra para uma Loja de Comércio Eletrónico Baseada em WooCommerce

Em seguida, temos de nos concentrar na personalização do tema. Para esta loja, instalámos o tema gratuito Astra. Primeiro, vamos personalizar o tema.
Antes de mais, gostaria de referir que podemos utilizar dois tipos de cabeçalho: um cabeçalho que apresenta apenas o logótipo ou um cabeçalho colocado imediatamente acima do conteúdo e que ocupa toda a largura da área de conteúdo. Se pretender um cabeçalho acima do conteúdo que ocupe toda a largura dessa área, deverá ter aproximadamente 1024 píxeis de largura e 300 píxeis de altura. Estas dimensões são definidas depois de analisarmos a resolução de ecrã da maioria dos visitantes previstos.
Se pretender uma largura de 1920 píxeis, também pode optar por essa dimensão e carregar o cabeçalho. Pode ainda carregar uma imagem de cabeçalho com o dobro das dimensões e reduzi-la utilizando CSS personalizado no widget HTML usado no cabeçalho principal.
Temos de definir a largura correspondente nas opções de apresentação em caixa do personalizador do tema. Ao criar o cabeçalho num editor gráfico, utilize uma resolução duas a quatro vezes superior à largura e à altura finais.
Podemos personalizar estas opções acedendo a Astra >> Personalizar.
No lado esquerdo do ecrã seguinte, serão apresentadas várias opções. A primeira chama-se Global. Aqui podemos definir a tipografia, as cores e os botões. Na secção Tipografia, podemos configurar os tipos de letra e os respetivos tamanhos para vários elementos da página, como títulos e parágrafos.
Em seguida, temos o separador Cores. Aqui podemos definir as várias cores, incluindo as dos links, do texto principal e dos contornos dos links, entre outras. Nas definições do contentor, encontramos o esquema de apresentação do contentor. Selecione o esquema de contentor normal com o estilo em caixa.
O estilo em caixa utiliza uma largura fixa: o contentor tem 1200 píxeis de largura e o contentor estreito tem 750 píxeis. Tenha em atenção que também podemos definir a largura do contentor como 1920 píxeis se a maioria dos visitantes previstos utilizar ecrãs de alta resolução. Se utilizar botões no seu site, também pode personalizá-los no separador Botões.

O Cabeçalho do Site no Tema Astra para WooCommerce

Em seguida, vamos concentrar-nos no cabeçalho. O Astra divide o cabeçalho em três áreas: Cabeçalho superior, Cabeçalho principal e Cabeçalho inferior.


No cabeçalho superior, podemos colocar o menu principal. Se clicar no ícone da roda dentada, à esquerda do cabeçalho superior, poderá definir a altura e efetuar algumas alterações de design. Mantenha a altura em 50 píxeis, uma vez que apenas precisamos de apresentar o menu. Também podemos definir a cor de fundo, a cor e a espessura do contorno inferior, bem como o preenchimento e as margens.
No cabeçalho principal, definimos uma altura de 289 píxeis para o design utilizado neste exemplo. Definimos a cor de fundo de modo a corresponder à cor de fundo da imagem de cabeçalho carregada. Podemos manter a espessura do contorno inferior e as margens a zero.


Dimensões do Cabeçalho — Utilização de um Logótipo com a Largura do Conteúdo: Quando se utiliza uma imagem grande em vez de um logótipo, o cabeçalho deverá ter aproximadamente 1024 píxeis de largura por 289 a 300 píxeis de altura. Selecione o cabeçalho do meio (Cabeçalho principal), adicione um widget e escolha Imagem nas opções de design do widget.



Vamos adicionar um widget e selecionar a imagem que preparámos para o cabeçalho.
Em seguida, personalizamos o cabeçalho inferior, que é a última das três áreas. Adicionamos um widget e inserimos o shortcode da extensão Advanced Woo Search para implementar a funcionalidade de pesquisa na loja.
Podemos criar um cabeçalho com um fundo contínuo, sem espaços entre as áreas, utilizando uma imagem de fundo. Isto é feito através de código CSS personalizado, definido na secção de CSS personalizado das definições do tema. Este é o aspeto do cabeçalho depois destas alterações.

Configuração das Definições dos Tipos de Conteúdo

Em seguida, temos as definições dos tipos de conteúdo, que permitem configurar cada tipo de página e publicação. Podemos definir o esquema de apresentação do contentor no lado esquerdo do ecrã. É possível configurar o esquema de cada tipo de página e publicação. Estas definições estão disponíveis para arquivos do blogue, publicações individuais, páginas individuais, páginas de pesquisa e tipos de conteúdo personalizados.
Por exemplo, nas definições de uma página individual, podemos configurar a área do título da página, o esquema do contentor, o estilo do contentor, o esquema da barra lateral e o estilo da barra lateral. Podemos escolher uma barra lateral à esquerda, à direita ou nenhuma barra lateral. No exemplo apresentado, utilizamos uma barra lateral sem caixa de fundo.
Podemos aplicar definições semelhantes a diferentes tipos de páginas e publicações. Por exemplo, também podemos personalizar a área do título, o esquema e o estilo do contentor e o esquema da barra lateral de uma publicação individual.

Existem vários esquemas que podem ser selecionados para a área do título da página. O esquema predefinido chama-se Banner, mas também está disponível um segundo esquema. Também podemos ativar ou desativar as migalhas de pão, o alinhamento horizontal, a imagem destacada e o título. Estes elementos podem ser apresentados conforme pretendido, através das definições individuais de cada página no painel de administração.
Na secção Geral, encontramos várias definições para as migalhas de pão, a barra lateral, o botão para voltar ao topo, a acessibilidade e o editor de blocos.
Na secção Barra lateral, podemos definir o esquema predefinido para todo o site e especificar a largura da barra lateral.

O Rodapé do Site

Em seguida, podemos concentrar-nos no rodapé. Tal como acontece com o cabeçalho, o rodapé tem três áreas: Rodapé superior, Rodapé principal e Rodapé inferior.
No rodapé superior, podemos colocar um menu. Normalmente, este menu inclui as seguintes opções: Contacte-nos, Sobre nós, Perguntas frequentes, Perguntas frequentes sobre encomendas, Termos e condições e Ficha técnica.
O rodapé do meio, denominado Rodapé principal, costuma ficar vazio, a menos que pretendamos incluir elementos como os logótipos dos vários métodos de pagamento. O rodapé inferior apresenta os direitos de autor, incluindo uma mensagem com o ano atual, o nome da loja e a respetiva morada.

Definições do WooCommerce para o Tema Astra

Em seguida, temos as definições do WooCommerce. Na secção Geral, podemos configurar o esquema e o estilo do contentor, bem como o esquema e o estilo da barra lateral.
No Catálogo de produtos, encontramos as definições do esquema do contentor, do esquema da barra lateral, do esquema da loja e do número de produtos por página.
Em seguida, na secção Produto individual, podemos configurar a área do título do produto, o esquema do contentor e o esquema da barra lateral. Na área do título do produto, podemos escolher entre dois tipos de esquema: o esquema Banner, que é o predefinido, e um esquema alternativo. Na secção Estrutura, encontramos o título, os metadados, as migalhas de pão, o excerto, a imagem destacada e as taxonomias.


Nesta livraria, pretendemos apresentar o nome do autor do livro, e não o nome da pessoa que criou a descrição e o resumo do livro. Por isso, utilizámos código personalizado para apresentar o autor, introduzindo os nomes dos autores nos atributos dos produtos, no painel de administração.


No painel de administração, o autor do livro é selecionado na página de edição do produto, através das definições especiais existentes na parte inferior da página.
Nesta livraria, as migalhas de pão e a imagem destacada estão desativadas, uma vez que será utilizada a imagem do próprio produto.

Personalização do Processo de Finalização da Compra no WooCommerce

Também podemos personalizar o carrinho, alterando o texto do botão do carrinho.
A página de finalização da compra também pode ser personalizada, ocultando os campos desnecessários. Podemos ainda selecionar as páginas da Política de Privacidade e dos Termos e Condições. Existem também opções que permitem ao cliente aumentar ou diminuir as quantidades dos produtos no carrinho.

Dimensões das Miniaturas dos Produtos e Menus do WooCommerce

Na secção Imagens dos produtos, também podemos ajustar as dimensões das miniaturas e das imagens principais, bem como a proporção entre largura e altura. Na secção Identidade do site, podemos carregar um ícone para o site e editar o título do site e as definições do logótipo. O separador Menus apresenta todos os menus existentes e permite modificá-los ou criar novos menus. Podemos personalizar os vários menus disponíveis.

Outras Definições

O separador Widgets permite aceder facilmente aos widgets da barra lateral do WooCommerce. Nas definições da página inicial, podemos selecionar a página que será utilizada como página inicial. Por fim, na secção CSS adicional, podemos adicionar CSS personalizado para controlar determinados elementos da apresentação. Por exemplo, como referido anteriormente, podemos criar um cabeçalho superior sem espaços entre as áreas, utilizando um fundo personalizado e especificando esse fundo nesta secção de CSS. Também podemos ajustar o tipo de letra do menu de início e fim de sessão, que podemos adicionar através de widgets personalizados na barra lateral do WooCommerce.

Criação de um Atributo para o Autor

Como estamos a criar uma livraria, vamos utilizar os atributos para apresentar o nome do autor de cada livro neste site. No painel de administração, clique em Produtos, no menu do lado esquerdo, e depois selecione Atributos.
Na secção Atributos, adicione um novo atributo com o nome «author».
Temos de criar um slug chamado «book-author», uma vez que não podemos utilizar «author» como slug porque é uma palavra reservada. Depois de concluir esta operação, clique em Atributos, no lado esquerdo do ecrã. Quando a página for apresentada, aceda à extremidade direita e clique em Configurar termos. Esta opção permite adicionar novos autores. Pode continuar a adicionar os autores dos vários livros disponíveis no site.


Selecionar o Autor do Livro na Página do Produto:

Configuração do GST, IVA e Outros Impostos

Aceda ao painel de administração do WordPress. Clique em WooCommerce >> Definições >> Geral. Selecione a caixa «Ativar taxas de imposto e cálculos de impostos». Guarde as definições. O separador Impostos ficará então disponível no painel do WooCommerce.


Guarde as definições. O separador Impostos ficará então disponível no painel do WooCommerce. Aceda a WooCommerce >> Definições >> Impostos e configure as seguintes opções:
Preços introduzidos com imposto: selecione «Sim, vou introduzir os preços com impostos incluídos» ou «Não, vou introduzir os preços sem impostos». Para empresas que utilizam o GST, recomenda-se a segunda opção, uma vez que o GST é calculado sobre o preço base.
Calcular imposto com base em: selecione «Morada de envio do cliente».

Configuração das Taxas de Imposto

Clique em Taxas padrão. Além disso, crie classes de imposto para cada escalão de GST aplicável aos seus produtos. Para cada escalão, terá de criar duas entradas para operações dentro do mesmo estado e uma entrada para operações entre estados. Como se trata de uma loja de livros eletrónicos, existem duas taxas: 5% e 18%, além de uma taxa de 0% para livros físicos impressos.
Para a taxa padrão de GST de 5% (operações dentro do estado de Goa):
Nome do imposto: CGST
Taxa: 2,5
Código do estado: 30 (Goa)
Prioridade: 1
Adicionar outra linha:
Nome do imposto: SGST
Taxa: 2,5
Código do estado: 30 (Goa)
Prioridade: 2
Para o mesmo escalão de 5% de IGST:
Nome do imposto: IGST
Taxa: 5
Código do estado: deixar em branco (para todos os outros estados)
Prioridade: 1
Defina a «Classe de imposto» para cada produto. Para isso, selecione o escalão de GST correto na página de edição do produto. Também pode adicionar um código HSN utilizando um atributo personalizado ao nível do produto.



Pode instalar uma extensão de faturação em PDF, como PDF Invoices & Packing Slips for WooCommerce, e adicionar algum código para criar uma fatura semelhante à apresentada abaixo.
Não introduzi o logótipo da loja. Com algumas personalizações adicionais, também pode incluir o GSTIN do cliente e o código HSN de cada produto na fatura.



O IVA na União Europeia e em vários outros países pode ser configurado de forma semelhante.

Vídeo de Demonstração de uma Loja Online Desenvolvida com WordPress e WooCommerce e com Produtos Descarregáveis

   Por fim, apresentamos um vídeo que demonstra o funcionamento de uma loja de livros eletrónicos desenvolvida com WordPress e WooCommerce.

Sobre o Autor

Joseph de Souza é um conceituado consultor SEO freelancer e programador web em Goa, na Índia. Tem mais de 18 anos de experiência em SEO e marketing digital. Trabalha também, a tempo parcial, como consultor SEO para uma empresa alemã de viagens de mota, sediada em Chipre, há mais de 15 anos.
Tem experiência na gestão de SEO em alemão e inglês. Joseph tem um historial comprovado no aumento do tráfego dos sites e no apoio às empresas para aumentarem as suas receitas e os seus lucros. Também otimizou com sucesso um site de comércio eletrónico em língua dinamarquesa, alcançando resultados excelentes. Além do inglês e do alemão, tem experiência em SEO para sites em dinamarquês e português.