Como mostrar conteúdo apenas para usuários autorizados

Ao criar uma loja WooCommerce, você pode querer definir restrições de conteúdo que ocultarão determinados preços de produtos no front-end e os mostrarão apenas a usuários autorizados. É aí que a Visibilidade Dinâmica se torna útil.  

Ativar módulo de visibilidade dinâmica

Vá para JetEngine> painel JetEngine e ative a alternância de Visibilidade Dinâmica para Widgets e Seções se estiver inativa. Em seguida, pressione o botão “ Salvar ”.

Definir configurações de visibilidade dinâmica

Agora é hora de decidir quais preços de produtos você deseja tornar invisíveis para usuários não logados. Decidimos ocultar os preços com desconto de usuários não autorizados para que eles precisem fazer login para ver o preço real do produto.

No nosso caso, todos os produtos à venda recebem uma etiqueta de produto exclusiva chamada “Venda”. Você pode verificar novamente as tags do produto no diretório Produtos > Tags . Se não houver categorias ou tags especiais, crie-as e atribua-as a determinados produtos WooCommerce.

Quanto às restrições de visibilidade, podemos aplicá-las tanto a uma única página de produto quanto a todos os produtos da página de arquivo da Loja. Vamos começar ocultando o preço único do produto. 

Siga o caminho Crocoblock > Woo Page Builder e localize o modelo de produto único. Clique no botão “ Editar com Elementor ”.

Na janela recém-aberta, você verá um layout de produto único. Clique com o botão direito no widget Preço Único e pressione “ Duplicar ”. É necessário ter dois campos de preço, pois aplicaremos condições de visibilidade diferentes a cada um. 

Agora, clique com o botão esquerdo em um dos campos de preço. Na guia Avançado , desdobre o menu suspenso Visibilidade dinâmica e ative a alternância. Defina o tipo de condição de visibilidade como “Mostrar elemento se a condição for atendida” e adicione duas condições abaixo. O primeiro será “Usuário logado” e o segundo será “Post tem termos”. Nesta última condição, selecione a opção “Tags de produto” no controle Taxonomia e digite o slug da tag da etapa anterior no campo Valor . Defina a relação como “AND”.

Vamos passar para o próximo campo de preço. Clique com o botão esquerdo e repita o procedimento descrito acima. Mas desta vez, você define o tipo de condição de visibilidade como “Ocultar elemento se a condição for atendida” e adiciona uma condição, que é “Publicar com termos”. Mais uma vez, escolha a opção “Tags de produto” no controle Taxonomia e digite o mesmo slug no campo Valor . 

Feito isso, pressione o botão “ Atualizar ”. 

Agora, você precisa aplicar as mesmas condições de visibilidade aos produtos apresentados na página Loja. Vá para Crocoblock > Woo Page Builder e abra o item de arquivo correspondente no Elementor. No nosso caso, este é o modelo Shop – Grid .

Primeiro, duplique o widget Preço Único e depois configure as regras de visibilidade para ambos os campos como já fez anteriormente. Esta é a aparência do primeiro campo de preço:

Aqui estão as condições de visibilidade aplicadas ao segundo campo de preço:

Agora, repita o mesmo procedimento para o modelo de arquivo Loja – Lista . Não se esqueça de atualizar/salvar todas as alterações. Confira o resultado final no front-end. Como você pode ver, os preços ficam ocultos para usuários não logados nos modelos da página Loja e na página de produto único.

Mas como o usuário saberá por que não há preços para determinados itens? Sugerimos que indique que precisam de autorização no site para ver esses preços. A maneira mais rápida de fazer isso é por meio de um pop-up. 

Primeiro de tudo, crie um novo pop-up . Para economizar tempo, escolhemos o layout pop-up desejado na biblioteca e editamos o texto no Elementor – isso servirá. 

Vá para o diretório Crocoblock > Woo Page Builder e “ Edite com Elementor ” os modelos onde você já definiu regras de visibilidade dinâmica para preços: 

• Loja – Lista item de arquivo;
• Loja – Item de arquivo da grade;
• Produto único.

Encontre o widget Lista de ícones na barra lateral do Elementor e arraste e solte-o na página. Na guia Conteúdo , você pode adicionar um ícone adequado e modificar o texto do item da lista.
Clique na guia Avançado e desdobre o menu suspenso JetPopup . No campo Pop-up anexado , selecione o pop-up que você criou recentemente. Em seguida, defina o tipo de gatilho preferido .

Agora, mude para o menu suspenso Visibilidade dinâmica e aplique as seguintes condições de visibilidade:

• Habilite a alternância;
• “Mostrar elemento se condição atendida” no campo Tipo de condição de visibilidade ;
• Adicione a condição “Usuário não logado” na seção Condições ;
• Adicione a condição “Post tem termos”;
• Defina o Valor como “venda”;
• Selecione a opção “Tags de produto” na lista suspensa Taxonomia ;
• Defina a relação como “AND”.

Vá para o front end e veja como o pop-up funciona. 

O plugin JetEngine foi atualizado e agora permite usar Dynamic Visibility com os blocos do editor padrão do WordPress.

Selecione um bloco em Gutenberg. Haverá um ícone em forma de olho na barra de ferramentas na parte superior do bloco.

Depois de clicar nele, você verá uma janela pop-up com o botão Ativar .

Ative-o, mas primeiro certifique-se de que o tipo de condição de visibilidade esteja definido como “Mostrar elemento se a condição for atendida”.

Em seguida, clique no botão “ Adicionar novo item ” e escolha “Usuário logado” na lista suspensa Condição .

Atualize a página; o preço ficará oculto para usuários não autorizados no front-end.

Caso queira adicionar mais condições, basta seguir os passos descritos na primeira parte deste tutorial. A abordagem será a mesma.