Como criar uma loja on-line fantástica com WooCommerce, Divi e SiteGround (novembro 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çar a construir sua site de comércio eletrônico você certamente tem muitas escolhas a fazer, e o WordPress se conecta a isso.

Qual dos destaques plataformas de comércio eletrônico você vai 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? O que você planeja vender no seu site de comércio eletrônico?

Nota do editor: Esta postagem foi originalmente publicada em janeiro 15, 2015 e foi completamente renovada e atualizada para precisão e abrangência.

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 SiteGround or 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 Tema WordPress de Elegant Themes é uma boa opção 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 SiteGround é uma das opções mais seguras e confiáveis. (Para mais detalhes confira nossa abrangente Revisão de SiteGround).

O que é realmente legal é que a SiteGround oferece um serviço especializado gerenciado hospedagem WooCommerce pacote de serviços com praticamente tudo que você precisa para começar a vender online. Dentro do pacote, você pode se contentar com o Plano de inicialização para iniciantes, Plano GrowBig para empresas em crescimento, ou GoGeek para lojas estabelecidas WooCommerce.

Cada um deles oferece recursos avançados para otimizar seu site WooCommerce a um preço razoável.

Dito isso, outro serviço de hospedagem altamente recomendável para as lojas Divi WooCommerce é BlueHost. Embora os recursos aqui não correspondam ao SiteGround, você ainda recebe hospedagem focada no WooCommerce através do seu pacote de comércio eletrônico WordPress. Os planos podem lidar confortavelmente com uma loja Divi WooCommerce, mas, infelizmente, você não terá serviços gerenciados.

👉 Agora, por uma questão de clareza, vamos prosseguir com o SiteGround…

Como você começou?

Vou ao SiteGround Gerenciado Hospedagem WooCommerce página, selecione um plano ideal e clique em Obter plano

Na minha opinião, o Plano GoGeek Parece ser a opção mais adequada, uma vez que suporta sites ilimitados WooCommerce com recursos avançados de comércio eletrônico. Além de mais poder de servidor, você obtém suporte prioritário, preparação WordPress, backup sob demanda e recursos super chacher, além de transferências de site gratuitas e Cloudflare CDN, entre outros recursos sólidos.

👉 E no que diz respeito a subsídios de recursos, este plano acomoda:

  • Caixa de correio 6GB
  • Armazenamento de banco de dados 1 GB
  • Armazenamento SSD
  • Transferência de dados sem medidor
  • Espaço de armazenamento 30GB
  • Até visitas mensais 100,000

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

Mas lembre-se, esse é um preço especial para iniciantes. Espera-se que aumente para US $ 34.95 em renovações futuras, o que ainda é uma taxa razoável se considerarmos todos os recursos que você obtém no longo prazo.

Agora, depois de selecionar seu plano preferido, SiteGround direcionará você para sua página de registro de domínio. Se você já possui um domínio, escolha a segunda opção e insira seus detalhes. Caso contrário, continue com o novo registro de nome de domínio em $ 15.95 por ano.

A próxima etapa é a etapa final, em que você escolhe suas opções de hospedagem preferidas, além de inserir suas informações de pagamento e detalhes pessoais antes de criar a conta.

Bem, é claro, essas são coisas básicas que você já lidou muitas vezes antes. Portanto, você não deve ter dificuldades em inserir seu número de telefone, país, nome, e-mail, senha da conta, etc.

A parte do pagamento exige que você insira os detalhes do seu cartão de crédito. Você pode continuar com Discover, MasterCard or Visa

No entanto, e bastante interessante, SiteGround não lista o PayPal, apesar de sua crescente popularidade entre os comerciantes do WooCommerce. Mas, felizmente, eles podem aceitar pagamentos do PayPal, embora indiretamente.

Se este é o seu modo preferido, portanto, deixe os campos em branco e entre em contato com os agentes de vendas da SiteGround através da ferramenta de bate-papo ao vivo. Eles ajudarão você a concluir o processo por meio do PayPal.

A última seção contém várias opções para o seu serviço de hospedagem, incluindo sua localização preferida do data center, além do período de assinatura.

Agora, para minimizar a distância de transferência de dados entre os servidores do Siteground e os visitantes do seu site WooCommerce, escolha o local do data center mais próximo da sua área de mercado-alvo.

Em seguida, escolha qualquer serviço adicional extra que você gostaria de incluir em seu pacote, e voila! É tudo o que é preciso para criar uma conta no Siteground.

Quando terminar, faça o login em sua conta e vá direto para a área do cPanel. Você encontrará um instalador automático padrão do WordPress. Então, selecione-o, insira seus detalhes de login no WordPress e aperte o botão de instalação.

Bem, você notará que o processo de instalação do WordPress leva alguns segundos, já que tudo é automatizado. E depois que tudo estiver configurado, o SiteGround lhe dará o nome de domínio apropriado para acessar se você quiser alterar as coisas no back-end do seu site.

Criando sua loja online com Divi

O que é Divi?

Ok, se você ainda não experimentou, aposto que já ouviu falar sobre isso. Divi não é um tema comum do WooCommerce. É, na verdade, um dos temas mais populares do WordPress no Elegant Themes. E, curiosamente, Divi é Tema eleganteO principal produto da empresa.

Então, o que há de tão especial sobre esse tema? E há algo de excepcional no WooCommerce da Divi?

Bem, ao contrário de temas típicos do WordPress, o Divi é mais um pacote abrangente. Isso significa que combina recursos de tema padrão com funcionalidades extras que são úteis para as lojas Divi WooCommerce.

o que é divi

Não me entenda mal embora. Embora o suporte do WooCommerce da Divi seja o foco principal aqui, o tema é capaz de muito mais do que isso. Em essência, o Divi pode ser perfeitamente integrado a qualquer tipo de site, graças à sua ampla gama de layouts de sites. Não apenas comércio eletrônico.

Então, ainda por cima, Divi vem com seu próprio plugin intuitivo do construtor de páginas do WordPress. Você pode usá-lo para personalizar livremente sua loja Divi WooCommerce sem qualquer tipo de codificação.

Na verdade, o Divi foi desenvolvido para iniciantes. Assim, você pode esperar encontrar um painel de controle limpo com quase nenhuma curva de aprendizado. Leva apenas alguns minutos para entender todo o ecossistema Divi, configurá-lo e personalizar os layouts WooCommerce da Divi.

👉 No final, portanto, você será capaz de capitalizar Divi's:

  • Matriz de layouts personalizáveis ​​para qualquer tipo de site WordPress, incluindo lojas on-line WooCommerce.
  • Construtor de páginas fácil de usar, que fornece uma série de elementos de website e recursos de design.
  • Processo de personalização flexível sem qualquer forma de codificação. Até os novatos podem configurar confortavelmente e ajustar as lojas Divi WooCommerce totalmente funcionais.
  • Integração simples do WordPress. Divi é um dos poucos temas externos do WordPress que podem ser instalados sem problemas sem ajustes complexos.
  • Modelos WooCommerce otimizados para comércio eletrônico.

Construtor de Páginas Divi Drag and Drop

Como dissemos, o Divi vem em dois sabores variados. Quando você paga pela associação Temas elegantes, você encontrará o Tema Divi padrão no painel, acompanhado pelo plug-in Divi WordPress Page Builder.

Mas, vale a pena notar que este construtor não está exclusivamente ligado ao Tema Divi. Ele vem como um plugin adicional para cada tema adquirido do Elegant Themes.

Dito isso, o Divi WordPress Page Builder é um editor de arrastar e soltar com recursos de personalização avançados. Ele permite que você mova e defina elementos, colunas, linhas e módulos sem qualquer experiência de codificação. Em outras palavras, é o tipo de construtor de um Divi WooCommerce iniciante esperaria conseguir.

configurações divi

Mas não se engane. Embora o Divi Page Builder seja destinado a iniciantes, é um editor que também facilita desenvolvedores experientes. Eles podem sistematicamente combinar seus recursos visuais com controles CSS para levar seus sites Divi WooCommerce ao próximo nível.

Venha para pensar, no entanto, você não precisa de um desenvolvedor para projetar todos os elementos da sua loja Divi WooCommerce. Você pode confiar apenas nas funcionalidades visuais.

E sabe de uma coisa?

Divi até tenta facilitar todo o processo, rotulando e codificando com cores os módulos de layout.

E falando nisso, outra disposição notável aqui é a simplificação geral do processo de personalização de layout da Divi. Se você quiser introduzir uma nova seção, por exemplo, um único clique deve ser feito. Em seguida, duplicar, remover e inserir módulos para sua loja Divi WooCommerce levará apenas alguns cliques no botão.

Enquanto isso, a janela de edição do Divi exibirá as alterações de layout do seu site em tempo real. Você poderá acompanhar visualmente todos os ajustes e ver como isso afeta o design geral do outlook de sua loja Divi WooCommerce.

Layouts de site do Divi WooCommerce pré-programados

Para salvá-lo do dolorosamente exigente processo de criação de um site a partir do zero, o Divi WordPress Theme vem com uma série de modelos de site pré-definidos. E como você pode precisar de diferentes opções de layout do mesmo modelo, a Divi oferece seus designs de website como pacotes abrangentes. Conseqüentemente, você obtém layouts e cores de modelos variados.

Bem, para ser mais preciso, o Divi fornece sobre 7-8 diferentes layouts pré-concebidos em cada pacote de site. Considerando que cada um vem totalmente construído, você pode facilmente adotar os layouts sem retrabalhar extensivamente sua estrutura subjacente. Você apenas um par de ajustes aqui e ali.

layouts de site divi

Agora, para encontrar-se um perfeito para a sua loja on-line WooCommerce, basta percorrer as várias categorias de sites no tema Divi. Ou, como alternativa, use palavras-chave para pesquisar todas as opções de uma só vez.

Bem, apesar de tudo, não demorou muito para identificar um adequado Divi layout de loja online. Você só precisa integrá-lo com o WooCommerce, e você estará no caminho certo para criar um atraente site de comércio eletrônico WordPress.

Seguindo em frente, uma coisa particularmente notável que você notará é que a Divi não se concentra apenas na aparência. Os layouts do WooCommerce que vêm com o Divi Theme foram criados com a funcionalidade em mente também.

Assim, além das páginas típicas da loja, como check-out, produtos e carrinho, o Divi inclui módulos de comércio eletrônico por padrão. Mais especificamente, você recebe seções como produtos em destaque, itens em promoção e muito mais.

Divi é adequado para WooCommerce?

Tudo considerado, Divi é cada vez mais popular porque é fundamentalmente uma solução de tema WordPress tudo-em-um.

Combinado, o Divi Page Builder e Tema Divi Oferecer fornecer praticamente tudo que você precisa para configurar qualquer tipo de site WordPress. E isso inclui uma loja WooCommerce totalmente funcional com todos os recursos básicos de comércio eletrônico.

👉 Em suma, o Divi é uma opção que vale a pena considerar para o seu site WooCommerce porque:

  • Você pode personalizar seu site WooCommerce através de um editor visual de arrastar e soltar.
  • O Divi permite que você salve seus ajustes como elementos globais em todos os layouts.
  • Ele vem com mais de 20 layouts de site pré-concebidos bem projetados.
  • Você pode exportar facilmente os layouts e, posteriormente, aproveitá-los em outros sites.
  • Você pode criar sua loja WooCommerce com várias colunas, linhas e elementos de conteúdo.
  • Todos os layouts do WooCommerce foram otimizados para dispositivos móveis.
  • Assim como MS Word, editar conteúdo de texto é tão simples quanto clicar e digitar.
  • Todo o processo de personalização do site é rastreado em tempo real, proporcionando uma visualização ao vivo de todas as alterações de design.
  • Os layouts do WooCommerce vêm com páginas e módulos primários de lojas on-line.

Passo 1: Inscreva-se com temas elegantes para obter acesso ao Divi

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

Passo 2: Instale o Divi no seu site WordPress

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

Passo 3: 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

Passo 4: Setup Your WooCommerce Store

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 no SiteGround já instalou o WooCommerce no seu site WordPress, assim você não precisa se preocupar em instalá-lo ou configurá-lo. Já deve estar disponível no seu painel.

Passo 5: Adicione seus primeiros produtos ao WooCommerce

Você tecnicamente já tem a configuração do site de comércio eletrônico, mas queremos adicionar alguns produtos para fazer com que pareça um site de comércio eletrônico no frontend. Vá para o seu painel do WordPress, clique na aba Produtos em 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

Etapa 7: Explore os recursos do WooCommerce

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

Etapa 8: criar a página inicial

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

Passo 9: Adicione um título para sua página Divi

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

Etapa 17: visualizar e publicar

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.

Conclusão

E isso é tudo o que é necessário para obter o seu Divi Loja on-line do WooCommerce instalada e funcionando usando uma conta de hospedagem do SiteGround.

Seguindo em frente, você pode ter certeza de que o SiteGround lidará com todas as informações técnicas críticas, como atualizações do WordPress e WooCommerce segurança. Essa é a diferença fundamental entre a hospedagem gerenciada do WooCommerce e as soluções regulares de hospedagem compartilhada. Assim, ele oferece o tempo e o espaço necessários para se concentrar no gerenciamento da sua loja WooCommerce.

E como já vimos, isso deve ser fácil com o tema Divi. Você sempre pode acessar seu layout Divi WooCommerce a partir do seu back-end do WordPress para personalizá-lo ainda mais. Se você quiser, você pode até mudar todo o design, mudando para um layout diferente que pode lidar com uma loja WooCommerce também. A escolha é sua.

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.