Criar templates visuais com o Divi Theme Builder para o WooCommerce oferece flexibilidade de design, mas frequentemente gera inconsistências visuais em dispositivos móveis. Um dos problemas mais comuns em lojas virtuais é a quebra inadequada do layout na página de produto individual, especialmente o truncamento ou quebra de linha inadequada de textos em botões de ação (‘Adicionar ao Carrinho’, variações ou botões customizados).
Quando o botão sofre com o text wrapping indesejado, a legibilidade é prejudicada e a taxa de conversão sofre impacto direto. A seguir, analisamos as causas técnicas desse comportamento e as soluções definitivas no ecossistema WordPress.
O Problema: Conflitos de Flexbox e Larguras Fixas no Divi
O Divi utiliza módulos dedicados para renderizar elementos do WooCommerce, como o WooCommerce Cart Notice, Woo Product Gallery e Woo Add To Cart. No entanto, a estrutura CSS gerada pelo construtor aplica larguras percentuais e paddings internos que, combinados com as classes padrão do WooCommerce (.woocommerce div.product form.cart .button), podem forçar botões a colapsar horizontalmente em telas menores que 480px.
O resultado é o texto do botão quebrando em duas ou três linhas de forma assimétrica, desalinhando seletores de quantidade e botões de variação de produto.
Solução 1: Tratamento de Text Wrapping com CSS Personalizado
Para garantir que o texto do botão de compra não quebre de forma irregular em resoluções mobile, a regra CSS de controle de quebra e layout flexível deve ser aplicada diretamente às classes filhas do formulário de carrinho.
Em implementações que realizo para otimização de templates de checkout e produto, costumo aplicar uma padronização através de Flexbox no contêiner do formulário de compra:
css
/* Ajuste de responsividade para formulário de carrinho Divi/WooCommerce */
@media only screen and (max-width: 767px) {
.etpbwcaddto_cart form.cart {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 10px !important;
}
.et_pb_wc_add_to_cart form.cart .quantity {
margin-right: 0 !important;
}
.et_pb_wc_add_to_cart form.cart .single_add_to_cart_button {
flex: 1 1 auto !important;
white-space: nowrap !important;
text-overflow: ellipsis;
padding: 12px 20px !important;
font-size: 15px !important;
}
}
A propriedade white-space: nowrap; impede que o texto do botão seja fracionado em múltiplas linhas, enquanto flex: 1 1 auto; permite que o botão ocupe o espaço restante da linha de forma harmoniosa com o seletor de quantidade.
Solução 2: Ajuste Estrutural no Divi Theme Builder
Além do CSS, a estrutura do template de produto no Theme Builder precisa de parametrizações específicas:
- Ajuste de Breakpoints de Colunas: No módulo que encapsula os detalhes da compra, configure as linhas para empilhar em 100% de largura no modo Tablet e Smartphone, removendo margens negativas comuns em layouts desktop.
- Definição de Tipografia Fluida: Configure o tamanho de fonte do botão (
Button Font Size) nas configurações do módulo Divi especificamente para a visualização móvel, evitando herança de tamanhos exagerados do desktop. - Padding e Gutter Zero: Reduza o gutter da linha que contém o módulo de compra para 1 ou 2 em telas menores, evitando que margens externas comprimam os elementos internos.
Processo de Depuração e Homologação
Para garantir que a correção cubra todos os cenários:
- Teste em Produtos Simples e Variáveis: Produtos com atributos (cor, tamanho) adicionam selects adicionais ao DOM, que exigem regras de quebra em bloco (
width: 100%) no mobile. - Validação com Inspetor de Elementos: Teste em larguras comuns de viewport (320px, 375px e 414px) para certificar que nenhum elemento ultrapasse a largura máxima da janela (
overflow-x: hidden).
Otimização Profissional para Lojas WooCommerce
Templates construídos via builders visuais demandam refinamento contínuo para evitar perdas na experiência do usuário móvel. Se a sua loja virtual apresenta falhas de alinhamento, botões ilegíveis ou instabilidades visuais no Divi, entre em contato para avaliarmos uma consultoria técnica especializada na otimização do seu WooCommerce.
