Ouvrir les liens d’un tableau de produits WooCommerce dans le même onglet

Dans un tableau de produits WooCommerce, les liens s’ouvrent par défaut dans un nouvel onglet : le titre du produit, la miniature, les liens de catégories et d’étiquettes, ainsi que les boutons Panier (Shop cart) et Validation de la commande (Checkout) du panier du tableau. L’idée est de garder la page du tableau ouverte pendant que le client consulte un produit, mais beaucoup de boutiques veulent que chaque lien s’ouvre dans le même onglet, ou qu’il n’y ait aucun lien. Les réglages du tableau n’offrent aucun interrupteur pour la cible des liens. Les titres de produits se modifient avec un filtre ; les autres liens demandent quelques lignes de JavaScript. Les deux sont détaillés ci-dessous, ainsi que les options qui suppriment complètement les liens.

Quels liens s’ouvrent dans un nouvel onglet, et ce qui les contrôle

Le nouvel onglet vient de l’attribut HTML target="_blank". Le plugin l’ajoute à différents endroits ; la solution dépend donc du lien :

Ne modifiez pas les fichiers du plugin pour changer ces attributs. Chaque mise à jour les remplace, et les liens s’ouvrent de nouveau dans un nouvel onglet sans prévenir. Le filtre et le script ci-dessous se placent dans votre thème ou dans un plugin de snippets, et survivent aux mises à jour.

Ouvrir les liens des titres de produits dans le même onglet

Le lien du titre prend sa cible dans le filtre woot_link_target_type. Retournez _self et les titres s’ouvrent dans le même onglet dans tous les tableaux, y compris la fenêtre contextuelle du panier et [woot_cart] :

/*
 * Products tables: open product title links in the same tab.
 * Child theme functions.php or a code snippets plugin.
 */
add_filter('woot_link_target_type', function ($target) {
    return '_self';
});

La nouvelle cible est écrite dans les lignes au moment où le serveur les construit : rechargez donc la page en contournant le cache du navigateur (ou videz le cache des pages) avant de tester. Les lignes de variation de la fenêtre contextuelle des variations affichent le titre en texte brut ; il n’y a donc aucun lien à modifier à cet endroit.

Miniatures, boutons du panier et de validation de la commande : un petit script

Les autres cibles sont écrites par le code du plugin, en partie dans le navigateur une fois le tableau ou le panier dessiné. Plutôt que de les réécrire une par une après chaque nouveau dessin, le script ci-dessous attend un clic sur un lien à l’intérieur d’un tableau de produits, d’une fenêtre contextuelle de tableau ou du panier du tableau, et retire target="_blank" de ce lien juste avant que le navigateur ne le suive. Il fonctionne pour les lignes chargées plus tard par la pagination, le tri, le filtrage ou Charger plus (load more), et pour les fenêtres contextuelles ouvertes à tout moment.

/*
 * Products tables: open links from tables, table popups and the table cart
 * in the same tab. Add it to the footer of the site: a JavaScript snippet in
 * a code snippets plugin, or the footer scripts field of your theme.
 */
document.addEventListener('click', function (e) {
    var link = e.target.closest('a[target="_blank"]');

    if (link && link.closest('.woot-data-table, .woot-dynamic-popup-wrapper, .woot-woocommerce-cart, .woot-cart-shortcode')) {
        link.removeAttribute('target');
    }
}, true);

Quelques remarques sur ce script :

• Il écoute pendant la phase de capture (le true à la fin) : il s’exécute donc avant que le clic n’atteigne le lien, et le navigateur ouvre le lien avec la cible déjà retirée.
• Ctrl+clic, Cmd+clic et le bouton central de la souris ouvrent toujours un nouvel onglet lorsque le client le souhaite.
• Il agit aussi sur le bouton des produits externes. Pour garder les liens d’affiliation dans un nouvel onglet, remplacez le premier sélecteur par 'a[target="_blank"]:not(.woot-add-to-cart-btn)'.
• Si vous l’utilisez, vous n’avez pas besoin du filtre PHP ci-dessus, même si garder les deux ne pose aucun problème.

Si vous voulez seulement supprimer les boutons du panier plutôt que les modifier, l’onglet Réglages (Settings) de WOOT propose Masquer le bouton du panier (Hide shop cart button) et Masquer le bouton de validation de la commande (Hide checkout button), qui retirent Panier (Shop cart) et Validation de la commande (Checkout) du panneau du panier du tableau et de sa fenêtre contextuelle.

Désactiver plutôt les liens produit dans le tableau

Parfois, le tableau constitue toute l’expérience d’achat et les pages produit ne doivent pas être accessibles depuis celui-ci. Les titres, les miniatures et les termes peuvent être affichés sans liens. Le réglage à utiliser dépend du type de tableau : un tableau enregistré ([woot id=...]) ou un tableau sans ID, comme un simple [woot], la fenêtre contextuelle du panier ou [woot_cart].

Dans un tableau enregistré

• Titre : ouvrez le tableau, allez dans l’onglet Colonnes (Columns), cliquez sur le bouton modifier (edit) (crayon) de la colonne Titre et activez Afficher en texte (Display as text).
• Miniature : dans la même fenêtre pour la colonne Miniature, activez Sans lien (No Link).
• Catégories, étiquettes, attributs : chaque colonne de taxonomie a son propre interrupteur Afficher en texte (Display as text).
• Par page : les attributs de shortcode post_title_as_text=1 et disable_link_on_thumb=1 font la même chose pour un emplacement du tableau et priment sur les réglages des colonnes.

Dans la fenêtre contextuelle du panier, [woot_cart] et les tableaux sans ID

Ces tableaux n’ont pas de réglages de colonnes ; deux filtres les contrôlent donc. woot_disable_all_links_on_titles transforme les titres en texte, et woot_disable_all_links_on_thumbs supprime le lien de la miniature :

/*
 * Products tables: no product links in the cart popup, [woot_cart]
 * and tables without an ID. Child theme functions.php or a code snippets plugin.
 */
add_filter('woot_disable_all_links_on_titles', '__return_true');
add_filter('woot_disable_all_links_on_thumbs', '__return_true');

Le filtre des miniatures définit aussi la valeur par défaut des tableaux enregistrés : il s’applique à tout tableau dont l’interrupteur Sans lien (No Link) de la colonne Miniature n’a jamais été modifié. Une fois cet interrupteur enregistré, activé ou désactivé, le réglage de la colonne l’emporte. Le filtre des titres n’affecte pas du tout les tableaux enregistrés ; utilisez-y Afficher en texte (Display as text). C’est aussi la réponse propre pour les liens produit dans la fenêtre contextuelle du panier, que les interrupteurs de colonne n’atteignent pas : aucun contournement CSS avec pointer-events n’est nécessaire.

Vérifier le résultat

• Videz le cache des pages et rechargez la page du tableau dans une fenêtre de navigation privée.
• Faites un clic droit sur un titre, choisissez Inspecter (Inspect) et regardez le lien : après le filtre PHP, il affiche target="_self".
• Cliquez sur une miniature, sur un lien de catégorie et, dans la fenêtre contextuelle du panier, sur Panier (Shop cart) et Validation de la commande (Checkout) : chacun doit s’ouvrir dans le même onglet lorsque le script est actif.
• Si un lien s’ouvre encore dans un nouvel onglet, affichez le code source de la page et vérifiez que le script figure bien sur la page du tableau (les plugins de snippets peuvent limiter un snippet à certaines pages), puis cherchez des erreurs dans l’onglet Console des outils de développement.

La page du shortcode [woot_cart] décrit plus en détail le panier du tableau. Si un lien de votre tableau ignore encore ces réglages, posez la question sur le forum de support WOOT en indiquant de quelle colonne ou de quel bouton il s’agit.