Tableau de produits WooCommerce sur mobile : vue compacte et affichage adaptatif

Un tableau de produits WooCommerce de huit colonnes ne tient pas sur un téléphone tenu à la verticale : soit le texte est écrasé dans des colonnes étroites, soit le client fait défiler latéralement pour trouver le prix et le bouton du panier. Pour un tableau de produits WooCommerce sur mobile, WOOT propose trois outils : une vue compacte qui transforme chaque ligne en carte, le masquage des colonnes selon la largeur d’écran ou pour les appareils tactiles, et le défilement latéral pour ce qui reste. Voici le fonctionnement de chacun et les petits détails qui rendent le tableau agréable à utiliser sur un téléphone.

Vue compacte : chaque produit devient une carte

Définissez Largeur de la vue compacte (Compact view width) dans l’onglet Options du tableau. Lorsque la fenêtre du navigateur atteint cette largeur en pixels ou moins, le tableau passe en vue compacte :

• la ligne d’en-tête et la ligne de pied avec les titres des colonnes sont masquées ;
• chaque produit devient une cellule pleine largeur dans laquelle les champs sont empilés dans l’ordre des colonnes ;
• chaque champ commence par le titre de sa colonne, par exemple Prix : $24.00, afin que le client sache toujours ce que représente la valeur.

La valeur par défaut -1 désactive la vue compacte. 600 couvre les téléphones tenus à la verticale, 800 ou 900 également les petites tablettes. Le plugin compare la largeur de la fenêtre du navigateur, pas le type d’appareil ; vous pouvez donc l’essayer sur un ordinateur en rétrécissant la fenêtre : le tableau se reconstruit après un redimensionnement, et sur un téléphone après une rotation. Dans un shortcode : [woot id=12 compact_view_width=600].

Trois conséquences de l’en-tête masqué :

• Les clients ne peuvent pas trier en cliquant sur les titres de colonnes ; activez donc Afficher la liste déroulante de tri (Show Sorting Dropdown) et proposez quelques tris utiles (prix, nom, popularité) ; plus de détails dans le tri du tableau de produits.
• Sélectionner tous les produits (Select all products) et ajouter la sélection (add selected) se trouvent dans l’en-tête de la colonne Panier (Cart) ; ils ne sont donc pas disponibles en vue compacte, et chaque carte garde son propre bouton Ajouter au panier (Add to cart). Les cases à cocher des lignes n’y ont aucune utilité, et ce CSS les masque en vue compacte uniquement (les cartes sont construites avec des éléments div, la vue normale avec des cellules td) :

  .woot-data-table div.table23_td_add_to_cart .woot-checkmark-container {
      display: none;
  }

• L’ordre des colonnes devient l’ordre des lignes dans chaque carte : placez en premier le titre, le prix et la colonne Panier (Cart), et les textes longs en dernier, dans l’onglet Colonnes (Columns).

Masquer les titres de colonnes dans les cartes

Pour certains champs, le titre placé devant la valeur ne fait que prendre de la place : une miniature n’a pas besoin de « Miniature : », et les boutons du panier s’expliquent d’eux-mêmes. Chaque titre est un span avec la classe table23_td_cell_title, et il n’existe qu’en vue compacte ; une simple règle CSS suffit donc. Placez-la dans Apparence → Personnaliser → CSS additionnel :

/* WOOT compact view: hide the column titles of selected fields */
.woot-data-table .table23_td_thumbnail .table23_td_cell_title,
.woot-data-table .table23_td_add_to_cart .table23_td_cell_title {
    display: none;
}

/* or hide all of them */
.woot-data-table .table23_td_cell_title {
    display: none;
}

Chaque champ d’une carte a la classe table23_td_ suivie de sa clé de champ : table23_td_post_title, table23_td_price, table23_td_sku, ou la clé méta d’un champ de l’onglet Meta. Dans l’onglet CSS personnalisé (Custom CSS) propre au tableau, omettez .woot-data-table et écrivez un sélecteur par règle : le plugin place l’identifiant du tableau devant chaque règle. Vous verrez peut-être des règles commençant par .table23-in-compact-mode ; le plugin n’ajoute cette classe qu’après un redimensionnement de la fenêtre, de sorte que de telles règles peuvent manquer le premier affichage sur un téléphone, alors que les règles ci-dessus fonctionnent dès le départ.

Masquer des colonnes sur petit écran ou sur appareil tactile

Moins de colonnes aident dans les deux vues. Il existe deux réglages, qui répondent à des questions différentes.

Pour la plupart des boutiques, Masquer sur petit écran (Hide on small screen) est le bon choix : l’UGS, la galerie, le poids ou une longue colonne d’attributs peuvent disparaître sous 600 ou 800 pixels tandis que le client garde le titre, le prix et le panier. Un tableau construit uniquement à partir d’attributs de shortcode utilise hide_on_mobile pour le comportement sur appareils tactiles, avec une liste de clés de champs séparées par des virgules : [woot columns="thumbnail,post_title,sku,price,add_to_cart" hide_on_mobile="sku"].

Ce qui reste plus large que l’écran peut défiler latéralement : sur les appareils tactiles, la zone du tableau défile horizontalement, et sur les autres écrans, les tableaux larges reçoivent une barre de défilement horizontale. C’est acceptable pour une colonne en trop, mais pas pour cinq, et c’est à cela que sert la vue compacte.

Aperçu de l’image au survol et écrans tactiles

L’option Aperçu au survol (Preview on hover) de la colonne Miniature (Thumbnail) (la largeur de l’aperçu en pixels, 400 par défaut) affiche une grande image lorsque la souris passe sur une miniature. Les téléphones n’ont pas de survol ; le plugin n’attache donc pas l’aperçu lorsque WordPress reconnaît un appareil mobile (le contrôle wp_is_mobile() : téléphones, tablettes Android, Kindle et appareils similaires). Un iPad qui demande les sites en version ordinateur, ce que fait Safari sur iPadOS par défaut, n’est pas reconnu comme mobile, et un toucher peut y ouvrir l’aperçu.

Pour désactiver l’aperçu partout, réglez Aperçu au survol (Preview on hover) sur -1, ou ajoutez preview_image_width=-1 au shortcode. Les miniatures renvoient aussi vers la page produit dans un nouvel onglet ; pour garder les visiteurs dans le même onglet, voir ouvrir les liens produit dans le même onglet, ou activez l’option Sans lien (No Link) de la miniature si l’image ne doit pas être un lien du tout.

En-tête flottant, filtre et autres détails sur petit écran

• En-tête flottant. Utiliser l’en-tête flottant (Use flying header) garde les titres des colonnes visibles pendant que le client fait défiler un long tableau. En vue compacte, il est désactivé automatiquement, puisqu’il n’y a pas d’en-tête. S’il entre en conflit avec le menu fixe de votre thème sur tablette, désactivez-le, ou utilisez use_flow_header=0 dans le shortcode.
• Le filtre. Les listes déroulantes sont placées côte à côte, à raison d’au moins 150 pixels chacune, tandis que les curseurs de plage et les champs de texte occupent toute la largeur ; sur un téléphone, un filtre à plusieurs éléments repousse donc le tableau vers le bas. Masquer le formulaire de filtre (Hide filter form) dans les Options replie le filtre derrière un bouton afficher/masquer, ce qui laisse les produits sur le premier écran.
• Lignes par page. Dix produits sous forme de cartes représentent déjà un long défilement. Gardez Par page par défaut (Per page default) petit, ou utilisez Utiliser le bouton « Charger plus » (Use load more button), qui ajoute des produits en dessous au lieu de paginer.
• Quantité et panier. Le champ de quantité et le bouton Ajouter au panier (Add to cart) fonctionnent de la même façon dans une carte ; donnez à la colonne Panier (Cart) une position précoce afin que les clients n’aient pas à dépasser le prix en défilant pour la trouver.

Le tester sur un téléphone

• Réduisez la fenêtre du navigateur de bureau en dessous de Largeur de la vue compacte (Compact view width) et vérifiez que le tableau se transforme en cartes.
• Dans le mode appareil du navigateur, rechargez la page après avoir choisi un téléphone : la prise en charge tactile et le user agent sont lus au chargement de la page ; l’interrupteur Mobile et l’aperçu de l’image ne changent donc qu’après un rechargement.
• Ouvrez la page sur un vrai téléphone, déconnecté, après avoir vidé le cache de pages, et vérifiez en portrait et en paysage.
• Regardez la première carte : si l’ordre des lignes vous semble mauvais, changez l’ordre des colonnes, pas le CSS.

Si le tableau ne tient toujours pas à l’écran ou si les cartes s’affichent mal avec votre thème, ouvrez un sujet sur le forum de support WOOT avec le lien de la page et le modèle du téléphone, et nous vérifierons.