Tudo o que você precisa saber sobre os módulos de produtos WooCommerce da Divi 5

A compatibilidade com o WooCommerce foi expandida para o Divi 5, oferecendo controle total sobre as páginas do produto sem depender dos modelos internos da WooCommerce. Os módulos de produtos WooCommerce recém-integrados permitem que você projete layouts envolventes e amigáveis ​​que correspondam à sua marca e ajudem a aumentar as vendas, ao mesmo tempo em que aproveita todos os recursos do Divi 5, incluindo o Flexbox, para criar páginas de produtos com o controle de layout moderno.

Neste post, abordaremos os principais recursos dos módulos e mostraremos como usá -los no seu próximo site de comércio eletrônico Divi 5. Vamos mergulhar.

O que são módulos de produtos WooCommerce?

Os módulos de produtos Woo são elementos de conteúdo especializados no Divi 5, projetados para personalizar as páginas de produtos e categorias para lojas movidas a Woo. Esses módulos substituem os modelos de WooCommerce que são padrão com o plug -in, permitindo que você crie layouts personalizáveis. Ao contrário desses modelos tradicionais, os módulos da Divi 5 permitem liberdade criativa, mantendo a compatibilidade com a funcionalidade principal da Woocommerce.

A liberação de 17 módulos de WooCommerce no Divi 5 marca um marco significativo. Esses módulos, que cobrem todos os aspectos de design de páginas de produtos e categorias, não estão mais no modo herdado, o que significa que todos são totalmente otimizados para a arquitetura moderna do Divi 5. Com essa transição para uma base mais eficiente, o Divi 5 tem melhor desempenho, é mais escalável e é compatível com o futuro do WordPress.

Os 8 módulos Woo restantes, focados nas páginas de carrinho e checkout, devem ser lançados em breve.

Principais características dos módulos de produtos WooCommerce da Divi 5

Vamos analisar os principais recursos que você pode esperar agora que os módulos de produtos WooCommerce foram integrados ao Divi 5.

Conjunto de módulos abrangentes

O primeiro lote dos módulos de produtos WooCommerce da Divi 5 inclui ferramentas projetadas para lidar com um aspecto específico do design do produto e da página da categoria. Esses módulos são:

• Woo Breadbumbs: exibe trilhas de migalhas de navegação para ajudar os usuários a navegar facilmente na loja.
• Aviso Woo: mostra mensagens do sistema como atualizações, erros ou confirmações do carrinho.
• Woo Product Adicionar ao carrinho: renderiza um botão Adicionar ao carrinho com controles de quantidade opcional.
• Descrição do produto Woo: produz a descrição principal do produto de formação longa.
• Galeria de produtos Woo: exibe imagens adicionais do produto em formatos de grade ou controle deslizante.
• Imagens do produto Woo: mostra a imagem principal do produto ou uma galeria de imagens.
• Woo Informações do produto: exibe detalhes do produto como peso, dimensões ou atributos.
• META PRODUTO WOO: mostra SKU, categorias e tags de produto.
• Preço do produto Woo: exibe o preço do produto, incluindo preços de venda.
• Classificação do produto Woo: mostra a classificação de estrelas médias e a contagem de revisões.
• Revisões de produtos Woo: permite que os clientes visualizem e enviem análises de produtos.
• Woo Stock do produto: indica a disponibilidade do produto e os níveis de estoque.
• Guias do produto WOO: Exibe as guias padrão do produto para descrição, informações adicionais e revisões.
• Título do produto Woo: produz o nome do produto como um título personalizável.
• Woo Product Upsell: Promove os produtos Upsell para incentivar compras de maior valor.
• Produtos Woo: cria grades de produtos personalizáveis ​​para páginas de categoria.
• Produtos relacionados ao WOO: exibe produtos relacionados com base em categorias ou tags.

Juntos, esses módulos fornecem tudo o que você precisa para criar páginas de produtos e categorias, desde trilhas de navegação de navegação a displays de produtos dinâmicos.

Liberdade criativa

Os módulos de produto WooCommerce da Divi 5 5 são usuários gratuitos das restrições dos modelos de woocommerce padrão. Com esses módulos, você pode controlar completamente o layout, a estrutura e o design das páginas do produto, criando experiências únicas.

Os módulos suportam conteúdo dinâmico, o que significa que extraem os dados do produto diretamente do WooCommerce, garantindo atualizações em tempo real para preços, níveis de estoque e descrições. Isso permite criar páginas que acionem o engajamento e as conversões sem exigir plugins de terceiros ou código personalizado.

Opções de personalização

Cada módulo possui extensas configurações de design, todas gerenciáveis ​​no Visual Builder. Você pode personalizar elementos como galerias de produtos, crachás de venda, botões e muito mais com opções para tipografia, cores, espaçamento e animações.

Por exemplo, você pode ajustar o layout do módulo da Galeria de Produtos Woo para exibir imagens em um controle deslizante ou grade, estilizar o produto Woo Adicionar ao carrinho com cores personalizadas e efeitos de pairar ou ajustar o módulo de classificação do produto Woo para alinhar as classificações de estrelas perfeitamente com o seu design.

Essas configurações permitem criar páginas de lojas coesas e de marca com facilidade.

Modelos dinâmicos com construtor de temas

O construtor de temas do Divi 5 permite adotar todo o potencial dos módulos de produtos WooCommerce, permitindo que você crie modelos globais para páginas de produtos e categorias. Com o Theme Builder, você pode projetar um único modelo que se aplique a todos os produtos e categorias em sua loja, garantindo uma aparência consistente e coesa.

Builder de loop para conteúdo dinâmico de woocommerce

O Divi 5 Loop Builder oferece uma maneira alternativa de criar conteúdo dinâmico de woo. Com o Loop Builder, você pode consultar produtos WooCommerce e projetar loops de produtos flexíveis usando qualquer elemento Divi, criando layouts, listas e carrosséis que vão além da estrutura fixa dos módulos de produtos dedicados. Para layouts de produto único, use os módulos de produtos Woo; Para coleções e arquivos de produtos, use o construtor de loops.

Como usar os módulos de produtos WooCommerce da Divi 5

Esta seção o levará a criar uma página de produto no construtor de temas da Divi 5 usando os novos módulos de produtos WooCommerce.

Crie um novo modelo de construtor de temas

Navegue até o Divi> Theme Builder no painel do WordPress. Clique em + Adicionar novo modelo .

Clique em Criar novo modelo quando a caixa de diálogo aparecer.

Em seguida, precisaremos atribuir nosso modelo aos nossos produtos. Em produtos , selecione todos os produtos para atribuir o modelo.

Clique em Criar modelo para atribuí -lo.

Clique em Adicionar corpo personalizado . Isso nos permitirá construir o corpo do nosso modelo de página do produto.

Escolha Construir corpo personalizado quando a caixa de diálogo aparecer.

Construa o modelo de produto

Quando o construtor de temas for lançado, você pode criar um modelo a partir do zero, escolher um layout pré -fabricado ou construir com IA. Selecionaremos o Build do zero para este tutorial.

Clique no ícone Green + para adicionar uma nova linha.

Quando as opções aparecerem , escolha a linha de duas colunas. Novas linhas que você adiciona a qualquer página ou modelo Divi 5 usarão Flebox por padrão. O sistema de layout do Flexbox da Divi 5 oferece mais controle sobre a aparência das páginas de seus produtos do que nunca, incluindo a alteração da maneira como seus módulos de produtos WooCommerce se empilham em diferentes tamanhos de tela.

Role para baixo para revelar a opção Woo Product Modules . Depois de clicar, você terá 17 módulos Divi 5 Woo e 8 módulos Legacy (Divi 4).

Adicione o módulo de imagens do produto woo

Encontre e selecione o módulo de imagens do produto woo e adicione -o à primeira coluna.

Esta postagem é selecionada por padrão no campo do produto na guia Conteúdo . Se você deseja criar o modelo usando um produto existente, escolha -o no menu suspenso. Esta é uma ótima maneira de visualizar como será o seu modelo ao criá -lo. Lembre -se de trocá -lo de volta a este post antes da defesa final.

Expanda o menu suspenso Elements para revelar as configurações. Aqui, você pode controlar quais imagens são exibidas no módulo, incluindo a imagem em destaque, as imagens da galeria e o crachá de venda.

Clique no menu suspenso da imagem na guia Design para revelar as configurações. Aqui, você pode forçar a imagem a ocupar todo o espaço disponível (Force Fullwidth), adicionar uma borda, sombra da caixa, ajustar o espaçamento ou adicionar filtros.

Você também pode estilizar o crachá de venda atribuindo uma cor de fundo, texto, bordas e muito mais.

Adicione o módulo de título do produto woo

Na 2ª coluna, clique em Módulos de produtos Woo e role para selecionar o módulo de título do produto Woo .

Use o menu suspenso no campo do produto da guia Conteúdo para selecionar um produto e visualizar como ele ficará no modelo.

Em seguida, navegue até a guia Design do módulo e expanda o menu suspenso de texto do título . Aqui, você pode atribuir uma fonte e estilizar o cabeçalho como deseja.

Adicione o módulo de preço do produto woo

Sob o título do produto, clique para adicionar um novo módulo. Selecione os módulos do produto Woo e role para selecionar o módulo de preço do produto Woo .

Na guia Design , você pode estilizar todos os aspectos do preço do produto, incluindo texto, texto de venda, novo texto de preço e muito mais.

Adicione o módulo de classificação do produto woo

Em seguida, adicionaremos o módulo de classificação do produto Woo no módulo Woo Price.

Na guia Conteúdo em Elementos , você pode optar por mostrar ou ocultar a classificação de estrelas e as avaliações de clientes.

Na guia Design , o menu suspenso Layout permite escolher como exibir a classificação em estrela. Os elementos podem ser exibidos em linha ou empilhados.

Outras opções de estilo incluem atribuir uma cor, tamanho do texto e espaçamento de cartas para as estrelas e opções de estilo para o texto de classificação.

Adicione o módulo de descrição do produto woo

Sob o módulo Woo Star Classing, clique para adicionar um novo módulo Woo. Desta vez, selecionaremos o módulo de descrição do produto WOO . Na guia Conteúdo , escolha qual descrição a ser exibida (descrição ou descrição curta).

Na guia Design , você pode estilizar a descrição com opções de fonte, peso, estilo, alinhamento, cor, tamanho e muito mais.

Adicione o produto Woo Adicionar ao módulo de carrinho

Em seguida, adicionaremos o produto woo adicionar ao módulo de carrinho . Isso permitirá que seus clientes adicionem o produto aos carrinhos e escolha quaisquer variações atribuídas ao produto.

Os elementos alternados na guia Conteúdo permitem mostrar ou ocultar o campo Quantidade e o estoque disponível. Nota rápida: para que a quantidade de estoque seja exibida, você deve verificar o estoque no próprio produto Woo.

Você pode estilizar os rótulos de campo, o texto, os menus suspensos (para variações) e o botão para corresponder à sua marca na guia Design .

Continue adicionando módulos, como o Module do Produto Woo para exibir números e categorias de SKU.

Você também pode adicionar o módulo Woo Product Tabs para exibir uma descrição, revisões e informações adicionais sobre o seu produto.

Para obter o máximo alcance, você pode exibir uma série de produtos relacionados em seu modelo de produto para incentivar os visitantes do seu site a explorar produtos adicionais em sua loja, aumentando a chance de uma conversão.

Salvando o modelo

Depois de terminar de adicionar módulos, faça as alterações adicionais necessárias e salve o modelo clicando no botão Salvar no canto superior direito do construtor de temas.

Em seguida, clique no botão de saída para retornar ao painel do construtor de temas.

De volta ao painel do construtor de temas, clique em Salvar alterações para salvar o modelo e aplicá -lo aos seus produtos Woo.

Como você pode ver, criar um modelo de produto com os módulos de produtos Woo da Divi 5 é um processo simples. Não abordaremos todos os módulos deste tutorial, mas, usando todos eles, você pode criar páginas impressionantes de produtos ou categorias que mantenham seus visitantes envolvidos.

Baixe os arquivos

Baixe gratuitamente

Junte -se ao boletim informativo Divi e enviaremos um e -mail para você uma cópia do pacote de layout da página de destino do Divi Ultimate, além de toneladas de outros recursos, dicas e truques incríveis e gratuitos. Siga adiante e você será um mestre em divi em pouco tempo. Se você já está inscrito, basta digitar seu endereço de e -mail abaixo e clique em Download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Verifique seu endereço de e -mail para confirmar sua assinatura e ter acesso a pacotes semanais de layout semanal gratuitos!

O que vem a seguir para a integração do WooCommerce da Divi 5?

O segundo lote de módulos WooCommerce, com foco em páginas de carrinho e checkout, será lançado nas próximas semanas, encerrando a integração com o WooCommerce. Essas adições permitirão que os usuários personalizem totalmente todo o funil de comércio eletrônico, desde a navegação do produto até a compra. O beta público do Divi 5 Refinará ainda mais esses recursos, incorporando feedback do usuário e correções adicionais de bugs para garantir a estabilidade.

Além da compatibilidade e integração do WooCommerce, o Divi 5 continua a evoluir com recursos recentes como o módulo de carrossel do grupo para criar controles deslizantes de produtos dinâmicos, o módulo Lottie para adicionar animações leves e um novo sistema de layout do Flexbox para controle de layout aprimorado. Essas adições complementam os módulos Woo, oferecendo possibilidades ainda mais criativas para sites de comércio eletrônico.

Experimente os módulos de produtos Woo da Divi 5 hoje

Os módulos de produtos Woo da Divi 5 permitem criar páginas cativantes de produtos e categoria com flexibilidade e criatividade incomparáveis. Os módulos oferecem uma mistura de liberdade criativa, integração dinâmica de conteúdo e desempenho, tudo dentro de uma interface intuitiva. De galerias de produtos personalizáveis ​​a layouts personalizados através do construtor de temas, o Divi 5 facilita a criação de páginas de lojas de alta conversão.

Você está pronto para mergulhar no divi 5? Faça o download do mais recente Divi 5 Public Alpha para explorar esses módulos e ver como eles podem transformar seu site WooCommerce. Adoraríamos ouvir seus pensamentos. Compartilhe seus comentários nos comentários ou conecte -se conosco em nossos canais de mídia social.