Como criar uma fantástica loja online com WooCommerce, Divi e SiteGround (Sep 2021)

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 publicada originalmente em 15 de janeiro de 2015 e foi completamente reformulada 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 opção bastante bonita para você considerar. Ele pode ser usado para um site comercial padrão, mas também inclui integrações para vendas de comércio eletrônico e processos de vendas rápidos. Vamos aprender como criar uma loja online com o Divi Tema 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. Existem muitas maneiras de obter nomes de domínio e hospedagem, mas eu pessoalmente acho SiteGround é uma das opções mais seguras e confiáveis. (Para mais detalhes, verifique nosso abrangente SiteGround rever).

O que é realmente legal é que SiteGround oferece um especialista gerenciados WooCommerce hospedagem 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 estabelecido WooCommerce lojas.

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

Dito isso, outro serviço de hospedagem que recomendamos para Divi WooCommerce lojas é BlueHost. Embora os recursos aqui não correspondam a SiteGroundde, você ainda consegue WooCommercecom foco na hospedagem por meio de seu pacote de comércio eletrônico WordPress. Os planos podem lidar confortavelmente com um Divi WooCommerce armazenar, mas, infelizmente, você não obterá serviços gerenciados.

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

Como você começou?

Vou ao SiteGround Dirigido WooCommerce Hosting 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, pois oferece suporte ilimitado WooCommerce sites 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 WooCommerce comerciantes. Mas, felizmente, eles podem aceitar pagamentos do PayPal, embora indiretamente.

Se este for o seu modo preferido, portanto, deixe os campos em branco e entre em contato SiteGroundagentes de vendas através da ferramenta de chat ao vivo. Eles o ajudarão 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 Sitegroundservidores de e seu WooCommerce visitantes do site, escolha o local do data center mais próximo de sua área de mercado-alvo.

Em seguida, escolha quaisquer serviços complementares extras que você gostaria de incluir em seu pacote e pronto! Isso é tudo o que é preciso para configurar um Siteground conta.

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, pois é totalmente automatizado. E depois que tudo estiver configurado, SiteGround fornecerá o nome de domínio adequado 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 é comum WooCommerce tema. É, na verdade, um dos temas mais populares do WordPress em Elegant Themes. E, curiosamente, Divi is Tema eleganteO principal produto da empresa.

Então, o que há de tão especial nesse tema? E há algo de excepcional sobre Divi'S WooCommerce?

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

o que é divi

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

Então, para completar, Divi vem com seu próprio plug-in intuitivo de construtor de páginas WordPress. Você pode usá-lo para personalizar livremente o seu Divi WooCommerce armazene sem qualquer codificação.

Na verdade, Divi foi desenvolvido para iniciantes. Portanto, você pode esperar encontrar um painel de controle elegante com quase nenhuma curva de aprendizado. Leva apenas alguns minutos para pegar o jeito de todo Divi ecossistema, configurá-lo e personalizá-lo Divi'S WooCommerce layouts.

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

  • Conjunto de layouts personalizáveis ​​para qualquer tipo de site WordPress, incluindo WooCommerce Lojas online.
  • 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. Mesmo os novatos podem confortavelmente configurar e ajustar totalmente funcional Divi WooCommerce lojas.
  • Integração direta com WordPress. Divi é um dos poucos temas externos do WordPress que podem ser instalados perfeitamente, sem ajustes complexos.
  • Otimizado para comércio eletrônico WooCommerce templates.

Divi Arraste e solte o Construtor de Páginas

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

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

Dito isto, o Divi O WordPress Page Builder é um editor de arrastar e soltar com recursos avançados de personalização. 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 que Divi WooCommerce iniciante esperaria conseguir.

divi Configurações

Mas, não se engane. Apesar de Divi O Construtor de Páginas é voltado para iniciantes, é um editor que também facilita desenvolvedores experientes. Eles podem combinar sistematicamente seus recursos visuais com controles CSS para empurrar seus Divi WooCommerce sites para o próximo nível.

Venha para pensar, no entanto, você não precisa de um desenvolvedor para projetar todos os elementos em seu Divi WooCommerce loja. 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 por falar nisso, outra disposição notável aqui é Divisimplificação geral do processo de personalização do layout. Se você quiser introduzir uma nova seção, por exemplo, um único clique deve bastar. Em seguida, duplicar, remover e inserir módulos para o seu Divi WooCommerce loja levará apenas alguns cliques de botão.

Enquanto isso, DiviA janela de edição de exibirá as alterações de layout do seu site em tempo real. Você será capaz de rastrear cada ajuste visualmente e ver como isso afeta o design de perspectiva geral de seu Divi WooCommerce armazenar.

Pré-desenhado Divi WooCommerce Layouts de site

Para salvá-lo do processo dolorosamente exigente de criar um site do zero, o Divi O tema WordPress vem com uma série de modelos de sites predefinidos. E uma vez que você pode precisar de diferentes opções de layout do mesmo modelo, Divi oferece os designs de seu site como pacotes completos. Conseqüentemente, você obtém vários layouts e cores de modelo.

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

divi layouts de site

Agora, para encontrar um perfeito para o seu WooCommerce loja online, basta percorrer as várias categorias de sites na Divi Tema. Ou, alternativamente, use palavras-chave para pesquisar todas as opções de uma vez.

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

Seguindo em frente, uma coisa particularmente notável que você notará é que Divi não se concentra apenas na aparência. O WooCommerce layouts que vêm com o Divi O tema também foi criado com a funcionalidade em mente.

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

Is Divi Apropriado para WooCommerce?

Todas as coisas consideradas, Divi é cada vez mais popular porque é fundamentalmente uma solução de tema WordPress tudo-em-um.

Combinado, o Divi Construtor de páginas e Divi tema oferta fornece praticamente tudo que você precisa para configurar qualquer tipo de site WordPress. E isso inclui um sistema totalmente funcional WooCommerce loja com todos os recursos básicos de comércio eletrônico.

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

  • Você pode personalizar o seu WooCommerce site por meio de um editor visual de arrastar e soltar.
  • 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 projetar seu WooCommerce loja com várias colunas, linhas e elementos de conteúdo.
  • Todos WooCommerce layouts 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.
  • WooCommerce layouts vêm com módulos e páginas de loja online primárias.

Etapa 1: inscreva-se com temas elegantes para obter acesso a Divi

Comece por ir ao Página do produto Elegant Themes para o Divi Tema WordPress. Esta página oferece a opção de uma demonstração do tema e um botão de download rápido. Elegant Themes vende seus temas usando uma estrutura de pagamento anual ou único, o que é bom para desenvolvedores com vários sites de clientes ou pessoas que administram vários sites de comércio eletrônico. Você não pode 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.

Divi Tema WordPress

Etapa 2: instalar 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

Etapa 4: configure seu WooCommerce Loja

Se você for para o Divi Página de documentação do tema 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. A Divi tema É totalmente compatível com WooCommerce para que você possa exibir todos os seus produtos.

O que é incrível é que a inicial SiteGround inscrição já instalada WooCommerce no seu site WordPress, para que você não precise se preocupar em instalá-lo ou configurá-lo. Ele já deve estar disponível em seu painel.

Etapa 5: adicione seus primeiros produtos ao WooCommerce

Tecnicamente, você já tem o site de comércio eletrônico totalmente configurado, mas queremos realmente adicionar alguns produtos para fazer com que pareça um site de comércio eletrônico no front-end. Vá para o painel do WordPress, clique na guia Produtos em WooCommerce e clique no item Adicionar Produto.

WooCommerce adicionar novo produto

Passo 6

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 o WooCommerce Características

Se você rolar para baixo abaixo da área de descrição, você encontrará todos os possíveis WooCommerce recurso 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 vastos para eu descrevê-los todos aqui, mas você pode ir para o WooCommerce página de documentação para entender tudo o que você pode configurar no seu site de comércio eletrônico.

WooCommerce características

Etapa 8: criar a página inicial

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

Wordpress nova página

Etapa 9: adicione um título para o seu Divi página

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

Passo 10

Clique no botão Full Width Header.

Adicione um cabeçalho

Passo 11

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

Passo 12

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

WordPress woocommerce instalação

Passo 13

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

Passo 14

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

Passo 15

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

Passo 16

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 Divi Tema WordPress, informe-nos na seção de comentários abaixo.

Conclusão

E isso é tudo o que é necessário para obter o seu Divi WooCommerce loja online instalada e funcionando usando um SiteGround conta de hospedagem.

Seguindo em frente, você pode ter certeza de que SiteGround vai lidar com todo o material técnico crítico, como atualizações do WordPress e WooCommerce segurança. Essa é a diferença fundamental entre gerenciado WooCommerce hospedagem e soluções de hospedagem compartilhada regular. Portanto, dá a você o tempo e o espaço necessários para se concentrar em seu WooCommerce Gestão de loja.

E como já vimos, isso deve ser uma brisa com o Divi tema. Você sempre pode acessar seu Divi WooCommerce layout do back-end do WordPress para personalizá-lo ainda mais. Se desejar, você pode até mesmo alterar todo o design completamente mudando para um layout diferente que pode lidar com um WooCommerce armazenar também. A escolha é sua.

Se você tiver alguma dúvida sobre a configuração do Divi Tema WordPress, por favor, deixe-nos saber 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 meu atual top 10 construtores de sites de comércio eletrônico.