BIBLIOTECA DE SNIPPETS

Abrir os termos do checkout num novo separador — WooCommerce e Elementor

Abre a página dos termos num novo separador no checkout clássico ou no widget Checkout do Elementor, mantendo o formulário de compra aberto.

Antes de começares

Dificuldade: Intermédio
Requisitos: WooCommerce com página de termos configurada. Checkout clássico ou widget Checkout do Elementor Pro. O link deve conservar a classe woocommerce-terms-and-conditions-link.
Local de aplicação: JavaScript no rodapé, apenas na página de checkout. No Elementor Pro, usa Código personalizado com localização no fim do body e condição para o checkout; envolve o código em <script> e </script> nesse editor.

Como aplicar

Confirma que a página de termos está selecionada nas definições avançadas do WooCommerce e que o link do checkout aponta para essa página.
Adiciona o JavaScript no rodapé, com carregamento limitado ao checkout. Num campo que aceita JavaScript puro, cola sem as tags script.
No Elementor Pro, podes usar Código personalizado no fim do body; nesse editor, envolve o código em tags script e aplica a condição apenas ao checkout.
Guarda, limpa a cache relevante e abre o checkout fora do editor. O código usa um evento delegado, pelo que não precisa de voltar a ser instalado após a atualização AJAX do checkout.

Como confirmar o resultado

Clica no link: os termos devem abrir num novo separador e os dados do checkout devem permanecer preenchidos.
Altera a morada ou o método de envio e volta a testar o link após a atualização do checkout.
Usa Tab e Enter para abrir o link. Confirma também que aceitar os termos continua obrigatório.
Testa separadamente no checkout clássico e no widget Checkout do Elementor; não é necessário ter os dois na mesma página.

Compatibilidade e limites

Destina-se ao checkout clássico e ao widget Checkout do Elementor quando usam o link padrão do WooCommerce. Não cobre o bloco Checkout do WooCommerce nem checkouts de terceiros que alterem o HTML. A confirmação em ambos os ambientes ainda está pendente.

Como desfazer

Desativa ou remove apenas este snippet e limpa a cache relevante. No caso do CSS, remove as regras adicionadas.

Referências técnicas

Código do snippet

Faz uma cópia de segurança e testa num ambiente de desenvolvimento antes de aplicar no site principal. Consulta o local de aplicação indicado neste guia.

(function () {
  if (window.edTermsNewTabReady) return;
  window.edTermsNewTabReady = true;

  document.addEventListener('click', function (event) {
    if (!(event.target instanceof Element)) return;
    const link = event.target.closest('a.woocommerce-terms-and-conditions-link');
    if (!link || !link.closest('form.checkout, .elementor-widget-woocommerce-checkout')) return;
    const href = link.getAttribute('href');
    if (!href || href.trim().startsWith('#')) return;
    const url = new URL(href, window.location.href);
    if (!['http:', 'https:'].includes(url.protocol)) return;

    link.target = '_blank';
    link.relList.add('noopener', 'noreferrer');
    // Bloqueia a abertura inline do WooCommerce, preservando a navegação do link.
    event.stopImmediatePropagation();
  }, true);
})();