Como criar um site de loja de comércio eletrônico on-line com o WordPress

O comércio eletrônico está em brasa porque torna incrivelmente fácil ganhar 6 dígitos por mês sem abrir um negócio de tijolo e argamassa com custos indiretos insanamente altos.


Mas o problema para muitos é o alto custo mensal da maioria das plataformas de comércio eletrônico, como o Shopify. Se você está apenas começando, deseja uma solução mais acessível para poder gastar mais em coisas como marketing e publicidade.

A boa notícia é que você não precisa pagar taxas mensais altas com o Shopify para poder vender produtos on-line. Se você está procurando uma alternativa do Shopify ou uma alternativa do eBay, este tutorial passo a passo vai deixar você com uma incrível loja online de graça.

Tudo o que você precisa é de uma conta de hospedagem na web e um pouco de esforço, e você poderá criar um site de comércio eletrônico rapidamente.


Vamos começar!

Coisas que você precisa:

  • Hospedagem. Eu recomendo SiteGround.
  • UMA nome do domínio.
  • Tema WordPress. Para este tutorial, usamos o Tema Astra gratuito.
  • WordPress Page Builder. Para isso, usamos o construtor de páginas gratuito Elementor.
  • WooCommerce, o melhor plugin WordPress para comércio eletrônico.

Etapa 1. Compre um nome de domínio e hospedagem na web.

Se você é novo em todo esse negócio de criação de sites, deixe-me esclarecer primeiro o que é hospedagem na web e nome de domínio e por que você precisa deles.

O que é um nome de domínio e hospedagem?

A hospedagem na web é um lugar na internet onde seu site irá morar. É como uma casa física onde suas coisas podem ser encontradas. O nome de domínio, por outro lado, é o endereço do seu site. É como o seu endereço que você fornece às pessoas para que elas possam visitá-lo em casa. “Facebook.com”, “Google.com” e “WordPress.com” são exemplos de nomes de domínio.

Você pode comprar um nome de domínio em praticamente todos os sites que vendem nomes de domínio. Você apenas tem que procurar o melhor preço. Mas, quanto à hospedagem de sites, é absolutamente importante obter hospedagem de apenas uma empresa confiável. Como se sua hospedagem for lenta ou não confiável, a velocidade e o tempo de atividade de seu site sofrerão e prejudicarão seus negócios de comércio eletrônico.

Siteground, Meu serviço de hospedagem preferido na web

Você pode usar qualquer serviço de hospedagem na web de alta qualidade para criar um site de comércio eletrônico, mas neste tutorial, usaremos o Siteground.

O SiteGround é um host on-line altamente recomendado porque atende a usuários do WordPress e ainda tem preços acessíveis. Eles são mais conhecidos por seu desempenho rápido e suporte igualmente rápido.

Aqui estão os principais recursos do SiteGround:

  • Certificado SSL grátis
  • Suporte qualificado RÁPIDO
  • Ambiente de preparo do WordPress
  • Migrações gratuitas de sites
  • 30 dias de backups

O SiteGround é uma escolha sólida para suas necessidades de hospedagem na web. Eles atendem a sites WordPress e oferecem menos recursos que seus concorrentes, mas maior confiabilidade.

Fiz um acordo incrível com eles para dar um desconto de 70% a quem se inscrever usando esse link. Então, se você quiser economizar dinheiro com sua hospedagem, clique neste link e compre sua hospedagem agora.

Depois de chegar à página inicial, você verá quatro tipos diferentes de hospedagem:

escolha um plano de siteground

Escolha hospedagem WordPress e clique em Iniciar. Você verá três planos de preços:

preços do alojamento sitio wordpress

Escolha um de acordo com suas necessidades e orçamento. Você também pode conferir comparação de cada plano de hospedagem para ter uma idéia melhor de qual plano é mais adequado às suas necessidades.

Depois de decidir sobre um plano, clique em Obter plano. Você será direcionado para uma página em que precisará escolher um domínio. Se você já comprou um nome de domínio, selecione “Eu já tenho um domínio”. Mas se você não tiver um, selecione “Registrar um novo domínio” para comprar um domínio dentro do Siteground.

escolha um domínio

Depois de ter um nome de domínio que você gosta e está disponível, clique em Continuar. A próxima etapa é fornecer seus dados pessoais e de cobrança para concluir a compra. Forneça seus detalhes com precisão e clique em Pague agora. Agora você tem uma hospedagem confiável e nome de domínio.

Passo dois. Instale o WordPress.

O WordPress é uma ferramenta gratuita e de código aberto que permite criar sites, mesmo que você não tenha idéia sobre a codificação. É o sistema de gerenciamento de conteúdo de sites mais fácil e poderoso até o momento. Há muitas coisas que eu amo no WordPress, e se você ler mais dos meus tutoriais ou assistir aos meus vídeos, descobrirá mais sobre por que eu acho que o WordPress é a melhor ferramenta para criar sites para não-técnicos.

O Siteground, na verdade, vem com uma instalação do WordPress com um clique que faz todo o trabalho duro de instalar e configurar o WordPress para você.

Depois de concluir sua compra de hospedagem, você verá uma tela com um link dizendo “Prossiga para a área do cliente”. Clique nele e você será direcionado para uma página onde poderá configurar sua nova conta de hospedagem. Debaixo Configure seu site, selecionar Iniciar um novo site.

Você verá uma lista de software que pode instalar. Selecione WordPress.

instalar o wordpress

Você precisará fornecer detalhes de login do administrador para seu novo site, como endereço de e-mail, nome de usuário e senha. Certifique-se de proteger esses detalhes, porque você os usará para fazer login no seu site.

Feito isso, clique em confirme > Configuração completa. E agora você tem um site WordPress ao vivo e auto-hospedado.

Para começar a personalizar seu site, é necessário fazer login no back-end do WordPress. Para fazer isso, acesse o painel do Siteground e alterne para o Minhas contas aba. Clique no Instalação guia, e aqui você verá o nome de domínio que você registrou. Do outro lado é um verde Vá para o Portal do administrador botão. Clique neste botão para ir para a sua página de login do WordPress.

vá para o painel de administração do wordpress

As páginas de login do WordPress geralmente têm estes formatos: seudominio.com/wp-admin e seudominio.com/wp-login. Lembre-se do URL da sua página de login, para que da próxima vez você possa acessá-lo, digitando-o diretamente na barra de endereço e sem precisar mais fazer login no Siteground.

A página de login do WordPress é assim:

página de login do wordpress

Digite seu nome de usuário e senha aqui para fazer login no seu site pela primeira vez.

Etapa 3. Instale o Tema Astra e os Sites Astra.

O Tema Astra é o tema que usaremos para obter nosso site de comércio eletrônico com ótima aparência e profissional o mais rápido possível. Você pode usar outros temas, se preferir, mas neste tutorial, usaremos o Tema Astra.

O Astra é um tema gratuito do WordPress, com excelente velocidade e simplicidade. Associe-o ao Astra Sites (plug-in gratuito) e qualquer um pode ter um site bonito com apenas alguns cliques do mouse. Há também uma versão Pro disponível que faz do Astra o tema perfeito.

Aqui estão os recursos que eu mais amo no Astra:

  • Um dos temas mais rápidos disponíveis
  • Mais de 100 sites iniciantes (a maioria é 100% gratuita)
  • Recurso flexível de mega menu
  • Poderoso pacote complementar
  • Suporte extensivo ao WooCommerce

O Tema Astra é uma excelente opção para qualquer projeto de web design do WordPress. Na verdade, é o tema que estou usando neste site e em todos os meus projetos..

Tenho total confiança no desenvolvedor e fiquei muito impressionado com a codificação do tema..

Mas, mais do que isso, o tema é muito simples de usar, devido a todo o cuidado e pensamento que foram nele. Na maioria das situações, ele se configura com base nas ferramentas que você está usando.

Para instalar o Astra, vá para Aparência > Tema > Adicionar novo. Procure o Astra, clique em Instalar, e Ativar.

instalando o tema astra

Outra coisa que eu amo o Astra é o fato de ele ter um plugin chamado Sites Iniciais Astra com uma biblioteca de modelos gratuitos e premium pré-criados. Você pode usar esses modelos para o seu próprio site em apenas alguns cliques. Usaremos um modelo de site da Astra para reduzir pela metade o tempo de criação do site.

Depois de instalar o Astra, você verá esta mensagem no seu painel:

Os sites Astra começam

Clique Iniciar. Isso instalará o Astra Starter Sites para você.

Escolhendo o Construtor de Páginas

Você será perguntado sobre qual criador de páginas você prefere e, neste tutorial, vou usar o Elementor. Elementor é um construtor de páginas do WordPress que levou o design da web do WordPress pela tempestade. Ele tinha o conjunto de recursos mais profundo, mas é muito fácil de usar e dominar. Elementor é o construtor de páginas grátis mais completo. Há também um complemento Pro para adicionar recursos adicionais ao desenvolvedor.

Principais recursos do Elementor:

  • Editor de página de front-end ao vivo
  • Recursos de personalização do site
  • Biblioteca de modelos e blocos
  • Extensivas opções de resposta móvel
  • Mais poderoso construtor de pop-ups
  • PRO: criar cabeçalhos / rodapés personalizados
  • PRO: Criar layouts de tipo de postagem

Elementor é o construtor de páginas mais forte atualmente disponível. Eles lançam constantemente novos recursos que estão alinhados com as tendências atuais de design. Isso significa que você poderá manter seu site relevante. Se, ao longo do caminho, você quiser acessar recursos avançados, poderá atualizar para o Elementor Pro, o que eu acho um valor incrível, considerando todos os módulos adicionais e recursos de energia que ele inclui.

Escolhendo o tema do seu site Astra

Depois de escolher o criador da página, você será levado à biblioteca de modelos do Astra Sites. Há vários modelos bonitos que você pode usar. Não tenha pressa em escolher o modelo que deseja. E observe que esses modelos são totalmente editáveis ​​com o construtor de páginas que você selecionou, o que significa que você poderá personalizar todas as partes e elementos do site, como cabeçalho, imagens, cores, logotipo etc..

Neste tutorial, vou usar o modelo de Impressão personalizada, porque ele é incrível e muito orientado para o comércio eletrônico.

Para instalar um tema, basta clicar nele para ser levado à visualização. Se você gosta do que vê, clique no ícone Tema de importação botão e verifique se as caixas estão todas marcadas.

Se você perceber, há uma caixa que diz “Instalar plug-ins necessários”. Marcar esta caixa instalará todos os plugins necessários para que o tema fique exatamente do jeito que está. Para o tema Impressão personalizada, ele instalará Elementor, WooCommerce e WPForms. Isso economiza muito tempo, porque não preciso mais instalar esses plug-ins um por um. Tudo foi feito por mim.

importando tema do site astra

A importação do tema pode demorar um pouco. Não feche o navegador nem pressione a atualização. Espere, e quando estiver pronto, você verá um azul Exibir site botão. Clique nesse botão para ser direcionado ao seu site que agora possui o tema que você acabou de importar.

Etapa 4. Personalize seu site.

Seu site agora parece impressionante, mas você deseja torná-lo seu. A primeira coisa que você quer fazer é escolher sua paleta de cores. Se você já tem a cor da sua marca, isso será mais fácil.

Escolhendo uma paleta de cores

Um site normalmente possui um conjunto de três cores: a principal, a acentuação e a pop. A cor principal é a cor dominante do seu site e provavelmente a cor da sua marca. A cor de destaque é usada normalmente nos cabeçalhos ou nos títulos dos posts, se você quiser que eles pareçam um pouco diferentes para atrair os olhos para eles. Por fim, a cor pop deve contrastar com o restante das cores para destacar elementos importantes do site, como botões de apelo à ação.

Para escolher uma paleta de cores do site, eu uso duas ferramentas. O primeiro é Coolors.co onde você pode navegar por diferentes paletas de cores e escolher o que deseja usar no seu site.

página inicial

Se vir uma paleta que você gosta, passe o mouse sobre ela, clique em Visão, e você será levado para uma nova janela, onde verá os códigos hexadecimais de cada cor.

paleta de cores com código hexadecimal

Esses códigos Hex são o que você precisa para usar essas cores em seu site. Mais tarde, vou mostrar como usar esses códigos Hex no back-end do WordPress.

Outra ferramenta interessante é o Colorzilla, uma extensão do Google Chrome que permite obter o código Hex de qualquer cor que você vê em qualquer site, para que você possa usá-lo por conta própria. Se você deseja obter a extensão Colorzilla, Clique aqui. Então clique Adicionar ao Chrome.

colorzilla

Pode demorar um pouco, mas quando terminar, você verá este ícone na barra de ferramentas:

ícone colorzilla

Portanto, agora, se você vir uma cor em qualquer site que deseja tentar usar em seu próprio site, basta clicar neste ícone e clicar na cor que deseja copiar. O código hexadecimal será copiado automaticamente e você poderá colar no backend do seu site. É tão fácil. Esta é uma ferramenta útil que permitirá que você use ótimas cores em um clique.

Personalizando tipografia

Você também deseja usar sua própria tipografia para destacar seu site. Os sites normalmente têm de 2 a 3 fontes. Você terá uma fonte para títulos ou menu, uma fonte para o corpo e uma “fonte pop” extra. Como as cores, você não pode usar qualquer fonte. Você precisa garantir que eles fiquem bem juntos e enviar a mensagem certa sobre sua marca.

Eu gosto de usar Fontpair.co que é um site que mostra como duas fontes diferentes se parecem.

usando fontpairs.co

Se você vir algo de que gosta, observe o que é chamado para acessar o WordPress e adicioná-lo diretamente lá.

Também gosto de usar o WhatFont, uma extensão do Google Chrome que informa qual fonte é usada em qualquer site. Para instalar o WhatFont, Clique aqui então clique Adicionar ao Chrome. Então você verá este ícone na sua barra de ferramentas:

ícone whatfont

Se você quiser saber o nome de uma fonte, basta clicar neste ícone e passar o mouse sobre o texto. O WhatFont informará o nome dessa fonte e, se você clicar nela, também verá o tamanho, a cor, a família, o estilo, o peso e muito mais.

usando whatfont

Obtendo um logotipo

Você também precisa de um logotipo de marca para diferenciar seu site e estabelecer sua identidade de marca. Existem várias maneiras de obter um logotipo. Você pode tentar fazer isso sozinho usando uma incrível ferramenta de design chamada Canva. É bastante popular, pois facilita muito o design, mesmo para iniciantes.

O Canva vem com muitos modelos de logotipo que você pode modificar para criar o seu próprio. Observe, no entanto, que se você deseja exportar o logotipo com um plano de fundo transparente, precisará fazer o upgrade para o Pro (que possui uma avaliação gratuita de um mês). Você sempre pode ir no Photoshop ou Photopea para remover o plano de fundo, mas isso apenas adiciona uma etapa extra ao processo.

logotipos do canva

Se você quiser economizar tempo, pode contratar um designer de logotipo freelancer para fazer isso por você. Você pode experimentar sites como Fiverr.com ou 99design, mas precisa ter cuidado ao escolher um artista com base em seu estilo, histórico, críticas, avaliações e muito mais..

Personalizando seu site

Agora é hora de usar essas cores, fontes e logotipos no seu site. Se você estiver no painel de back-end do WordPress, acesse Aparência > Customizar para abrir o personalizador de temas.

personalizar tema

Se você estiver no front-end do seu site e houver uma barra preta na parte superior, clique em Customizar para abrir o personalizador.

personalizar tema

É assim que o personalizador de temas se parece:

personalizador de tema

Aqui, você pode fazer o upload do seu logotipo, alterar as cores e a tipografia do site, personalizar botões e muito mais. As alterações feitas aqui são mostradas em tempo real no seu site, para que você possa ver imediatamente como ele é. Além disso, cada tema tem opções de personalização diferentes; portanto, se você estiver usando outro tema que não seja o Astra, poderá ver opções diferentes aqui.

No Astra, para alterar as cores do site, vá para Cores e fundo. Você terá a opção de alterar cores de base, trilhas de navegação, cabeçalho e barra de rodapé.

editor de plano de fundo colorido

As cores base são o tema, o link, o texto e a cor do cursor do site. Se você deseja alterar, por exemplo, a cor do tema, clique em Selecione a cor. Você verá duas maneiras de selecionar uma cor. Primeiro, você pode colar um código Hex em uma caixa. Portanto, se você encontrou uma cor em Coolors.co ou em qualquer outro lugar, pode colar o código Hex aqui. Você também pode selecionar uma cor em uma ferramenta de seleção interna.

editor de cores base

Para alterar a tipografia do site, volte ao menu principal do personalizador e clique em Tipografia. Você poderá alterar a base, a trilha de navegação, o conteúdo e a tipografia do blog.

personalizador de tipografia

Em seguida é adicionar seu logotipo. Para fazer upload do seu logotipo, vá para Layout > Cabeçalho > Identidade do site. Na seção Logo, clique no ícone Alterar logotipo botão e faça o upload do seu logotipo.

carregar logo

O Astra também permite ajustar a largura do seu logotipo para que você possa alterar o tamanho que você deseja que apareça. Se você rolar para baixo, também poderá alterar o título do site, adicionar um slogan do site e um ícone ou favicon do site.

Você pode fazer muito mais na área de personalização do Astra, como alterar a largura do conteúdo do site, alterar a estrutura de postagem do blog, personalizar seu rodapé e cabeçalho e muito mais. Explore suas opções aqui para ver o que você mais gosta no seu site.

Depois de concluir a personalização, não se esqueça de clicar em Publicar para que suas alterações sejam ativadas no seu site.

Etapa 5. Personalizando seu site com Elementor.

Neste ponto, você tem os conceitos básicos de personalização, como alterar a cor do site, tipografia, adicionar um logotipo e tudo mais. Agora é hora de detalhar os detalhes e começar a usar o Elementor (ou qualquer construtor de páginas que você preferir) para alterar completamente a aparência do site..

Como mencionei antes, vou usar o Elementor neste tutorial porque simplesmente acho que é o melhor, mas você pode usar qualquer construtor de páginas com o qual se sinta confortável.

Dentro da Elementor, você pode fazer praticamente qualquer coisa com seu site sem codificar ou contratar um desenvolvedor web. Adicionar elementos é um processo simples de arrastar e soltar.

Existem duas maneiras de editar uma página com Elementor. Primeiro, se você estiver no back-end do WordPress, clique em Páginas e você deverá ver uma lista de todas as páginas do seu site, incluindo aquelas que foram criadas automaticamente com o modelo de site da Astra. As páginas criadas com um construtor de páginas específico (por exemplo, Elementor) serão rotuladas da seguinte forma:

Páginas

Para editar uma página com o construtor de páginas, passe o mouse sobre ela e clique em Editar com (construtor de páginas). No meu caso, será Editar com Elementor.

editar com elementor

Depois de clicar nele, você será levado para dentro da Elementor.

Outra maneira é se você estiver no frontend do seu site, vá para a página que deseja editar e clique em Editar com elementor na barra preta na parte superior:

editar com elementor

Qualquer um deles o levará para dentro da Elementor. Uma vez dentro da Elementor, você poderá usar imagens diferentes para o seu título, alterar textos, alterar ícones e muito mais. Você pode começar alterando os textos e a imagem no cabeçalho para se adequar ao seu negócio. Aqui estão algumas coisas que você pode fazer com os textos dentro do Elementor:

editando textos em elementor

Como você pode ver, você pode alterar o texto diretamente na área de edição de conteúdo, alterar o tamanho, peso, cor e família de tipografia. Você também pode adicionar animações como desbotamento simples, zoom e muito mais. Há várias coisas que você pode fazer aqui para adicionar tempero ao seu site.

Você também deseja alterar as imagens do seu site para corresponder à natureza da sua empresa. Alterar as imagens no Elementor é muito fácil de fazer. Basta clicar na imagem e as opções aparecerão na barra lateral esquerda. Você pode fazer upload de uma nova imagem, alterar seu tamanho, adicionar uma borda ou sombra, adicionar uma animação e muito mais.

editando imagens no elementor

Dentro do Elementor, você também pode alterar os textos dos botões, personalizar a área de depoimentos, adicionar mais elementos / blocos como textos, imagens, botões, vídeos e muito mais.

O Elementor Pro vem com muito mais recursos, como a capacidade de adicionar formulários (que geralmente requer um plug-in de terceiros), a capacidade de fazer upload de suas próprias fontes, adicionar controles deslizantes, adicionar tabelas de preços e listas de preços, personalizar cabeçalhos e rodapés ( fora dos limites para a maioria dos criadores de páginas) e muito mais.

Se você deseja comprar o Elementor Pro e, ao mesmo tempo, obter acesso gratuito aos meus cursos do Elementor Pro, clique neste link aqui.

Etapa 5. Configure o WooCommerce.

Agora é hora de configurar o WooCommerce, o plug-in do WordPress que transforma qualquer site em uma loja online. Permite adicionar produtos, aceitar pagamentos on-line, criar cupons, definir remessas e impostos e muito mais.

O WooCommerce já foi instalado para mim pelo tema Custom Print Astra Site, então agora tenho que entrar e configurá-lo. Se você ainda não possui o WooCommerce instalado, acesse Plugins > Adicionar novo e procure por WooCommerce.

A primeira coisa que precisamos fazer é ir para WooCommerce > Definições. Você verá 7 guias: Geral, Produtos, Remessa, Pagamentos, Contas e privacidade, Emails e Avançado.

Vamos primeiro dar uma olhada no Geral aba. Nesta guia, você poderá definir o endereço da sua loja, em quais países você venderá e enviará e ativar as taxas de impostos.

configurações gerais de woocommerce

Se você rolar para baixo, também verá opções para ativar cupons e personalizar como os preços são exibidos em seu site, incluindo a moeda, onde será exibido etc..

Em seguida é o Produtos guia onde você pode definir opções relacionadas ao produto. Você pode definir qual página será sua página da loja, o que acontece quando os visitantes adicionam um produto ao carrinho, definir dimensões do produto, ativar e configurar avaliações de clientes e classificações por estrelas.

configurações do produto woocommerce

Na parte superior desta seção, você também tem opções para Inventário e Produtos para download. Na seção Inventário, se você marcar a caixa ao lado Ativar gerenciamento de estoque, você verá uma lista de opções que ajudarão você a gerenciar seu inventário. Por exemplo, você pode definir o limite baixo de estoque para que, quando seu estoque atingir esse número, você receberá uma notificação. Você também pode ocultar itens de estoque do seu site.

configurações de inventário woocommerce

Quanto ao Produtos para download seção, isso é relevante apenas se você estiver vendendo conteúdo para download em seu website; portanto, se você estiver vendendo produtos puramente físicos, poderá pular este. Você terá a opção de exigir que os compradores efetuem login antes de poder fazer o download de seus produtos. Você também pode dar acesso a downloads após o pagamento.

opções de produtos para download

A próxima guia é Remessa. Isso é relevante apenas se você estiver vendendo produtos físicos que serão enviados aos compradores. Dentro desta guia há três subseções: Zonas de expedição, Opções de expedição e Classes de expedição.

Nas zonas de envio, você precisará adicionar zonas de envio e atribuir métodos de envio disponíveis a essas zonas. Isso levará um tempo se você estiver enviando para vários países.

zonas de expedição

Se precisar de mais ajuda com as zonas de entrega, consulte a zona de entrega do WooCommerce. documentação.

Em seguida é o Opções de envio seção. Nesta seção, você pode controlar como as taxas de remessa são exibidas no seu site e definir um destino de remessa padrão ou obrigatório..

opções de envio

A última seção em Remessa é Classes de expedição. Com as classes de remessa, você pode atribuir diferentes taxas de remessa a um grupo de produtos, por exemplo, produtos mais pesados ​​que precisam de mais postagem.

aulas de remessa

Para definir suas taxas de envio, vá para Zonas de expedição e crie ou edite um método de envio existente como “Taxa fixa”.

adicione um custo de envio

Depois de clicar Editar, uma janela pop-up aparecerá. Aqui, você poderá adicionar a taxa fixa de frete e o custo adicional para a classe de frete que você acabou de criar.

custo de remessa de uma classe de remessa

Se precisar de mais ajuda para definir suas configurações de envio, consulte o WooCommerce documentação para remessa.

Agora vamos para Pagamentos. Nesta guia, você poderá habilitar ou desabilitar gateways de pagamento como PayPal, transferência bancária direta, dinheiro na entrega e muito mais. Depois de ativar um método, clique em Configuração para vincular suas contas e começar a aceitar pagamentos.

Métodos de Pagamento

Se você deseja aceitar pagamentos do Stripe, pode instalar um plug-in chamado Gateway de pagamento WooCommerce Stripe. Basta ir para Plugins > Adicionar novo e procure o plugin. A instalação e a ativação deste plug-in habilitarão o método de pagamento Stripe no WooCommerce, mas você precisará acessar WooCommerce > Definições > Pagamentos para configurá-lo.

No Contas e Privacidade Na guia, você poderá definir configurações relacionadas à criação da conta e à privacidade do usuário. Você pode permitir que os convidados comprem sem criar uma conta, definir sua página de privacidade e páginas de política e escolher por quanto tempo os dados do usuário serão retidos..

contas e privacidade

Em seguida é o Emails guia onde você verá uma lista de e-mails que o WooCommerce envia automaticamente com base em determinadas condições. Por exemplo, um email pode ser enviado para um endereço de email de sua escolha sempre que um novo pedido for feito. Você também pode ver e-mails com atualizações sobre os pedidos dos clientes, como pedidos reembolsados ​​ou concluídos.

notificações por email

finalmente, o Avançado A guia, que substituiu a guia API, permite configurar mais detalhes técnicos, como configurações de página, onde você pode informar ao WooCommerce qual página atuará como sua página de carrinho ou página de checkout.

configuração da página woocommerce

Se você rolar para baixo, poderá modificar o que o WooCommerce chama de pontos finais, anexos ao URL que permite exibir conteúdo diferente sem a necessidade de uma nova página.

Etapa 6. Adicionar produtos.

Depois de concluir as configurações básicas do WooCommerce, é hora de adicionar produtos. O tema do site Astra que usamos neste tutorial já vem com produtos de amostra, e é assim que uma página de produto se parece no frontend:

página do produto

Vamos agora ver como podemos mudar isso e adicionar nossos próprios produtos no back-end.

Para adicionar um novo produto ou editar um produto existente, basta clicar na opção de menu Produtos na barra lateral esquerda no painel do WordPress. Você verá uma lista de todos os produtos que possui. Como alternativa, se você está no frontend de uma página de produto, pode clicar em Editar produto na barra preta na parte superior da página. Isso levará você diretamente ao editor do produto.

editor de produtos

É aqui que você pode alterar o título e a descrição do produto. Se você rolar para baixo, verá uma seção chamada Informações do produto. É aqui que você passa a maior parte do tempo. Aqui, você pode selecionar o tipo do produto e, a partir daí, definir outras configurações do produto..

O WooCommerce permite adicionar estes tipos de produtos:

  • Físico, disponível para download, virtual. Um produto virtual não precisa necessariamente ser baixado. Um exemplo é um compromisso ou uma sessão de treinamento individual.
  • Produto simples. Este é um produto de item único.
  • Produto agrupado. Este é um pacote de produtos diferentes.
  • Produto externo. Produtos comprados fora do seu site como um link de afiliado.
  • Produto variável. Um produto variável tem variações como cores e tamanhos.
tipos de produtos

Sempre que você cria um novo produto, o primeiro passo é escolher seu tipo. Cada tipo vem com um conjunto diferente de opções. Por exemplo, um produto para download terá estas opções:

opções de produtos para download

No lado esquerdo desta seção, você verá mais opções de inventário, envio, produtos vinculados e muito mais.

No Inventário, você poderá adicionar o SKU, fornecer um número específico de estoques para esse produto específico, definir o status do estoque e muito mais.

No Remessa, você pode especificar o peso e as dimensões do produto, bem como atribuir uma classe de remessa que criamos na etapa anterior.

envio em dados do produto

No Produtos Associados, você pode atribuir um item de upsell e venda cruzada a um produto. Um upsell é um produto que você recomenda, em vez do produto atual, porque tem um preço mais alto. Vendas cruzadas são produtos que você recomendará no carrinho com base no produto atual. Se você deseja adicionar um upsell ou venda cruzada, digite o nome do produto nas caixas correspondentes.

produtos vinculados

Você também pode adicionar atributos aos seus produtos no diretório Atributos seção. Pode ser tamanho, cor, peso etc. Além disso, se você estiver criando um produto variável, precisará adicionar um atributo aqui primeiro. Se você quiser saber mais sobre como criar um produto variável, confira Guia do WooCommerce aqui.

Se você rolar para baixo o Informações do produto Na caixa, você verá uma área na qual poderá adicionar uma breve descrição do produto. Essa descrição será exibida ao lado do seu produto e próximo ao preço. Mantê-lo curto e doce. Você pode adicionar uma imagem do produto no lado direito. Se você tiver mais imagens do produto, poderá adicioná-las no Galeria de produtos seção.

breve descrição e imagem do produto

Também é importante definir a visibilidade do catálogo, que pode ser encontrada na parte superior da página, em Publicar. Em alguns casos, convém ocultar determinados produtos porque talvez você esteja oferecendo uma venda cruzada com um preço com desconto exclusivo. É aqui que você pode fazer isso.

visibilidade do catálogo

Depois de concluir tudo aqui, clique em Atualizar para salvar todas as suas alterações.

Se você quiser saber mais sobre os diferentes tipos de produtos e como criá-los adequadamente, isso Guia do WooCommerce é um ótimo lugar para começar. Continue adicionando mais produtos ao seu site com as mesmas etapas que eu mostrei aqui até você criar suas listagens de produtos.

Etapa 7. Personalize seus checkout.

O WooCommerce é um ótimo plugin, como você já viu até agora, mas uma queixa comum é a falta de opções de pagamento. Você não poderá alterar a aparência das páginas de checkout e não poderá criar um funil de vendas. Um funil de vendas é uma ótima maneira de aumentar o valor de compra de um cliente. Portanto, se você não o possui em seu site, está realmente deixando dinheiro em cima da mesa.

Se você deseja criar um funil de vendas para o site de comércio eletrônico, o melhor plug-in que pode ajudar é o CartFlows. É um plug-in do WordPress para criação de funis que permite criar funis bonitos e altamente eficazes dentro do WordPress.

cartflows

Se você quiser saber mais sobre como criar um funil de vendas com o CartFlows, confira este tutorial que criei.

Etapa 8. Fique por dentro do abandono do carrinho.

Antes de encerrar este tutorial, deixe-me adicionar mais uma coisa sobre o abandono do carrinho. É fato no comércio eletrônico que muitos clientes abandonam seus carrinhos sem concluir a compra.

Isso pode ser devido a várias razões. Eles podem ter se distraído, o poder ou a conexão desapareceu, algo urgente surgiu. Seja o que for, muitos desses carros abandonados perdem vendas se você não fizer nada a respeito.

Felizmente, existe um plugin chamado Recuperação de abandono de carrinho WooCommerce plugin que acompanha e envia automaticamente emails de acompanhamento para clientes com carrinhos abandonados – tudo de graça!

Se você usasse o tema do site Astra que usei aqui, este plugin já teria sido instalado para você. Mas se não, você pode instalá-lo acessando Plugins > Adicionar novo e procure o plugin.

Ele criará uma nova opção no WooCommerce chamada Abandono de carrinho. Se você clicar nele, poderá ver uma visão geral de quantos carros abandonados você tem, quantos foram recuperados e quantos estão perdidos.

abandono de carrinho de ordens recuperáveis

Você também poderá personalizar os e-mails de acompanhamento que o WooCommerce envia mudando para o E-mails de acompanhamento guia, passando o mouse sobre o email que você deseja editar e clicando em Editar.

e-mails de acompanhamento

Você será levado ao editor de email:

personalizando e-mails de acompanhamento

Empacotando

Criar um site WordPress de comércio eletrônico pode parecer complicado e esmagador, mas espero esclarecer isso e mostrar como você pode fazer tudo sozinho com uma pequena ajuda. Estou empolgado em ouvir suas histórias de sucesso e, se precisar de ajuda, entre em contato comigo na seção de comentários abaixo.

SiteGround

O SiteGround é um host on-line altamente recomendado porque atende a usuários do WordPress e ainda tem preços acessíveis. Eles são mais conhecidos por seu desempenho rápido e suporte igualmente rápido.

Principais recursos do SiteGround:

  • Certificado SSL grátis
  • Suporte qualificado RÁPIDO
  • Ambiente de preparo do WordPress
  • Migrações gratuitas de sites
  • Backups diários

O SiteGround é uma escolha sólida para suas necessidades de hospedagem na web. Eles atendem a sites WordPress e oferecem menos recursos que seus concorrentes, mas maior confiabilidade.

Confira o SiteGround

Astra Theme

O Astra é um tema gratuito do WordPress focado na velocidade. Opcionalmente, você pode comprar a versão Pro por US $ 59, o que adiciona algumas configurações e opções adicionais.

Principais recursos do tema Astra:

  • Não é o tema Fastes, mas não é desleixo
  • Muitos sites de demonstração gratuitos
  • Característica flexível do Mega Menu
  • Opções de layouts personalizados
  • Suporte para WooCommerce
  • Suporte para LearnDash

O Tema Astra é uma escolha justa para qualquer projeto de web design do WordPress. Suponho que a maior questão é se você precisa comprar um tema hoje em dia, já que os criadores de páginas estão fazendo as mesmas coisas para as quais você precisaria. Por exemplo, o Elementor tem o tema Hello gratuito que permite que o construtor de páginas faça todo o trabalho.

Ainda existem algumas boas razões para comprar um tema profissional, mas para a maioria das pessoas, elas provavelmente ficarão bem com um tema gratuito.

Para mim, porém, acho que o Astra Theme não acompanhou as tendências atuais e não o recomendo mais..

Existem temas modernos muito melhores disponíveis que oferecem construtores de cabeçalho e rodapé embutidos em comparação com 3 layouts, além de layouts de página e postagem mais flexíveis.

Confira o Tema Astra

Elementor

Elementor é um construtor de páginas do WordPress que levou o design da web do WordPress pela tempestade. Possui o conjunto de recursos mais profundo, mas é muito fácil de usar e dominar. Elementor é o construtor de páginas grátis mais completo. Há também um complemento Pro para adicionar recursos adicionais ao desenvolvedor.

Principais recursos do Elementor:

  • Editor de página de front-end ao vivo
  • Recursos de personalização do site
  • Biblioteca de modelos e blocos
  • Extensivas opções de resposta móvel
  • O mais poderoso construtor de pop-ups
  • PRO Criar cabeçalhos / rodapés personalizados
  • PRO Criar layouts de tipo de postagem

Elementor é o construtor de páginas mais forte atualmente disponível. Eles lançam constantemente novos recursos que estão alinhados com as tendências atuais de design. Isso significa que você poderá manter seu site relevante.

O Elementor Pro é um valor incrível, considerando todos os módulos adicionais e recursos de energia que ele inclui.

Se eu estivesse iniciando um novo projeto de site hoje, a Elementor seria o construtor de páginas que eu escolheria. Considero que é necessário ter um construtor de páginas WordPress que seja um prazer usar.

Elemento de check-out

CartFlows

CartFlows é um construtor de funil de vendas para WordPress. Ele permite que você crie funis de vendas com rapidez e facilidade usando o criador de páginas de sua escolha.

Características principais dos fluxos

  • Modelos projetados profissionalmente
  • 5 Localização da ordem
  • Upsells com um clique
  • Use seu construtor de páginas preferido
  • Extensível ao contrário dos funis de clique
  • Temporizadores de contagem regressiva e testes de divisão

Se você deseja um construtor de funil de vendas para o WordPress e não se preocupa em se hospedar ou usar a hospedagem gerenciada do WordPress, o CartFlows é uma ótima opção, pois é super fácil de usar e muito poderoso.

Ver carrinho de compras

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map