Como criar uma página de conta WooCommerce com uma seção de produto em destaque para usuários conectados

Os Módulos Woo da Divi podem ser úteis para mostrar uma seção de produtos em destaque em qualquer lugar do seu site, incluindo outras páginas do WooCommerce, como a Página da Conta. Isso torna mais fácil fazer ofertas especiais aos usuários, mesmo quando eles estão navegando nas informações de sua conta.

Neste tutorial, vamos projetar uma página de conta WooCommerce inteira do zero, completa com uma seção útil de produtos em destaque usando os módulos Woo. Incluiremos até mesmo alguns trechos de CSS que mostrarão a seção do produto em destaque apenas quando o usuário estiver conectado.

Vamos começar.

Espiada

Aqui está uma rápida olhada na página da conta que iremos construir neste tutorial.

Aqui está a página da conta antes de um usuário efetuar login.

Esta é a página da conta após o login do usuário. Como você pode ver, a seção do produto em destaque é exibida sob o conteúdo da página da conta.

Baixe o layout da página da conta do produto em destaque GRATUITAMENTE

Para colocar suas mãos no layout da página da conta deste tutorial, você primeiro precisará baixá-lo usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe os arquivos

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

DOWNLOAD

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

Inscreva-se no nosso canal no Youtube

Para importar o layout para sua página, simplesmente extraia o arquivo zip e arraste o arquivo json para o Divi Builder.

Vamos para o tutorial, vamos?

O que você precisa para começar

Para começar, você precisará fazer o seguinte:

1. Se ainda não o fez, instale e ative o Divi Theme instalado (ou o Divi Builder Plugin se não estiver usando o Divi Theme).
2. Instale e ative o plugin WooCommerce. Se for a primeira vez que configura o WooCommerce, você precisará executar o assistente de configuração básica para preparar sua loja. Uma vez feito isso, você está pronto para adicionar seus novos produtos.
3. Crie alguns produtos, se ainda não tiver nenhum. Para mais informações sobre como adicionar um novo produto, confira este tutorial.

Depois disso, você estará pronto para começar a projetar uma seção de produto em destaque no Divi.

Parte 1: Projetando a página da conta

Habilite o Divi Builder na página da conta WooCommerce

Assim que o WooCommerce for instalado e ativado, a página da conta do WooCommerce será criada automaticamente para você. Para editar a página da conta, você pode encontrá-la no Painel do WordPress acessando Páginas> Todas as páginas. Em seguida, passe o mouse sobre a página Conta e clique em “editar”.

Em seguida, você notará o Shortcode WooCommerce que está sendo usado para gerar o conteúdo da página da conta. Vá em frente e clique para usar o Divi Builder.

O shortcode será transportado e colocado em um módulo de texto. Agora clique para usar o Divi Builder no Front End.

As Configurações da Seção

A primeira coisa que faremos é adicionar um pano de fundo à seção. Abra as configurações da seção e atualize o seguinte:

• Cor do gradiente de fundo à esquerda: # ad52b7
• Cor do gradiente de fundo à direita: rgba (255,255,255,0,66)
• Direção do gradiente: 90 graus
• Posição inicial: 33%
• Posição final: 0%
• Colocar gradiente acima da imagem de fundo: SIM

Em seguida, adicione uma imagem de plano de fundo com pelo menos 1920 px de largura.

Adicionar cabeçalho usando um novo módulo de texto

Para adicionar o cabeçalho da página principal (h1), adicione um novo módulo de texto clicando no ícone de mais cinza sob o módulo de texto atual que contém o Shortcode WooCommerce.

Em seguida, arraste-o acima do módulo de texto do código de acesso WooCommerce e atualize as configurações da seguinte maneira:

Conteúdo do corpo:

<h1>My Account</h1>

Na guia H1, atualize os seguintes estilos de texto de título:

• Fonte do cabeçalho: Prompt
• Peso da fonte do cabeçalho: negrito
• Cor do texto do título: # 3f214f
• Tamanho do texto do título: 90 px (desktop), 56 px (tablet), 36 px (telefone)
• Espaçamento entre letras do cabeçalho: 5px

Personalize o conteúdo do shortcode

Mesmo as informações da página da conta do woocommerce estão sendo geradas por um shortcode, ainda podemos direcionar alguns desses elementos usando as configurações do módulo de texto.

Abra as configurações do módulo de texto que contém o código de acesso e atualize o seguinte:

• Cor de fundo: rgba (255,255,255,0,9)

Na guia de texto do parágrafo, atualize o seguinte:

• Fonte do texto: Roboto
• Tamanho do texto do texto: 16px

Na guia Link, atualize o seguinte:

• Cor do texto do link: # ad52b7

Na guia da lista não ordenada, atualize o seguinte:

• Tamanho do texto da lista não ordenada: 26 px (desktop), 18 px (tablet)
• Espaçamento entre letras da lista não ordenada: 2px
• Altura da linha da lista não ordenada: 2em
• Recuo do item da lista não ordenado: 0,01 px

Mesmo que não possamos vê-lo agora, haverá um cabeçalho h2 no formulário de login sempre que um usuário visitar a página da conta sem estar conectado. Para direcionar esse cabeçalho h2, atualize o seguinte:

• Fonte do título 2: Roboto
• Tamanho do texto do título 2: 56px (desktop), 32px (tablet)

Em seguida, adicione um pouco de preenchimento ao redor do módulo de texto:

• Preenchimento: 3% superior, 3% inferior, 3% esquerdo, 3% direito

Finalmente, dê ao módulo de texto uma classe CSS personalizada.

• Classe CSS: custom-account-style

Com esta classe, podemos direcionar o módulo com algum CSS externo para dar alguns toques finais nos elementos de informações da conta que não pudemos direcionar com as configurações dos módulos de texto.

Adicionar CSS externo para definir o estilo de outros elementos de informação da conta

Como temos nossa classe CSS, podemos usar CSS externo para definir o estilo de outros elementos de informações de conta gerados pelo shortcode. Isso não é necessário se você deseja controlar esses elementos nas configurações do personalizador de temas. Por exemplo, a cor dos links e botões e fundos de notificação serão herdados da cor secundária que você selecionou nas Configurações do Customizador de Tema.

Para definir o estilo das cores de certos elementos diretamente para esta página, abra as configurações da página e adicione o seguinte CSS personalizado à página:

.custom-account-style .woocommerce-Button.button, .custom-account-style .woocommerce .woocommerce-form-login .woocommerce-form-login__submit {
    color: #ffffff!important;
    background-color: #9452b7;
    border-color: #9452b7;
}
.custom-account-style .woocommerce-Button.button:hover {
    background-color: #3f214f;
}

.custom-account-style .woocommerce .woocommerce-error, .custom-account-style .woocommerce .woocommerce-info, .custom-account-style .woocommerce .woocommerce-message {
   background-color: #3f214f;
}

Largura da linha

Depois que as informações do shortcode woocommerce do módulo de texto forem estilizadas, salve as configurações e abra as configurações de linha. Atualize a largura máxima da seguinte forma:

• Largura máxima: 1250 px

Parte 2: Projetando a seção de produtos em destaque

Agora que as informações da página principal da conta foram concluídas, podemos projetar a seção de produtos em destaque. É aqui que usaremos os módulos WooCommerce da Divi para obter informações sobre o produto de forma dinâmica. Em seguida, adicionaremos alguns trechos de CSS para mostrar o (s) produto (s) sempre que o usuário estiver logado.

Criando a Nova Seção e Linha

Para começar, crie uma nova seção regular.

Em seguida, adicione uma linha de uma coluna à seção.

Antes de adicionar um módulo, copie as configurações de seção e as configurações de linha usadas para o design da página de nossa conta acima e cole-as na nova seção e linha que acabamos de adicionar.

Adicionar Título com Módulo de Texto

Semelhante ao que fizemos para o cabeçalho principal da página, vamos criar um novo cabeçalho para a seção de produto em destaque. Para fazer isso, adicione um novo módulo de texto à linha de uma coluna e atualize o seguinte:

Conteúdo do corpo:

<h2>Special Product Offer</h2>

• Fonte do Título 2: Prompt
• Peso da fonte do cabeçalho 2: negrito
• Cor do texto do título 2: # 3f214f
• Tamanho do texto do título 2: 56px (desktop), 36px (tablet)
• Cabeçalho 2 espaçamento entre letras: 5 px

Adicionar segunda linha

Em seguida, adicione uma nova linha com uma estrutura de coluna 1/3 2/3.

Adicionar Módulo Woo Imagens

Na coluna da esquerda, adicione um módulo Woo Images.

Em seguida, selecione o produto que deseja apresentar na lista suspensa de produtos.

Em seguida, atualize o estilo do emblema de venda da seguinte maneira:

• Cor do emblema de venda: # f1be51
• Fonte do emblema de venda: Roboto
• Estilo de fonte do selo de venda: TT
• Distintivo de venda com espaçamento entre letras: 5 px
• Altura da linha do crachá de venda: 1,3em

Adicionar divisor

Na coluna à direita, adicione um módulo divisor e atualize as configurações da seguinte maneira:

• Cor da linha: #dddddd
• Peso do divisor: 3px
• Margem: 10px inferior

Adicionar Módulo de Título Woo

No módulo divisor, adicione um módulo de título Woo.

Em seguida, adicione o mesmo produto adicionado ao módulo woo images.

Em seguida, atualize as configurações de design da seguinte forma:

• Nível do título do título: H3
• Fonte do título: Roboto
• Tamanho do texto do título: 38px

Adicionar Módulo de Preço Woo

Em seguida, adicione um Módulo de Preço Woo com o mesmo produto.

Em seguida, atualize as configurações de design da seguinte forma:

• Fonte de preço: Roboto
• Cor do texto do preço: # ad52b7

Adicionar módulo de descrição Woo

No Módulo de Preço Woo, adicione um Módulo de Descrição Woo.

Em seguida, adicione o mesmo produto ao módulo de descrição woo.

Em seguida, atualize as configurações da seguinte forma:

• Cor de fundo: #eeeeee
• Preenchimento: 20px superior, 20px inferior, 20px à esquerda, 20px à direita

Adicione o módulo Adicionar ao carrinho

No Módulo de descrição Woo, adicione o Módulo Woo Adicionar ao carrinho e selecione o mesmo produto.

Em seguida, atualize as configurações da seguinte forma:

• Use estilos personalizados para botão: SIM
• Cor do texto do botão: #ffffff
• Cor de fundo do botão: # ad52b7

Atualize as configurações de linha

Em seguida, atualize as configurações de linha da seguinte forma:

• Cor de fundo (tablet): #ffffff
• Largura máxima: 1250 px
• Preenchimento (desktop): 0 px superior, 0 px inferior
• Preenchimento (tablet): 25px superior, 25px inferior, 25px à esquerda, 25px à direita

Em seguida, abra as configurações da coluna esquerda e atualize o seguinte:

• Cor de fundo: # 3f214f
• Preenchimento: 25px superior, 25px inferior, 25px à esquerda, 25px à direita

Adicionando mais produtos

O truque para adicionar mais produtos a esta seção em destaque é duplicar a linha que contém os elementos WooCommerce que compõem o produto em destaque. Em seguida, abra o módulo Woo Images para dentro da nova linha duplicada e clique para usar Find & Replace na opção Product.

Em seguida, use as opções localizar e substituir para substituir a seleção do produto por um novo produto de sua escolha. Certifique-se de substituir o produto para todas as opções de produto nesta linha. Em seguida, clique no botão Substituir.

Depois disso, todos os 5 módulos woo compartilharão automaticamente o mesmo novo produto.

Adicionar CSS ID

Para ocultar os usuários da seção de produto em destaque que não estão logados, precisamos adicionar uma classe CSS à seção de produto em destaque da seguinte maneira:

• Classe CSS: somente conectado

Adicionar CSS Externo

Depois que a classe CSS estiver no lugar, abra as configurações da página e adicione o seguinte CSS personalizado logo abaixo do nosso snippet CSS anterior.

.logged-in-only {
  display: none;
}
.logged-in .logged-in-only{
  display: block;
}

Este código irá ocultar a seção por padrão e, em seguida, mostrar a seção assim que um usuário fizer login no seu site WordPress.

Resultado final

Aqui está a página da conta antes de um usuário efetuar login.

Esta é a página da conta após o login do usuário.

Pensamentos finais

Ter uma seção de produtos em destaque para a página da conta do WooCommerce é uma ótima maneira de promover novas ofertas de produtos em um local segmentado em seu site. Divi torna mais fácil personalizar a página de uma conta WooCommerce com um design totalmente exclusivo em minutos. E os Módulos Woo da Divi tornam a criação de seções de produtos em destaque uma brisa. Além disso, ter os produtos apresentados apenas para usuários que estão logados agrega valor e incentiva ainda mais a oferta.

Esperamos que isso lhe dê um pouco de inspiração ao projetar sua próxima página de conta no Divi.

Para mais informações, aprenda mais dicas sobre como estilizar as páginas da conta no Divi. E não se esqueça de verificar a documentação completa sobre os Módulos Woo para descobrir ainda mais possibilidades.

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

Saúde!