Como projetar uma linha do tempo de fluxo de carrinho WooCommerce para seu Divi

Publicados: 2023-02-01

WooCommerce é um dos plugins de comércio eletrônico mais amados do WordPress. Para oferecer suporte a isso, a Divi lançou vários novos módulos centrados no Woo que permitem maior controle sobre o design de suas páginas padrão do WooCommerce. No post de hoje, trabalharemos no desenvolvimento de uma linha do tempo de carrinho WooCommerce para Divi. Para esta linha do tempo, criaremos uma representação visual da jornada do usuário. Queremos mostrar visualmente ao usuário como ele se move da loja para o checkout.

Modelo de página de carrinho

Visualização da área de trabalho

Carrinho da loja de brinquedos Divi com linha do tempo do fluxo do carrinho - modelo de carrinho

Visualização de tablet e celular

Visualização da linha do tempo da página do carrinho do WooCommerce para tablets e dispositivos móveis

Modelo de página de checkout

Página de check-out da loja de brinquedos Divi com linha do tempo do fluxo do carrinho - modelo de check-out

Visualização de tablet e celular

Página de checkout da loja de brinquedos Divi em tablet e celular

Faça o download do modelo de carrinho e checkout GRATUITAMENTE

Para colocar as mãos no modelo de carrinho e checkout grátis, primeiro você precisa baixá-los usando o botão abaixo. Para ter acesso ao download terá de subscrever a nossa newsletter através do formulário abaixo. Como novo assinante, você receberá ainda mais produtos Divi e um pacote Divi Layout gratuito toda segunda-feira! Se você já está na lista, basta digitar seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” ou receberá e-mails extras.

Baixe os arquivos
Download de graça

Download de graça

Junte-se ao boletim informativo Divi e enviaremos por e-mail uma cópia do pacote de layout de página de destino Divi definitivo, além de vários outros recursos, dicas e truques incríveis e gratuitos do Divi. Acompanhe e você será um mestre Divi em pouco tempo. Se você já é inscrito, basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e obter acesso a pacotes de layout Divi semanais gratuitos!

Como baixar e instalar os modelos de carrinho e checkout

Vá para Divi Theme Builder

Para carregar o modelo, navegue até o Divi Theme Builder no back-end do seu site WordPress.

Abra o Divi Theme Builder

Carregar modelo de site padrão global

Em seguida, no canto superior direito, você verá um ícone com duas setas. Clique no ícone.

Importe o modelo para o Divi Theme Builder

Navegue até a guia de importação, carregue o arquivo JSON que você conseguiu baixar nesta postagem e clique em 'Importar modelos do Divi Theme Builder.

Conclua a importação do modelo para o Divi Theme Builder

Salvar alterações do Divi Theme Builder

Depois de carregar o arquivo, você notará um novo modelo de carrinho, checkout e loja. Salve as alterações do Divi Theme Builder assim que desejar que os modelos sejam ativados.

Salvar alterações do construtor de temas para modelos WooCommerce

Como criar a linha do tempo do carrinho WooCommerce do zero

Se você quiser um pouco mais de desafio, a próxima parte de nossa postagem no blog mostrará como recriar a linha do tempo do carrinho WooCommerce para Divi. Você pode usar as etapas deste tutorial para personalizar sua própria linha do tempo do carrinho. Use-o como inspiração para o seu próximo projeto WooCommerce e Divi! A linha do tempo do carrinho WooCommerce que criaremos se parece com isto:

Página do Carrinho

Linha do tempo do carrinho WooCommerce na página do carrinho

Página de finalização de compra

Linha do tempo do carrinho WooCommerce na página de checkout

Esta linha do tempo do carrinho Woocommerce para Divi também é responsiva a dispositivos móveis. Ele permanece como uma linha do tempo horizontal em dispositivos móveis:

Linha do tempo do WooCommerce no celular

Agora que temos um guia visual do que iremos construir, vamos começar!

Configure o Divi Theme Builder

Estaremos criando esses modelos para afetar as páginas de carrinho e checkout do WooCommerce. Como tal, começamos nossa tarefa no Divi Theme Builder.

Abra o Divi Theme Builder

Criar modelo de carrinho

Clique no ícone de mais no cartão Adicionar novo modelo.

Criar modelo de carrinho

Em seguida, selecione Criar novo modelo .

Selecione Construir Novo Modelo

Depois, você será presenteado com uma caixa modal de todas as várias atribuições que você pode anexar ao novo modelo que está criando. No nosso caso, criaremos um modelo para a página do carrinho da nossa loja WooCommerce. Então, role para baixo na caixa modal e selecione Carrinho sob o cabeçalho WooCommerce. Depois de selecionado, clique em Criar modelo . Ao fazer isso, estamos atribuindo o modelo recém-criado à página do carrinho.

Concluir Criar Modelo de Carrinho

Criar modelo de checkout

Iremos passar pelas mesmas etapas para criar o modelo de checkout. Clique no ícone de mais no cartão Adicionar novo modelo.

Criar modelo de carrinho

Novamente, selecione Criar novo modelo .

Selecione Construir Novo Modelo

Para a página de checkout, precisaremos rolar a caixa modal e selecionar Checkout sob o cabeçalho WooCommerce. Depois de selecionado, clique em Criar modelo .

Salvar modelos e atribuições

Agora que nossos modelos de carrinho e checkout foram criados, podemos salvá-los. Clique no botão verde Salvar alterações na parte superior do Divi Theme Builder.

Salvar modelos e atribuições

Vamos começar a construir a linha do tempo do fluxo do carrinho WooCommerce

Configurando o modelo de página do carrinho

Agora a diversão começa! Vamos começar a criar nossa linha do tempo do fluxo do carrinho para a página do carrinho. Para fazer isso, clicamos no botão Add Custom Body dentro do modelo de Carrinho que acabamos de criar.

Modelo de Página Adicionar Corpo ao Carrinho

Semelhante a quando criamos esses modelos e suas atribuições, vamos clicar no botão Build Custom Body que aparece na caixa modal.

Modelo de Página Adicionar Corpo ao Carrinho

Adicionar uma nova seção e linha

Agora que estamos no Divi Builder, vamos adicionar uma nova linha. Esta linha terá cinco colunas.

Adicione uma nova linha com cinco colunas

Adicionar Módulos Blurb

Adicione três Módulos Blurb às colunas 1, 3 e 5 da sua nova linha.

Adicionar módulos do Blurb às colunas

Aqui está o conteúdo de cada Módulo Blurb que usaremos:

Primeira sinopse (coluna 1)

  • Título: Loja
  • Corpo: Deixe em branco
  • Usar ícone: Sim
  • Ícone: Veja a captura de tela abaixo
  • URL do link do módulo: /shop (ou seu link personalizado para a página da sua loja)

Segunda sinopse (coluna 3)

  • Título: Revisão
  • Corpo: Deixe em branco
  • Usar ícone: Sim
  • Ícone: Veja a captura de tela abaixo
  • URL do link do módulo: /cart (Ou seu link personalizado para a página do carrinho)

Terceira sinopse (coluna 5)

  • Título: Check-out
  • Corpo: Deixe em branco
  • Usar ícone: Sim
  • Ícone: Veja a captura de tela abaixo
  • URL do link do módulo: /checkout (ou seu link personalizado para a página de checkout)

Agora, nossa linha do tempo WooCommerce ficará assim neste ponto:

A linha do tempo do carrinho WooCommerce sem estilo

Adicionando Links a Blurbs

Como estamos criando modelos para o carrinho e a página de checkout, precisamos que nossos Módulos Blurb sejam fáceis de acessar, não importa em quais páginas o cliente acesse. Um recurso central da linha do tempo do WooCommerce é que o usuário final – seu cliente – poderá navegar facilmente entre os vários estágios do processo de checkout. Para adicionar o link para as páginas padrão de loja, carrinho e checkout do nosso site, vamos primeiro inserir as configurações do módulo da primeira sinopse, shop.

Adicionando Links ao Shop Blurb

Assim que a caixa de configurações do módulo aparecer, vamos rolar para baixo até o cabeçalho Link. Adicionaremos o link à caixa URL do link do módulo porque isso garantirá que, independentemente de onde seus cliques personalizados – seja no título do Blurb ou no próprio ícone – eles serão direcionados para a página para a qual precisam navegar.

Adicione links aos Módulos Blurb no processo de linha do tempo de finalização da compra

Adicionaremos os links para as páginas padrão do WooCommerce a cada Módulo Blurb. Se você criou links personalizados para essas páginas na instalação do WooCommerce, ajuste os links de acordo. Primeiro, começamos com o Módulo Shop Blurb. Para o URL do link do módulo, inserimos /shop. Este é o URL padrão para a página da loja no WooCommerce. Lembre-se, se você alterou este URL, insira seu URL personalizado aqui.

Adicione o link /shop para vincular ao link da página WooCommerce Shop padrão

Clique no botão de marca de seleção verde para salvar suas alterações. Em seguida, passamos para o Módulo Review Blurb. Este módulo serve como link para a página do carrinho. Novamente, navegamos para a guia Link e, em seguida, adicionamos o URL do link do módulo /cart ao URL do módulo.

Adicionar link ao módulo Blurb do carrinho

Para o último Módulo Blurb, o Módulo Checkout Blurb, estaremos vinculados ao link da página de checkout padrão do WooCommerce, que é /checkout.

Adicionar link ao link da página de checkout padrão do WooCommerce

Módulos de Blurb de estilo

Em seguida, começaremos a estilizar nossos módulos Blurb adicionados. Estaremos usando estilos de foco nos módulos. Isso ajuda na experiência do usuário (UX) da linha do tempo do carrinho WooCommerce. Queremos que o Módulo Blurb que representa a página em que estamos atualmente tenha uma cor diferente. E também queremos que o ícone seja ampliado quando passamos o mouse sobre ele e mudamos de cor.

Estilização do Módulo Blurb

  • Cor do ícone: #eac989
  • Cor do ícone de foco: #9fa2ce
  • Alinhamento do Texto: Centro

Cor do ícone de desfoque

  • Texto do título:
    • Texto do título do título: H4
    • Fonte do título: Baskerville
    • Peso da fonte do título: Negrito
    • Cor do texto do título: #354e7c

Estilização do texto do título do Blurb

Transformar:

  • Escala de Transformação (Desktop): 100%
  • Escala de Transformação (Passar o mouse): 115%

Configurações de Transformação do Blurb

Depois de definir as configurações de design para o primeiro Módulo Blurb, vamos estendê-las para os outros Módulos Blurb em nossa linha.

Estendendo o estilo do Módulo Blurb para todas as sinopses em nossa seção

Queremos estender nossos estilos apenas para os módulos do Blurb em nossa seção. Isso é importante observar especialmente se você estiver trabalhando em uma página que já possui conteúdo.

Estendendo o estilo do Módulo Blurb para todas as sinopses em nossa seção

Estilizando o módulo Cart Blurb

Para denotar os diferentes estágios do processo de checkout, vamos dar uma cor de ícone diferente para o estágio atual em que nosso usuário está. Por exemplo, se estiverem na página do carrinho, mudaremos a cor do Módulo Blurb referente à etapa do processo do carrinho.

Atualizando a cor do módulo Blurb da página atual

Módulo Blurb da página do carrinho:

  • Cor do ícone (desktop): #f6c6c5
  • Cor do ícone (hover): #9fa2ce

Adicionar divisores de linha do tempo

Depois de criar e estilizar nosso módulo Blurb, começaremos a adicionar e estilizar nossos módulos divisores. Usamos o Módulo Divisor nas colunas dois e quatro da nossa linha.

Adicione divisores à linha do tempo do carrinho WooCommerce

Divisores de linha do tempo de estilo

Em seguida, adicionaremos nosso estilo aos nossos módulos divisores.

Configurações do divisor

Visibilidade:

  • Divisor de exibição: Sim

Linha:

  • Cor da linha: #354e7c
  • Estilo de linha: pontilhado
  • Posição da linha: centralizado verticalmente

Dimensionamento

  • Peso do divisor: 5px

Configurações para os módulos divisores

Vamos usar outro recurso Divi muito legal para copiar e colar os estilos deste Módulo Divisor para o outro módulo dentro de nossa linha. Primeiro, vamos clicar com o botão direito do mouse em nosso Divider Module concluído . Em segundo lugar, vamos clicar em Copiar configurações do módulo . Em seguida, clicamos com o botão direito do mouse no Módulo divisor que está atualmente sem estilo. Por fim, clicamos em Colar configurações do módulo . Tempo economizado é tempo ganho!

Copie e cole estilos de módulo para os módulos divisores

Adicionando CSS personalizado

É assim que nossa linha do tempo do carrinho WooCommerce se parece atualmente:

Linha do tempo de checkout do carrinho WooCommerce

Para garantir que nossos módulos divisores estejam alinhados corretamente e para tornar nosso módulo de linha do tempo responsivo para dispositivos móveis, adicionaremos um pouco de CSS à nossa linha.

Linha da linha do tempo do carrinho WooCommerce com CSS personalizado

Para adicionar nosso CSS personalizado, primeiro precisamos inserir as configurações de linha para nossa linha do tempo do carrinho WooCommerce. Em seguida, selecionamos a guia Avançado . Por fim, adicionaremos o seguinte CSS ao elemento principal:

CSS customizado:

display:flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;

Depois de adicionar isso às configurações de linha, clicamos na marca de seleção verde para salvar nossas configurações.

Personalização final para capacidade de resposta móvel

Um benefício incrível do Divi é o fato de que você pode personalizar vários elementos profundamente. Precisamos fazer uma edição final no último Módulo Blurb na última coluna de nossa linha. Essa alteração ajudará a ter uma aparência melhor em dispositivos móveis e telas menores. O fato de Divi nos permitir granular com nosso estilo garante que nosso trabalho pareça bom para nossos clientes, bem como para nossos próprios sites.

Edição de preenchimento, margem e CSS para colunas

Observe como a última coluna, no mobile, é um pouco mais baixa que os outros Módulos do Blurb. Nós vamos mudar isso! Para fazer isso, vamos inserir as configurações do terceiro e último módulo . Em seguida, iremos para Espaçamento > Margem . Vamos deixar a margem para a visualização da área de trabalho. No entanto, vamos adicionar uma margem inferior de 15px para tablets .

Adicione uma margem inferior ao seu Módulo Blurb

Finalmente, vamos adicionar uma margem inferior de 21px para dispositivos móveis.

Adicione uma margem inferior ao seu Módulo Blurb para dispositivos móveis

Agora, temos uma linha do tempo do carrinho Woocommerce verdadeiramente responsiva para dispositivos móveis que podemos usar para orientar os usuários da loja ao checkout.

Configurando a página de checkout

Definimos a base para nossa linha do tempo de fluxo de carrinho WooCommerce em nossa página de carrinho. No entanto, precisamos concluir nossa linha do tempo adicionando o trabalho que fizemos ao nosso modelo de página de checkout. Estaremos usando o recurso OG do Divi, o menu do botão direito para ajudar a facilitar nosso processo para a página de checkout. Vamos começar!

Copie a linha do tempo do fluxo do carrinho WooCommerce da página do carrinho

Voltaremos à página do carrinho. No entanto, não entraremos no Divi Builder para o corpo.

Prepare o corpo do carrinho para a página de checkout

Clique com o botão direito do mouse no corpo personalizado do modelo de carrinho. Em seguida, clique na opção Copiar no menu do botão direito.

Clique com o botão direito, copie o modelo de corpo do modelo de carrinho para o modelo de checkout

Agora que copiamos o trabalho que fizemos no modelo de carrinho, vamos colá-lo no modelo de checkout. Para fazer isso, clique com o botão direito do mouse no botão Adicionar corpo personalizado no modelo de página de checkout. Feito isso, o menu mostrará a opção Colar. Clique em Colar para copiar o corpo personalizado do modelo de página de carrinho para o modelo de página de checkout.

Clique com o botão direito para colar o conteúdo do corpo do modelo de carrinho

Agora, você verá que os modelos de página de carrinho e checkout têm um corpo personalizado. Isso nos ajudará a economizar tempo em nosso processo de web design. Obrigado, Divi Para salvar nossas alterações no modelo de checkout, clicaremos no botão verde Salvar alterações na parte superior do construtor.

Salve as alterações para o modelo de corpo da página de checkout

Atualizar modelo de página de checkout

Agora que economizamos algum tempo em nosso processo de design, vamos fazer as edições finais na página de checkout para garantir que funcione bem com o restante do projeto. Primeiro, clique no ícone de lápis para editar o corpo personalizado do modelo de página de checkout.

Editar módulo de corpo personalizado de checkout

Ícone de checkout de estilo

Vamos começar a estilizar nosso ícone de checkout. Clique no ícone de engrenagem que abrirá as configurações do módulo do ícone de checkout.

Editar ícone de checkout

Vá para a guia Design do módulo Module Settings. Clique no título Imagem e ícone . Estaremos editando a cor do ícone. Assim, clique no ícone do conta-gotas e digite o código hexadecimal #f6c6c5 . Isso fará com que o ícone fique com a cor rosa que estamos usando para denotar a página atual.

Atualizar a cor do ícone de checkout

Atualizar ícone do carrinho

Teremos que voltar e atualizar a cor do ícone do carrinho. Para fazer isso, vamos voltar para as configurações do módulo do módulo. Em seguida, clicamos no ícone de engrenagem do ícone do carrinho .

Atualize a cor do ícone do carrinho no modelo de página de checkout

Novamente, passaremos para a guia Design das configurações do módulo. Em seguida, sob o título Imagem e ícone, clique na ferramenta conta-gotas . Em seguida, adicione o código hexadecimal #eac989.

Cor do ícone do carrinho atualizada no modelo de página de checkout

Lembre-se de salvar suas configurações e todo o seu trabalho duro depois de sair do Divi Builder.

Salvar todas as alterações

Juntando tudo

Embora tenhamos focado este tutorial na construção da linha do tempo do carrinho, existem outros módulos WooCommerce usados ​​para completar o modelo. Para este tutorial, usamos o Divi Toy Store Layout Pack GRATUITO como inspiração para o estilo. Aqui estão os outros módulos WooCommerce que você precisará adicionar a cada página de modelo para completar sua loja.

Modelo de página de carrinho

  • Woo Cart Products: Isso exibirá o carrinho WooCommerce
  • Woo Cart Totals: mostre o subtotal, impostos e muito mais com este módulo

Visão geral das páginas do carrinho com os outros módulos Woo

Modelo de página de checkout

  • Módulo Woo Notice: Usamos este módulo para mostrar quaisquer erros, informações ou avisos relacionados ao check-out
  • Woo Checkout Billing: Este módulo irá colorir os detalhes de cobrança de seus clientes
  • Woo Checkout Details: Ao contrário dos totais do carrinho, este módulo mostrará os nomes reais do produto, quantidade e muito mais
  • Woo Checkout Billing: Para mostrar os métodos de pagamento disponíveis, adicionamos este módulo à página de checkout

Visão geral das páginas de checkout com os outros módulos Woo

Para concluir

Ter uma linha do tempo do carrinho adiciona uma representação visual do processo que seus clientes realizam em sua loja. Com o Divi, você tem o poder de personalizar e criar uma peça adicional à sua loja WooCommerce. O Divi fornece as ferramentas para você levar o que aprendeu aqui para seus próprios clientes e sites pessoais. Eu adoraria ouvir de você se você usar este tutorial na natureza!