Criar uma página de finalização de compra no WooCommerce geralmente envolve personalização avançada do arquivo de modelo PHP no painel administrativo e bastante CSS personalizado. Mas com os Módulos Woo do Divi , esse processo se tornou fácil e agradável! Ao editar uma página de finalização de compra do WooCommerce usando o Divi, o shortcode do WooCommerce se transforma em um layout estruturado de Módulos Woo dinâmicos, prontos para serem personalizados visualmente com as poderosas opções de design integradas. Isso lhe dá controle total sobre o design da página de finalização de compra.
Neste tutorial, mostraremos como criar uma página de finalização de compra do WooCommerce totalmente personalizada do zero com o Divi. Primeiro, vamos projetar a página de finalização de compra do WooCommerce usando os módulos dinâmicos do WooCommerce disponíveis para essa página. Depois disso, mostraremos como adicionar o design da página de finalização de compra a um modelo de página de finalização de compra no Construtor de Temas. Portanto, seja para personalizar a página de finalização de compra ou criar um modelo, o Divi oferece tudo o que você precisa. Em pouco tempo, você estará pronto para criar páginas de finalização de compra incríveis.
Vamos começar!
Prévia
O antes e o depois
Aqui está uma breve comparação da página de finalização de compra padrão do Divi com a nova página de finalização de compra que criaremos neste tutorial.
E aqui está uma visão mais detalhada do design da página de finalização da compra em computadores e dispositivos móveis.
Você também pode conferir a demonstração ao vivo deste design de página de finalização de compra.
Baixe o layout da página de finalização de compra GRATUITAMENTE.
Para obter o modelo de página de finalização de compra deste tutorial, primeiro você precisa baixá-lo usando o botão abaixo. Para acessar o download, você precisa se inscrever em nossa newsletter usando o formulário abaixo. Como novo assinante, você receberá ainda mais conteúdo incrível sobre Divi e um pacote de layouts gratuito toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em "Baixar". Você não será reinscrito nem receberá e-mails extras.
Para importar o layout da seção para sua Biblioteca Divi, navegue até a Biblioteca Divi.
Clique no botão Importar.
Na janela pop-up de portabilidade, selecione a aba de importação e escolha o arquivo baixado do seu computador.
Em seguida, clique no botão de importação.
Após a conclusão, o layout da seção estará disponível no Divi Builder.
Baixe os conjuntos de modelos de página de carrinho e finalização de compra para Divi.
Este design de página de finalização de compra também está disponível para download como parte de nossos conjuntos de modelos GRATUITOS de carrinho e página de finalização de compra para Divi .
Vamos ao tutorial, certo?
Sobre a página de finalização de compra do WooCommerce e o Divi
Sempre que você instala o WooCommerce no seu site Divi, o WooCommerce (WC) gera páginas importantes, incluindo a página da loja, a página do carrinho, a página de finalização da compra e a página da conta. O conteúdo da página é inserido por meio de um shortcode no editor de blocos do WordPress.
Se você ativar o Divi Builder nesta página de finalização de compra, cada um dos elementos de conteúdo da página de finalização de compra do WooCommerce será carregado como módulos Divi Woo, que podem ser usados para estilizar a página.
Módulos WooCommerce para criar uma página de finalização de compra no Divi
O Divi vem com uma variedade de módulos essenciais para adicionar conteúdo dinâmico a um modelo de página. Alguns deles incluem módulos do WooCommerce específicos para a página de finalização da compra.
Os módulos essenciais para a criação da página ou modelo de finalização de compra incluem:
- Título da publicação – Este campo exibirá o título da página de finalização da compra dinamicamente ao criar um modelo de página de finalização da compra.
- Woo Notice – Este módulo pode ser configurado para diferentes tipos de página (página do carrinho, página do produto, página de finalização da compra). Ele exibirá notificações importantes ao usuário dinamicamente, conforme necessário.
- Woo Checkout Faturamento – Este módulo exibe o formulário de detalhes de faturamento usado durante a finalização da compra.
- Woo Checkout Shipping – Este módulo exibe o formulário com os detalhes de envio usado durante a finalização da compra.
- Informações do WooCheckout – Este módulo exibe o formulário de informações adicionais usado durante o processo de finalização da compra.
- Detalhes do Checkout do WooCommerce – Este módulo exibe os detalhes do pedido, incluindo os produtos comprados e seus preços, durante o processo de finalização da compra.
- Woo Checkout Payment – Este módulo exibe a seleção do tipo de pagamento e os detalhes do formulário de pagamento durante a finalização da compra.
Outro módulo Woo opcional:
- Woo Breadcrumbs – Isso exibirá a barra de navegação Breadcrumb do WooCommerce.
Crie uma página ou modelo de finalização de compra
Como mencionado, podemos usar facilmente os Módulos Divi Woo para criar uma página de finalização de compra personalizada do WooCommerce . No entanto, você também pode optar por criar um modelo de página de finalização de compra personalizado usando o mesmo processo de design. Neste tutorial, vamos criar um layout de página de finalização de compra personalizado. Em seguida, mostraremos como usar esse layout personalizado para criar um modelo de página de finalização de compra usando o Construtor de Temas Divi .
Criando um layout de página de finalização de compra do WooCommerce com o Divi
Neste tutorial sobre a página de finalização de compra do WooCommerce, o objetivo é criar um layout personalizado para a página que será definida como a página de finalização de compra padrão do WooCommerce. Ao final do tutorial, mostraremos como salvar e importar facilmente esse layout para criar um novo modelo de página de finalização de compra usando o Construtor de Temas.
Primeiros passos: Editando a página de finalização de compra do WooCommerce
No painel do WordPress, clique para editar a página de finalização de compra do WooCommerce. Por padrão, a página conterá apenas o código curto usado para gerar o conteúdo da página de finalização de compra.
Clique no botão Usar o Divi Builder na parte superior do editor de páginas.
Em seguida, clique no botão Editar com o Divi Builder para iniciar o Divi Builder.
Limpando o layout para começar do zero
Como mencionado anteriormente, a página será carregada com todos os módulos personalizáveis do Divi (incluindo os principais módulos do WooCommerce) que compõem o conteúdo da página de finalização da compra. Você pode usar o layout existente e começar a personalizar os módulos que já estão lá, se desejar. Mas, para este tutorial, vamos começar do zero.
Para limpar o layout, abra o menu de configurações na parte inferior da página, clique no botão Limpar Layout (o ícone da lixeira) e selecione SIM.
Criando uma seção, linha e coluna
Contexto da seção
Para começar, adicione uma cor de fundo a uma nova seção normal da seguinte forma:
- Cor de fundo: #f7f3f0
Linha e Coluna
Em seguida, adicione uma linha de uma coluna à seção.
Criando o título dinâmico da página de finalização da compra
Para criar o título dinâmico da página de finalização da compra, adicione um módulo de título de postagem à coluna.
Conteúdo do título da postagem
Nas configurações do título da postagem, atualize os elementos para exibir apenas o título, conforme mostrado a seguir:
- Título do programa: SIM
- Mostrar Meta: NÃO
- Exibir imagem em destaque: NÃO
Texto do título da postagem
Para formatar o título da postagem, atualize as seguintes opções na aba Design:
- Fonte do título: DM Serif Display
- Cor do texto do título: #fff
- Tamanho do texto do título: 80px (desktop), 60px (tablet), 42px (celular)
- Altura da linha do título: 1,2em
Criando o módulo de notificações dinâmicas do WooCommerce para a página de finalização da compra.
É sempre uma boa ideia adicionar o módulo Woo Notice no topo da página para que os avisos fiquem mais visíveis aos usuários ao interagirem com a página de finalização da compra. Lembre-se de que estamos criando avisos que serão exibidos somente quando necessário.
Para adicionar o módulo Woo Notice, clique para adicionar um novo módulo Woo Notice abaixo do módulo de título da postagem.
Tipo e plano de fundo da página de avisos do WooCommerce
Em seguida, atualize o Tipo de Página e a Cor de Fundo do Aviso do WooCommerce da seguinte forma:
- Tipo de página: Página de finalização da compra
- Cor de fundo: rgba(153,158,117,0.1)
IMPORTANTE: Certifique-se de selecionar a Página de Finalização da Compra como Tipo de Página para que as notificações do WooCommerce funcionem corretamente.
Texto do título do aviso do Woo
Na aba Design, atualize o estilo do texto do título da seguinte forma:
- Fonte do título: Roboto
- Peso da fonte do título: Médio
- Cor do texto do título: #fff
- Tamanho do texto do título: 14px
- Altura da linha do título: 1,8em
Em seguida, selecione a guia "Link" e atualize a cor do texto do link do título:
- Cor do texto do link: #999e75
Texto do corpo do aviso do Woo
Após o título, atualize o corpo do texto da seguinte forma:
- Fonte do corpo do texto: Roboto
- Cor do texto do corpo: #fff
- Altura da linha do corpo: 1,8em
Em seguida, selecione a aba de links e atualize o texto do link:
- Fonte do link: Negrito
- Cor do texto do link: #999e75
Etiquetas de campo de aviso do Woo
Os avisos da página de finalização da compra incluem campos e rótulos de campos para itens como um formulário de login e um código de cupom. Para editar o estilo dos rótulos desses campos, atualize o seguinte:
- Cor do indicador de campo obrigatório: #fff
- Fonte da etiqueta do campo: Roboto
- Fonte da etiqueta do campo: Negrito
Campos de notificação do Woo
Em seguida, atualize as opções de estilo dos campos da seguinte forma:
- Cor de espaço reservado: #fff
- Cor de fundo dos campos: transparente
- Cor do texto dos campos: #fff
- Cor do texto em foco nos campos: #fff
- Espaçamento entre campos: 12px superior, 12px inferior
- Largura da borda dos campos: 1px
- Cor da borda dos campos: rgba(255,255,255,0.32)
Botão de notificação do Woo
- Usar estilos personalizados para o botão: SIM
- Tamanho do texto do botão: 14px
- Cor do texto do botão: #fff
- Cor de fundo do botão: #999e75
- Largura da borda do botão: 1px
- Cor da borda do botão: #999e75
- Raio da borda do botão: 0px
- Espaçamento entre letras nos botões: 1px
- Fonte do botão: Roboto
- Peso da fonte do botão: Negrito
- Estilo da fonte do botão: TT
- Espaçamento entre botões: 12px superior, 12px inferior, 24px esquerda, 24px direita
Formulário de notificação do Woo
Cada um dos formulários de notificação pode ser estilizado no grupo de opções "Formulário". Para adicionar uma borda clara aos formulários, atualize o seguinte:
- Forma com cantos arredondados: 0px
- Largura da borda do formulário: 1px
- Cor da borda do formulário: rgba(255,255,255,0.32)
Sombra da caixa de avisos Woo
Para dar à barra de notificações do WooCommerce um design semelhante a uma borda superior, atualize as opções de box-shadow da seguinte forma:
- Sombra da caixa: veja a captura de tela
- Sombra horizontal na caixa: 0px
- Sombra vertical da caixa: 3px
- Cor da sombra: #999e75
Desenvolvendo o módulo de faturamento do WooCheckout
Agora que o título da página e os avisos estão no lugar, estamos prontos para adicionar o conteúdo de faturamento do Woo Checkout, outro elemento fundamental da página de finalização da compra.
Antes de adicionarmos o conteúdo de faturamento, crie uma nova linha com uma estrutura de colunas de três quintos por dois quintos.
Na coluna 1, adicione um módulo de faturamento do Woo Checkout.
Texto do título de cobrança do Woo Checkout
Podemos direcionar o texto do título personalizando as opções de texto do título.
Abra a janela modal de configurações de faturamento do Woo Checkout e, na aba Design, atualize o seguinte:
- Fonte do título: DM Serif Display
- Cor do texto do título: #fff
- Tamanho do texto do título: 30px (desktop), 24px (tablet), 18px (celular)
- Altura da linha do título: 1,4em
Campo de faturamento e rótulos de campo do Woo Checkout
Assim como o módulo de Avisos, este módulo também oferece opções para estilizar os campos e seus rótulos. Como queremos que todos os campos e seus rótulos sejam iguais em toda a página, podemos copiar os estilos de campos e rótulos já criados no módulo de Avisos e colá-los no módulo de Faturamento do WooCheckout.
Eis como fazer:
- Abra as configurações do Módulo de Notificações na parte superior da página.
- Clique com o botão direito do mouse no grupo de opções Rótulos de Campo, na guia Design.
- Selecione “Copiar estilos de rótulos de campo” no menu de contexto (clique com o botão direito do mouse).
Com o estilo copiado, abra o menu "Mais configurações" na barra de menu superior do módulo Woo Checkout Billing. Em seguida, selecione "Colar estilos de rótulos de campo" no menu.
Podemos repetir o mesmo processo para copiar também os estilos de campo.
Eis como fazer:
- Abra as configurações do Módulo de Notificações na parte superior da página.
- Clique com o botão direito do mouse no grupo de opções Campo, na guia Design.
- Selecione “Copiar estilos de campo” no menu de contexto (clique com o botão direito do mouse).
Com o estilo copiado, abra o menu "Mais configurações" na barra de menu superior do módulo Woo Checkout Billing. Em seguida, selecione "Colar estilos de campo" no menu.
Aviso do Formulário de Cobrança do Woo Checkout
O aviso do formulário exibe dinamicamente quaisquer notificações ou erros que possam surgir durante o preenchimento do formulário. Para estilizar o aviso do formulário, abra as configurações de faturamento do Woo Checkout e atualize o seguinte:
- Cor de fundo do formulário de aviso: #e0816b
- Aviso do formulário - Espaçamento: 8px superior, 8px inferior
- Aviso de formulário Fonte: Roboto
- Tamanho do texto do aviso do formulário: 14px
Espaçamento e borda da fatura do Woo Checkout
Para finalizar o design, vamos adicionar um pouco de espaçamento e uma borda leve ao módulo, como segue:
- Espaçamento interno: 16px superior, 16px inferior, 16px esquerda, 16px direita
- Largura da borda: 1px
- Cor da borda: rgba(255,255,255,0.1)
Criando as informações de envio e de saída do WooCheckout
Os próximos elementos-chave que precisamos para criar o modelo da página de finalização da compra são o módulo Woo Checkout Shipping e o módulo Woo Checkout Information. O módulo Woo Checkout Shipping exibe o formulário necessário para inserir as informações de envio antes de concluir a compra. Já o módulo Woo Checkout Information exibe um formulário que permite aos usuários inserir informações adicionais antes de finalizar a compra.
Adicionar módulo de frete do WooCheckout
Para este layout, adicione um novo módulo de Envio do Woo Checkout diretamente abaixo do módulo de Cobrança do Woo Checkout.
Adicionar módulo de frete do WooCheckout
Na seção "Módulo de Envio do Woo Checkout", adicione um módulo "Informações do Woo Checkout".
Personalizando os módulos de Envio e Informações do Woo Checkout
Como ambos os módulos do WooCommerce (Finalizar Compra - Envio e Finalizar Compra - Informações) precisam corresponder ao design do módulo WooCommerce - Faturamento, podemos copiar os estilos necessários para cada um deles.
Copiar e colar os estilos de texto do título
Vamos começar com os estilos de texto do título. Abra as configurações do módulo Woo Checkout Billing e copie os estilos de texto do título usando o menu de contexto (clique com o botão direito do mouse).
Em seguida, use o recurso de seleção múltipla para selecionar os módulos Woo Checkout Shipping e Woo Checkout Information. Depois, cole os estilos de texto do título em um dos módulos selecionados.
Copiar e colar os estilos dos rótulos dos campos
Repita o mesmo processo para copiar e colar também os estilos dos rótulos dos campos.
Abra as configurações do módulo Woo Checkout Billing e copie os estilos de rótulos de campo usando o menu de contexto (clique com o botão direito do mouse).
Em seguida, use o recurso de seleção múltipla para selecionar os módulos Woo Checkout Shipping e Woo Checkout Information. Depois, cole os estilos de rótulos de campo em um dos módulos selecionados.
Copiar e colar os estilos dos campos
Repita o mesmo processo para copiar e colar também os estilos dos campos.
Abra as configurações do módulo Woo Checkout Billing e copie os estilos dos campos usando o menu de contexto (clique com o botão direito do mouse).
Em seguida, use o recurso de seleção múltipla para selecionar os módulos Woo Checkout Shipping e Woo Checkout Information. Depois, cole os estilos de campo em um dos módulos selecionados.
Copiar e colar o preenchimento
Repita o mesmo processo para copiar e colar também o espaçamento interno.
Abra as configurações do módulo Woo Checkout Billing e copie o espaçamento interno usando o menu de contexto (clique com o botão direito do mouse).
Em seguida, use o recurso de seleção múltipla para selecionar os módulos Woo Checkout Shipping e Woo Checkout Information e cole o preenchimento em um dos módulos selecionados.
Copiar e colar a borda
Repita o mesmo processo para copiar e colar a borda também.
Abra as configurações do módulo Woo Checkout Billing e copie a borda usando o menu de contexto (clique com o botão direito do mouse).
Em seguida, use o recurso de seleção múltipla para selecionar os módulos Woo Checkout Shipping e Woo Checkout Information e cole os estilos de borda em um dos módulos selecionados.
Criando o módulo de detalhes do checkout do WooCommerce
Agora que o conteúdo com as informações de envio e adicionais está pronto, podemos adicionar os detalhes da página de finalização de compra do WooCommerce. Este é outro elemento fundamental da página de finalização de compra, que exibe os detalhes do pedido. Inclui a lista de produtos, os subtotais e o valor total da compra. Também mostra quaisquer descontos de cupom aplicados, que podem ser removidos por meio de um link.
Para adicionar detalhes de finalização da compra, coloque um novo módulo "Detalhes de Finalização de Compra do WooCommerce" na coluna 2 da mesma linha.
Detalhes do Checkout do WooCommerce Título Texto
Na janela de configurações de detalhes do WooCheckout, acesse a aba Design e atualize o texto do título da seguinte forma:
- Fonte do título: DM Serif Display
- Peso da fonte do título: Negrito
- Cor do texto do título: #fff
- Tamanho do texto do título: 24px (desktop), 22px (tablet), 18px (celular)
- Altura da linha do título: 1,4em
Detalhes do Checkout do WooCommerce Título Texto
Na janela de configurações de detalhes do WooCheckout, acesse a aba Design e atualize o texto do título da seguinte forma:
- Fonte do título: DM Serif Display
- Peso da fonte do título: Negrito
- Cor do texto do título: #fff
- Tamanho do texto do título: 24px (desktop), 22px (tablet), 18px (celular)
- Altura da linha do título: 1,4em
Detalhes do Checkout do WooCommerce Título Texto
Na janela de configurações de detalhes do WooCheckout, acesse a aba Design e atualize o texto do título da seguinte forma:
- Fonte do título: DM Serif Display
- Peso da fonte do título: Negrito
- Cor do texto do título: #fff
- Tamanho do texto do título: 24px (desktop), 22px (tablet), 18px (celular)
- Altura da linha do título: 1,4em
Rótulo da coluna Detalhes do Checkout do WooCommerce
Para formatar os rótulos das colunas, atualize o seguinte:
- Fonte da etiqueta da coluna: Roboto
- Peso da fonte do rótulo da coluna: Negrito
- Cor do texto da etiqueta da coluna: rgba(255,255,255,0.32)
Detalhes do Checkout do WooCommerce - Texto do Corpo
Para formatar o texto do corpo que se refere aos itens em cada coluna da lista, atualize o seguinte:
- Fonte do corpo do texto: Roboto
- Cor do texto do corpo: #fff
Na aba "Link", atualize a cor do texto do link:
- Cor do texto do link: #e0816b
Célula da tabela de detalhes do checkout do WooCommerce
Para formatar as células da tabela, atualize o seguinte:
- Espaçamento entre células da tabela: 0px à esquerda
- Estilo da borda da célula da tabela: nenhum
Isso alinha o conteúdo das células da tabela à esquerda e remove completamente a borda da célula.
Detalhes do Woo Checkout: Preenchimento e Borda
Para manter a consistência do design do módulo com os demais, atualize o preenchimento e a borda da seguinte forma:
- Espaçamento interno: 16px superior, 16px inferior, 16px esquerda, 16px direita
- Largura da borda: 1px
- Cor da borda: rgba(255,255,255,0.1)
Desenvolvendo o módulo de pagamento do WooCheckout
Agora que o conteúdo com as informações de finalização da compra está completo, podemos adicionar o conteúdo de pagamento do WooCheckout. Este é o último elemento essencial da página de finalização da compra. Ele inclui botões de opção clicáveis para alternar entre diferentes opções de pagamento, além do botão principal de finalização da compra. Também inclui avisos de formulário integrados.
Para adicionar o conteúdo de pagamento no checkout, adicione um novo módulo de Pagamento do Woo Checkout na coluna 2, abaixo dos detalhes do checkout.
Plano de fundo de pagamento do Woo Checkout
Abra as configurações de pagamento do Woo Checkout e defina o fundo do módulo como transparente:
- Cor de fundo: transparente
Texto do corpo do pagamento do Woo Checkout
Em seguida, atualize o estilo do corpo do texto da seguinte forma:
- Fonte do corpo do texto: Roboto
Na aba de links, atualize a cor do texto do link:
- Cor do texto do link: #999e75
Botões de opção de pagamento do Woo Checkout
Em seguida, atualize o estilo dos botões de opção da seguinte forma:
- Cor do texto do botão de opção: #fff
- Fonte dos botões de rádio: Roboto
- Fonte do botão de opção: Negrito
Dicas de pagamento do Woo Checkout
A dica de ferramenta é a caixa de texto que aparece quando um botão de opção está selecionado.
Vamos atualizar os estilos das dicas de ferramentas da seguinte forma:
- Cor de fundo da dica de ferramenta: transparente
- Margem da dica de ferramenta: -10px superior, 17px esquerda
- Fonte da dica de ferramenta: Roboto
Aviso do formulário de pagamento do Woo Checkout
Como o módulo de Pagamento do Woo Checkout compartilha a mesma opção de Aviso de Formulário, podemos copiar os estilos de aviso de formulário existentes do módulo de Faturamento do Woo Checkout e colá-los no módulo de Pagamento do Woo Checkout.
Botão de pagamento do Woo Checkout
Para estilizar o botão de finalização de compra do módulo de pagamento Woo Checkout, copie os estilos do botão do módulo Woo Notice.
Em seguida, cole os estilos dos botões no módulo de pagamento do Woo Checkout.
Preenchimento e borda de pagamento do Woo Checkout
Para finalizar o design, adicione preenchimento e borda da seguinte forma:
- Espaçamento interno: 16px superior, 16px inferior, 16px esquerda, 16px direita
- Cantos arredondados: 0px
- Largura da borda: 1px
- Cor da borda: rgba(255,255,255,0.1)
O resultado
Veja como está nossa página de finalização de compra agora!
Adicione mais conteúdo conforme necessário.
Neste ponto, temos todos os elementos essenciais para o nosso modelo de página de finalização de compra. Mas você não precisa parar por aqui. Você pode adicionar qualquer conteúdo que desejar à página, conforme necessário.
Para a nossa demonstração em destaque deste modelo de página de finalização de compra, incluímos uma barra lateral fixa com alguns links de navegação personalizados.
Criando um modelo personalizado para a página de finalização da compra
Se você deseja criar um modelo de página de finalização de compra, pode usar o Construtor de Temas para criar um layout de modelo de página de finalização de compra, assim como fizemos com o modelo de página de finalização de compra. No entanto, como já temos um layout de página criado a partir deste tutorial, podemos simplesmente adicionar esse layout a um modelo de página de finalização de compra.
Salvar layout de página do WooCommerce na biblioteca Divi
Antes de podermos adicionar o layout da página de finalização de compra a um modelo de página de finalização de compra, primeiro precisamos salvar o layout da página na Biblioteca Divi.
Para isso, abra o menu de configurações do Divi Builder na parte inferior da página de finalização da compra. Clique no ícone Adicionar à Biblioteca , dê um nome ao layout e clique em Salvar na Biblioteca .
Criar novo modelo de página de finalização de compra
Após salvar o layout da página de finalização da compra na biblioteca, estamos prontos para criar um novo modelo de página de finalização da compra.
Eis como fazer:
- Acesse o painel do WordPress e navegue até Divi > Construtor de Temas.
- Em seguida, clique no ícone de adição (+) dentro da área cinza vazia para adicionar um novo modelo.
- Na janela modal de Configurações do Modelo, na aba “Usar em”, selecione Finalizar Compra na lista Páginas do WooCommerce.
- Por fim, clique em Criar modelo.
Adicione o layout da página de finalização de compra ao modelo de finalização de compra.
Após criar o novo modelo de Checkout, clique na área “Adicionar Corpo Personalizado” do modelo. Na lista pop-up, selecione Adicionar da Biblioteca .
Na janela pop-up "Carregar da Biblioteca", na aba "Seus Layouts Salvos", selecione o layout da página de finalização de compra que você salvou na biblioteca.
Após a conclusão, o modelo de finalização de compra estará disponível no Construtor de Temas. Para editar o modelo, clique no ícone de edição na área do corpo do modelo.
Resultado final
Vamos conferir o resultado final do nosso modelo de página de finalização de compra.
0 Comentários