Como criar uma loja online fantástica com o WooCommerce, Divi e Bluehost (June 2019)

Mais de 74 milhões de sites dependem da plataforma WordPress para hospedar seus blogs, vender seus produtos ou apenas escrever suas reflexões diárias para o mundo ver. Quando você começa a construir o seu site de comércio eletrônico, você certamente tem muitas escolhas a fazer, e o WordPress se conecta a isso. Quais das principais plataformas de comércio eletrônico você escolherá? Você está pensando em pegar um tema para vender seus produtos ou há alguém que você pode pagar para construir o site a partir do zero? Heck, o que você planeja vender no seu site de comércio eletrônico? Há milhares de milhões de temas WordPress para escolher quando você olha para a estrutura frontend e backend para começar a vender online. Quase o mesmo com hospedagem (mas nós preferimos Bluehost).

Os melhores temas incluem ferramentas de gerenciamento de comércio eletrônico rápidas e fáceis para que você possa fazer upload de produtos e gerenciar itens como descontos, prêmios, botões e páginas de produtos. Seu tema também é a primeira coisa que as pessoas verão quando visitarem seu site. Ele os guia através do processo e realmente carrega a diferença entre alguém estar satisfeito com a experiência ou não.

Em suma, os temas do WordPress são cruciais, e os Divi O tema WordPress do Elegant Themes é uma opção bastante interessante para você considerar. Ele pode ser usado para um site de negócios padrão, mas também inclui integrações para venda de comércio eletrônico e processos de vendas rápidos. Vamos aprender como criar uma loja online com o tema Divi WordPress.

Obtenha seu domínio e hospedagem primeiro

O primeiro passo em qualquer processo de criação de sites é pegar uma conta de hospedagem, nome de domínio e instalar o WordPress no site. Divi não é diferente. Há muitas maneiras de obter nomes de domínio e hospedagem, mas eu pessoalmente acho que o Bluehost é uma das opções mais seguras e confiáveis ​​(para mais detalhes, confira Revisão Bluehost).

O que é realmente legal é que Bluehost oferece um plano de integração WordPress + WooCommerce que te dá tudo o que você precisa para começar a vender online.

Nós também recomendamos altamente o Plano SiteGround WooCommerce. Ele realmente fornece alguns recursos melhores que não vêm com Bluehost, e você pode obter algumas ofertas de assassino em todos os momentos. É mais uma solução de hospedagem gerenciada com o SiteGround.

Como você começou?

Vou ao Página Bluehost que fala sobre a integração, em seguida, clique no botão Get Started Now.

Tenha em mente que este serviço começa em $ 11.95 por mês e é muito semelhante a como você instalaria um site normal do WordPress em uma conta de hospedagem Bluehost.

A principal diferença é que WooCommerce já está instalado. Além disso, você recebe o seguinte:

  • Segurança positiva de comércio eletrônico SSL
  • Uma linha de suporte dedicada
  • Pelo menos 100 GB do espaço do site
  • Largura de banda não monitorada
  • Contas de e-mail 100
  • Domínios livres
  • Um IP dedicado

woocommerce_and_wordpress

Seguindo em frente, você pode escolher o plano que deseja pagar e passar para a próxima página.

choose_your_plan

Depois disso, você pode experimentar novos nomes de domínio para descobrir se o que você deseja ainda está disponível. Assim que você encontrar um nome de domínio disponível adequado à sua marca, vá para a próxima página.

Registro de domínio da BlueHost

Depois disso, digite todas as suas informações pessoais, detalhes de pagamento e escolha o tipo de plano de hospedagem anual ou mensal que você deseja usar. Fica mais barato quanto mais meses você se comprometer desde o início.

package_information

Normalmente, você pode simplesmente ignorar todo o complemento extra, a menos que esteja realmente interessado em fazer o backup do seu site ou pagar pela proteção da privacidade. Você geralmente não precisa disso ou pode obtê-lo gratuitamente mais tarde. Depois disso, você pode criar seus detalhes de login para sua conta Bluehost, que então leva você ao CPanel. Uma vez logado no CPanel, navegue até a área de construtores de sites, clique no WordPress e percorra o processo para obter o WordPress em seu site.

Construtores de sites BlueHost

Isso normalmente leva apenas cinco minutos, já que tudo é automatizado e você só precisa criar algumas credenciais de login para fazer login no back-end de seu site. Depois que tudo estiver configurado, ele fornecerá o nome de domínio apropriado para acessar se você quiser alterar as coisas no back-end de seu site.

Criando sua loja online com Divi

1 etapa

Comece por ir ao Página do produto Elegant Themes para o tema Divi WordPress. Esta página oferece a opção para uma demonstração de tema e um botão de download rápido. O Elegant Themes vende seus temas usando uma estrutura de pagamento anual ou única, o que é bom para desenvolvedores com vários sites de clientes ou pessoas que gerenciam vários sites de comércio eletrônico. Você não pode realmente comprar apenas um tema, mas o Plano Pessoal Por US $ 67 por ano é semelhante ao que você pode pagar por um tema regular, e você pode parar os pagamentos anuais se você não quiser mais o suporte. Sinta-se à vontade para brincar com o tema antes de se comprometer com o pagamento.

Tema Divi WordPress

2 etapa

Depois de se inscrever, clique no botão de download para o tema. Isso coloca o tema como um arquivo zip no seu computador. Vá para a guia Appearance no backend do seu site WordPress e clique na opção Themes.

Wordpress novo tema

3 etapa

Clique no botão Adicionar novo.

Wordpress adicionar novo tema

Clique no botão Upload Theme. Encontre e envie o arquivo zip do tema. Percorrer o processo para ativar completamente o tema e, em seguida, você deve ser capaz de ver o tema no frontend do seu site.

Upload do tema Wordpress

4 etapa

Se você for para o Página de documentação do tema Divi você encontrará praticamente todas as ferramentas e recursos que você pode trabalhar com o tema, mas vamos nos concentrar principalmente na criação de um site de comércio eletrônico. O tema Divi é totalmente compatível com o WooCommerce para que você possa exibir todos os seus produtos a partir dele.

O que é impressionante é que a inscrição inicial da Bluehost já instalou o WooCommerce no seu site WordPress, assim você não precisa se preocupar com a instalação ou configuração. Já deve estar disponível no seu painel.

5 etapa

Você tecnicamente já tem o site de comércio eletrônico configurado, mas queremos adicionar alguns produtos para parecer um site de comércio eletrônico no frontend. Vá para o seu painel do WordPress, clique na aba Produtos no WooCommerce e clique no item Adicionar Produto.

WooCommerce adicionar novo produto

6 etapa

Isso traz uma nova página de produtos para você preencher. Ele é muito semelhante a qualquer editor de páginas do WordPress, exceto que você pode adicionar um nome de produto, uma descrição e uma imagem em destaque para que as pessoas possam ver como o produto se parece em seu site.

Ecommerce adicionar novos campos de produto

7 etapa

Se você rolar abaixo da área de descrição, você encontrará todos os recursos possíveis do WooCommerce para brincar. Sinta-se à vontade para modificar itens como números de SKU, inventário, preços, frete e atributos. Os recursos são muito grandes para eu delinear todos eles aqui, mas você pode ir para o Página de documentação do WooCommerce para entender tudo o que você pode configurar no seu site de comércio eletrônico.

Recursos do WooCommerce

8 etapa

O ponto principal disso é crie uma página inicial ou uma página normal que apresenta todos os seus produtos quando as pessoas aparecem em seu site. Portanto, você deve ir para Páginas> Adicionar Novo no lado esquerdo do seu painel do WordPress.

Wordpress nova página

9 etapa

Crie um título para sua página. Clique no botão Use Page Builder na parte superior e toque na área Insert Modules para incluir um cabeçalho de largura total. Você não tem que escolher um cabeçalho de largura total, mas vamos para este tutorial.

Construtor de páginas wordpress

10 etapa

Clique no botão Full Width Header.

Adicione um cabeçalho

11 etapa

Preencha os detalhes para o seu Título do Site, Texto de subtítulo e Cor do texto. Você pode até alterar o rótulo do administrador, que é principalmente para sua própria referência. Aperte o botão Salvar quando terminar.

Personalização de cabeçalho

12 etapa

Toque nas três barras à esquerda do módulo de cabeçalho Full Width para alterar mais configurações.

Configuração de woocommerce do WordPress

13 etapa

Aqui você pode dar ao cabeçalho uma cor de fundo agradável e até mesmo incluir um vídeo para sua empresa.

Tweak estes botões ao redor

14 etapa

Agora que o cabeçalho está completo, podemos incluir o módulo de comércio eletrônico clicando na área Inserir Colunas.

Configuração de comércio eletrônico no Wordpress

15 etapa

Escolha quantas colunas você deseja e clique na opção Inserir Módulos que aparece. Selecione o botão Loja perto da parte inferior.

Configuração de comércio eletrônico no Wordpress

16 etapa

Sinta-se à vontade para modificar como deseja exibir seus produtos. Então você pode querer mostrar seus produtos recentes, juntamente com itens 12 na página, algumas colunas e como você quer que elas sejam ordenadas. Clique no botão Salvar.

Configuração de comércio eletrônico no Wordpress

17 etapa

Quando isso estiver concluído, você pode clicar no botão Visualizar ou Publicar para visualizar as alterações no frontend. Como você pode ver, os produtos são exibidos com perfeição e você sempre pode voltar para alterar suas configurações de produtos ou montras no back-end do WordPress. Parabéns!

Se você tiver alguma dúvida sobre a configuração do Tema Divi WordPress, informe-nos na seção de comentários abaixo.

Divi Classificação: 5.0 - Revisão por

Catalin Zorzini

Eu sou um blogueiro de web design e comecei este projeto depois de passar algumas semanas lutando para descobrir o que é a melhor plataforma de comércio eletrônico para mim. Confira minha corrente top 10 construtores de sites de comércio eletrônico.