Usando o Fashion Layout Pack da Divi para criar uma loja online com WooCommerce

O novo Fashion Layout Pack da Divi tem uma ótima configuração para qualquer loja online. A integração do módulo da loja e a organização dos layouts de página proporcionam um avanço significativo. Mas, para colocar esse layout em funcionamento como uma loja online funcional, precisamos do plug-in WooCommerce. E você pode se surpreender ao ver como o Divi e o WooCommerce funcionam bem juntos.

Neste tutorial, vou mostrar como criar uma loja online usando o pacote de layout Divi's Fashion usando Woocommerce. Vou orientá-lo sobre como configurar corretamente seus layouts para serem personalizados, como dar vida à página da loja com a integração do Woocommerce e algumas dicas sobre como usar elementos do seu layout e o personalizador de tema para estilizar as páginas do Woocommerce.

A configuração

Por uma questão de tempo, vou iniciar este tutorial com algumas etapas já concluídas.

1. Instale e ative o Divi Theme
2. Instale e ative o WooCommerce
3. Baixe o Fashion Layout Pack e importe o arquivo Fashion_All.json para sua biblioteca de temas Divi.
4. Crie novas páginas para cada layout.
5. Crie seu menu principal.

Se você está confuso com a configuração listada acima, você pode encontrar instruções mais detalhadas sobre como configurar seu layout corretamente, verificando estas 10 etapas para usar um pacote de layout para seu novo projeto.

Depois de concluir as 5 etapas acima, você está pronto para começar.

The Sneak Peek

Aqui está uma olhada em algumas das páginas do WooCommerce que você criará.

Usando o Fashion Layout Pack da Divi para criar uma loja online com WooCommerce

Inscreva-se no nosso canal no Youtube

Mude sua cor de destaque global

Para começar, vamos mudar a cor de destaque global para o tema Divi. Alterar a cor de destaque global para combinar com seu layout é sempre uma boa ideia, mas também é a maneira mais fácil de combinar suas páginas WooCommerce com seu esquema de cores sem ter que usar CSS personalizado. Você notará que essa cor de destaque está sendo usada para estilizar elementos em cada uma de suas páginas WooCommerce, como a página de um único produto, a página do carrinho, etc ...

Para alterar a Cor de destaque global, vá para o Customizador de tema e navegue até Configurações gerais> Configurações de layout e encontre a opção Cor de destaque do tema na parte inferior.

Estou usando esta cor rosa do layout: # fc7086

Então, depois de alterá-lo, salve e publique suas configurações e atualize sua página para permitir que a cor de destaque atualize outras configurações dentro do personalizador.

Atualize as configurações de tipografia no personalizador de temas

Como o WooCommerce usa as configurações padrão do personalizador de tema para definir o estilo do texto de cada uma de suas páginas, você deve se certificar de que corresponde à tipografia usada em seus layouts com as configurações de tipografia no personalizador de tema.

Para atualizar sua tipografia, vá para Divi> Personalizador de tema> Configurações gerais> Tipografia e atualize o seguinte:

Tamanho do corpo do texto: 16px
Altura da linha corporal: 1,9
Tamanho do texto do cabeçalho: 42
Estilo da fonte do cabeçalho: B
Fonte do cabeçalho: Playfair Display
Fonte do corpo: Poppins
Cor do link do corpo: [se você atualizou sua cor de destaque global, esta cor deve aparecer aqui]

Definir página da loja WooCommerce

WooCommerce permite que você defina qual página você deseja que seja sua página de loja base. Esta página deve incluir todas as categorias de produtos para que os usuários saibam tudo o que sua loja tem a oferecer. Como nosso layout tem uma página de loja, vamos prosseguir e torná-la nossa página de loja base.

No painel do WordPress, vá para WooCommerce> Configurações e clique na guia Produtos na parte superior da página. No menu diretamente abaixo da guia, selecione Exibir . Em seguida, selecione a página da loja para a página “Loja” que você criou com o novo layout da página da loja do pacote de layout de moda.

Em seguida, salve as alterações.

Adicione produtos à sua loja

Você deve ter notado que sua página da loja, apesar de ter dois módulos de loja, não exibe nenhum produto. Bem, obviamente, você precisa adicionar produtos primeiro. Para adicionar um novo produto à sua loja, vá para o painel do WordPress e siga estas etapas:

1. Navegue até Produtos> Adicionar Novo
2. Insira o nome do produto
3. Insira a descrição do produto
4. Insira o preço do produto
5. Insira uma breve descrição para o produto
6. Adicione três novas categorias (verão, destaque e promoção)
7. Selecione a categoria do seu produto (neste caso, seria verão)
8. Adicionar imagem do produto
9. Publicar / Atualizar Produto

Atribuir categorias aos seus produtos

Conforme você repete as etapas acima para criar mais novos produtos, certifique-se de atribuir uma categoria a cada um (# 7 nas etapas listadas acima). Para este tutorial, adicionei 6 produtos na categoria “Verão”, 6 produtos na categoria “Apresentados” e 1 produto na categoria “Em promoção”.

Atualizar Módulos da Loja na Página da Loja

Agora que você criou seus produtos, pode adicioná-los à página da sua loja. Como mencionei antes, o layout da página da loja já possui módulos de loja integrados ao layout. Há um na seção Verão e outro na seção Apresentados.

Vá para a página da loja e implemente o construtor visual. Em seguida, passe o mouse sobre o módulo da loja (atualmente sem produtos) sob a linha que contém o título Summer Fashion e clique nas configurações do módulo.

Atualize as configurações para incluir apenas a categoria “Verão”.

Agora você deve ver todos os produtos adicionados com a categoria verão.

Em seguida, encontre o módulo de loja sob o título de produtos em destaque e atualize as configurações para incluir apenas a categoria em destaque.

Adicione um módulo de loja para exibir itens "em promoção" na página da loja

Como temos duas categorias (Produtos em destaque e Moda de verão) na página da loja, seria fácil criar categorias e produtos adicionais usando os módulos já fornecidos no layout.

Vamos criar outra seção para exibir nossos produtos “Em promoção”.

Para fazer isso, implemente o construtor visual e use as opções de clique com o botão direito para copiar toda a seção exibindo os produtos da moda de verão e cole-a diretamente abaixo da seção Produtos em destaque.

Agora, tudo o que você precisa fazer é fazer algumas atualizações.

Na linha que exibe o Título, clique no texto no módulo de texto e altere o título para “Em promoção” em vez de “Moda de verão”.

Em seguida, altere a imagem na coluna da esquerda para algo mais consistente com seus produtos em promoção.

Por fim, atualize o módulo da loja para incluir apenas a categoria “Em promoção”.

Estilize suas páginas WooCommerce com o layout de moda

WooCommerce gera seu próprio conjunto de páginas WooCommerce automaticamente quando você instala o plugin. Isso inclui o seguinte:

Loja - que é um espaço reservado para um arquivo de tipo de postagem para seus produtos.
Carrinho - que usa o shortcode [woocommerce_cart] para gerar o conteúdo do carrinho
Checkout - que usa o código curto [woocommerce_checkout] para mostrar as informações.
Minha conta - que usa o código curto [woocommerce_my_account] para mostrar informações específicas do cliente relacionadas à conta.

Uma vez que já selecionamos nossa página da Loja, não há necessidade de design adicional. Mas, para as outras três páginas do WooCommerce, precisamos estilizá-las para se adequar ao design de nossos outros layouts de página.

Adicionando um cabeçalho de seção ao carrinho e às páginas de check-out

Vamos dar uma olhada na página do carrinho primeiro. Aqui está o que parece antes de fazermos qualquer coisa para ele.

Observe que, como atualizamos nossa cor de destaque global, nossos links e botões já correspondem ao esquema de cores. E, como atualizamos nossas configurações de tipografia no Theme Customizer, os cabeçalhos e o corpo do texto também correspondem ao nosso tema.

Mas podemos fazer um pouco melhor do que isso com apenas alguns cliques. Primeiro vá para a página da loja, implemente o construtor visual e salve a seção superior que contém o cabeçalho da página na biblioteca. Você pode dar o nome de “seção de cabeçalho da página”.

Em seguida, role para baixo até a parte inferior da página e encontre a última seção contendo a opção de email e os detalhes de contato e salve-a em sua biblioteca com o nome “seção de rodapé da página”.

Agora vá editar a página do seu carrinho. No editor de página padrão, selecione para usar o Divi Builder e, em seguida, “Use Visual Builder”. O construtor deve ter colocado automaticamente o shortcode [woocommerce_cart] em um módulo de texto dentro de uma linha de uma coluna de uma seção regular. Caso contrário, você mesmo precisará criá-lo. Em seguida, clique no ícone de adição azul para adicionar uma nova seção sob a atual, selecione a guia “Adicionar da Biblioteca”. Em seguida, selecione a nova seção que você acabou de criar, chamada “Seção do cabeçalho da página”.

Em seguida, arraste essa seção para o topo da sua página e altere o texto do título para “Seu carrinho”. É isso!

Você também pode repetir esse processo para a página de check-out.

Projetando a página Minha conta usando o Divi Builder

Agora que você sabe como adicionar um cabeçalho a essas páginas do WooCommerce, vá em frente e faça o mesmo para a página Minha conta. Desta vez, você pode adicionar a seção de rodapé que salvou na biblioteca na parte inferior desta página.

Você pode querer dar a esta página um design distinto para tornar mais óbvio que esta é uma página que gerencia sua conta. Portanto, em vez do fundo gradiente rosa para as seções de cabeçalho e rodapé, vá para as configurações de seção para cada uma e altere as cores do gradiente de fundo para # 9599e2 e # 8bc6ec.

Use as configurações do módulo de texto para definir o estilo do conteúdo do shortcode do WooCommerce

Como o shortcode WooCommerce agora reside dentro de um módulo de texto, você pode usar isso a seu favor para estilizar alguns desses elementos nas configurações do módulo.

Vamos fazer isso em nossa página Minha conta. No construtor visual, atualize as configurações do módulo de texto que contém o conteúdo do shortcode da seguinte forma:

Na guia de design ...

Tamanho do texto do texto: 20px
Altura da linha de texto: 1,6em

Agora clique na guia do link na seção Texto para definir o estilo dos links da seguinte maneira:

Fonte do link: Poppins
Peso da Fonte do Link: Semi Negrito
Tamanho do texto do link: 27 px
Altura da linha de link: 1,5em

Salvar configurações

Agora verifique a sua página Minha conta.

Usando CSS personalizado para estilizar páginas de arquivo do WooCommerce?

Algumas das páginas de arquivo usadas pelo WooCommerce não são geradas com um shortcode como as outras páginas, portanto, não podem ser ajustadas usando o Divi Builder. Portanto, para essas páginas, você precisará separar algum CSS personalizado.

Vejamos a página da categoria em destaque como exemplo.

Agora vamos abrir o Theme Customizer e clicar em Additional CSS e adicionar o seguinte:

.orderby {
background: #fd7792;
color: #fff!important;
font-size: 18px;
height: 40px;
font-size: 18px !important;

}

.woocommerce-Price-amount, .woocommerce .woocommerce-breadcrumb, p.woocommerce-result-count {
    font-size: 16px !important;
    color: #fd7792 !important;
    letter-spacing: 2px;
}

Isso definirá o estilo da caixa suspensa de classificação, da localização atual e da fonte do preço. O resto do texto pode ser alterado usando as configurações de Tipografia do personalizador de tema.

Pensamentos finais

Construir uma loja online para o seu site ficou muito mais fácil com a ajuda deste incrível pacote de layout, WooCommerce e Divi Builder. Obviamente, existem algumas necessidades que ainda precisam ser atendidas que estão além do escopo deste artigo. Por exemplo, você ainda precisará decidir qual gateway de pagamento usar, como deseja lidar com o envio e outros itens de ação mais específicos da empresa. Mas o WooCommerce deve ser capaz de lidar com a maior parte do que você precisa.

Espero que este post tenha inspirado você a criar algo incrível por conta própria.

Estou ansioso para ouvir de você nos comentários.

Saúde!