# Como corrigir o layout quebrado do Pricing Menu no Happy Addons

O layout quebrado do Pricing Menu no Happy Addons ocorre quando o CSS do widget não carrega na página, normalmente por cache do Elementor desatualizado, pela função On Demand Asset filtrando o estilo ou por um plugin de cache removendo os arquivos do Happy Addons.

## O que é layout quebrado do Pricing Menu no Happy Addons?

O Pricing Menu (Price Menu na documentação oficial) e um widget premium do Happy Addons para Elementor usado para exibir cardapios e listas de precos, com título, descrição, imagem, preco original e preco atual de cada item. Ele depende de uma folha de estilo própria do Happy Addons para posicionar imagem, alinhar o conteúdo e desenhar a caixa de cada item; quando esse CSS não chega ao navegador, o widget aparece como uma lista crua, sem colunas, sem espacamento e com a imagem fora do lugar.

O Happy Addons carrega o estilo dos widgets de duas maneiras: o CSS global do plugin e, quando ativado o recurso On Demand Asset, apenas o CSS e o JS dos widgets realmente usados na página. Quando o cache do Elementor fica defasado, quando o On Demand Asset não consegue mapear o widget na página, ou quando um plugin de cache e minificacao remove os arquivos do Happy Addons, o navegador renderiza o Pricing Menu sem as regras de layout. O conteúdo continua intacto no banco; o que falta e a folha de estilo que organiza esse conteúdo na tela.

## Como identificar

- O Pricing Menu aparece como uma lista de texto sem colunas, sem espacamento e sem a caixa de cada item, como se nenhum estilo tivesse sido aplicado.
- A imagem de cada item fica empilhada acima ou abaixo do texto em vez de alinhada ao lado, ignorando a posicao definida no painel do widget.
- O layout esta correto dentro do editor do Elementor, mas quebra no site publicado (frontend) ao visitar a página como visitante.
- No console do navegador (F12) aparece um erro de arquivo não encontrado para um CSS do Happy Addons, com a mensagem 'Failed to load resource: net::ERR_ABORTED 404'.
- O preco e o título aparecem desalinhados ou sobrepostos apenas no mobile, enquanto no desktop o widget parece quase correto.

**Antes de começar:** Antes de desativar plugins, trocar o tema ou inserir CSS e snippets em producao, faca um backup do site (arquivos e banco de dados) ou teste primeiro em um ambiente de staging, para poder reverter caso o layout quebre ainda mais.

## Como prevenir

- Sempre regenere os arquivos de CSS do Elementor depois de atualizar o Happy Addons ou editar o widget Pricing Menu, para evitar servir um estilo defasado.
- Configure exclusoes de cache e minificacao para os arquivos de CSS do Happy Addons no seu plugin de cache, evitando que o estilo do widget seja removido da página.
- Ao usar o recurso On Demand Asset, teste as páginas que inserem o Pricing Menu por template, popup ou bloco reutilizavel, garantindo que o CSS do widget realmente carregue.
- Mantenha o Happy Addons Free e Pro na mesma versão estavel e a licenca do Pro ativa, validando atualizações em staging antes de aplicar em producao.

Erros relacionados

- [Como corrigir o Happy Addons que não carrega no Elementor](https://full.services/wp-fixer/corrigir-happy-addons-nao-carrega-elementor/)
- [Como corrigir os estilos conflitantes entre Happy Addons e Astra Pro](https://full.services/wp-fixer/corrigir-conflito-estilos-happy-addons-astra-pro/)
- [Como corrigir o layout responsivo do widget Card no Happy Addons](https://full.services/wp-fixer/corrigir-card-layout-responsivo-happy-addons/)

## Causa

- O cache de CSS do Elementor esta desatualizado e ainda serve um arquivo antigo sem as regras do Pricing Menu, o que acontece tipicamente após atualizar o Happy Addons ou editar o widget.
- O recurso On Demand Asset do Happy Addons esta ativo e não incluiu o CSS do Pricing Menu na página, porque a documentação define que ele 'so carrega o CSS e o JS dos widgets em uso' e o widget foi inserido por template, shortcode ou bloco que o detector não reconhece.
- Um plugin de cache e minificacao (como WP Rocket ou Perfmatters) combinou ou removeu o arquivo de CSS do Happy Addons, ou serviu uma versão cacheada da página anterior a inclusão do widget.
- O Happy Addons Pro não esta ativo ou esta com a licenca expirada, e o Pricing Menu, que e um widget premium, deixa de carregar seus assets premium e renderiza sem estilo.
- Uma regra de CSS do tema ou de um tema filho (por exemplo Astra Pro) tem especificidade maior e sobrescreve o layout do widget, desalinhando imagem, preco e descrição mesmo com o CSS do Happy Addons presente.

## Como resolver

1. Regenere os arquivos de CSS do Elementor: A causa mais comum e um cache de estilo defasado. Em Elementor, use a opção de regenerar arquivos e dados para forcar o Elementor a reconstruir o CSS de todas as páginas, incluindo o estilo do Pricing Menu.

```
Painel WP -> Elementor -> Ferramentas -> aba Geral
Em 'Regenerar Arquivos e Dados', clique em 'Regenerar Arquivos'
```

2. Limpe o cache do plugin de cache e do servidor: Se você usa um plugin de cache ou minificacao, limpe todo o cache para que a página volte a servir o CSS atualizado do Happy Addons. Limpe também o cache da CDN ou do host se houver, pois eles podem reter a versão sem estilo.

```
Painel WP -> limpe o cache do seu plugin (ex.: WP Rocket -> Limpar Cache)
Desative temporariamente a minificacao e a combinacao de CSS para testar
Purgue o cache da CDN/host (ex.: Cloudflare -> Purge Everything)
```

3. Reveja o recurso On Demand Asset do Happy Addons: O On Demand Asset so carrega o CSS dos widgets que ele detecta na página. Se o Pricing Menu vem de um template, popup ou bloco reutilizavel, o detector pode não incluir o estilo. Desative o recurso para confirmar a causa; se o layout voltar, mantenha desativado nas páginas afetadas.

```
Painel WP -> Happy Addons -> Settings (Configurações)
Localize 'On Demand Asset' e desative-o
Recarregue a página do frontend e verifique o layout do widget
```

4. Confirme que o Happy Addons Pro esta ativo: O Pricing Menu e um widget premium. Verifique se o Happy Addons Pro esta instalado, ativo e com a licenca valida. Um Pro inativo ou com licenca expirada faz o widget renderizar sem os assets premium de estilo.

```
Painel WP -> Plugins -> confirme 'Happy Addons Pro' ativo
Painel WP -> Happy Addons -> verifique o status da licenca
```

5. Isole um conflito de CSS do tema: Se o CSS do Happy Addons já carrega mas o layout continua desalinhado, o tema pode estar sobrescrevendo o widget. Troque temporariamente para um tema padrão e recarregue a página; se o layout corrigir, o conflito esta no tema e você deve ajustar a especificidade com CSS adicional do Pricing Menu.

```
Painel WP -> Aparencia -> Temas -> ative um tema padrão (ex.: Hello Elementor)
Recarregue a página do frontend e compare o layout
Reative seu tema e use Painel WP -> Aparencia -> CSS Adicional para reforcar o estilo do widget
```


## Código

```php
<?php
// Forca o Happy Addons a sempre enfileirar o CSS dos widgets,
// ignorando o On Demand Asset na pagina onde o Pricing Menu quebra.
add_filter( 'happyaddons_optimize_css_load', '__return_false' );
add_filter( 'happyaddons_optimize_js_load', '__return_false' );

// Reforca a especificidade do layout do Pricing Menu contra o tema.
add_action( 'wp_head', 'full_pricing_menu_css_fix', 99 );
function full_pricing_menu_css_fix() {
    echo '<style id="full-ha-pricing-menu-fix">
    .ha-price-menu .ha-price-menu-item { display: flex; align-items: center; gap: 16px; }
    .ha-price-menu .ha-price-menu-thumb img { max-width: 80px; height: auto; }
    </style>';
}
```

## Perguntas frequentes

### Por que o Pricing Menu do Happy Addons aparece sem estilo no site

Quase sempre porque o CSS do widget não chegou ao navegador. As causas mais comuns são o cache de CSS do Elementor desatualizado, o recurso On Demand Asset que não incluiu o estilo, ou um plugin de cache que removeu o arquivo. Regenere os arquivos do Elementor e limpe o cache para restaurar o layout.

### O recurso On Demand Asset do Happy Addons pode quebrar o layout do widget

Sim. A documentação oficial define que ele so carrega o CSS e o JS dos widgets em uso na página. Quando o Pricing Menu e inserido por template, popup ou bloco reutilizavel, o detector pode não incluir o estilo. Desative o On Demand Asset para confirmar e, se o layout voltar, mantenha-o desligado nas páginas afetadas.

### Por que o layout do Pricing Menu funciona no editor mas quebra no site publicado

O editor do Elementor carrega todos os estilos para edição, mas o frontend depende do CSS gerado e do cache da página. Se o cache esta defasado ou o On Demand Asset omitiu o arquivo, o visitante recebe a página sem o estilo. Regenere os arquivos do Elementor e limpe o cache do site e da CDN.

### O Pricing Menu precisa do Happy Addons Pro para funcionar

Sim. O Price Menu e um widget premium listado nos Premium Widgets do Happy Addons e exige o Happy Addons Pro instalado e com licenca valida. Com o Pro inativo ou expirado, o widget perde os assets premium e renderiza sem o layout esperado.

### Como limpar o cache do Elementor para corrigir o widget

Va em Elementor, Ferramentas, aba Geral, e clique em Regenerar Arquivos na seção Regenerar Arquivos e Dados. Isso reconstroi o CSS de todas as páginas. Em seguida, limpe também o cache do seu plugin de cache e da CDN para servir o estilo atualizado.

### Por que a imagem do item fica fora do lugar no Pricing Menu

A posicao da imagem e controlada pelo CSS do widget e pelos ajustes de layout no painel, que definem tamanho, posicao da imagem e alinhamento do conteúdo. Sem o CSS do Happy Addons a imagem perde o posicionamento; com o CSS presente, revise os controles de imagem na aba de estilo do widget.

### Um plugin de cache pode estar removendo o CSS do Happy Addons

Sim. Plugins de cache e minificacao podem combinar ou remover o arquivo de CSS do Happy Addons, ou servir uma versão antiga da página. Adicione exclusoes para os arquivos do Happy Addons na configuração de minificacao e limpe o cache para confirmar.

### O tema pode sobrescrever o layout do Pricing Menu mesmo com o CSS carregado

Pode. Um tema ou tema filho com regras de maior especificidade sobrescreve o layout do widget. Troque para um tema padrão para isolar o conflito; se o layout corrigir, reforce o estilo do Pricing Menu com CSS adicional de maior especificidade.

**Fonte:** [Happy Addons — Price Menu Widget (documentacao oficial)](https://happyaddons.com/docs/happy-addons-for-elementor-pro/happy-effects-pro/price-menu/)