Tabla de productos WooCommerce en el móvil: vista compacta y diseño adaptable

Una tabla de productos WooCommerce con ocho columnas no cabe en un teléfono en vertical: o el texto se comprime en columnas estrechas, o el cliente se desplaza hacia los lados para encontrar el precio y el botón del carrito. Para una tabla de productos WooCommerce en el móvil, WOOT ofrece tres herramientas: una vista compacta que convierte cada fila en una tarjeta, el ocultado de columnas por ancho de pantalla o para dispositivos táctiles, y el desplazamiento lateral para lo que quede. A continuación se explica cómo funciona cada una y los pequeños detalles que hacen que la tabla resulte agradable de usar en un teléfono.

Vista compacta: cada producto se convierte en una tarjeta

Define Ancho de la vista compacta (Compact view width) en la pestaña Opciones (Options) de la tabla. Cuando la ventana del navegador tiene ese ancho en píxeles o menos, la tabla cambia a la vista compacta:

• la fila de cabecera y la fila de pie con los títulos de las columnas se ocultan;
• cada producto pasa a ser una celda de ancho completo en la que los campos se apilan en el orden de las columnas;
• cada campo empieza con el título de su columna, por ejemplo Precio: $24.00, de modo que el cliente sigue sabiendo qué es el valor.

El valor por defecto -1 desactiva la vista compacta. 600 cubre los teléfonos en vertical, y 800 o 900 también las tabletas pequeñas. El plugin compara el ancho de la ventana del navegador, no el tipo de dispositivo, así que puedes probarlo en un ordenador estrechando la ventana: la tabla se reconstruye tras cambiar el tamaño y, en un teléfono, tras girarlo. En un shortcode: [woot id=12 compact_view_width=600].

Tres consecuencias de la cabecera oculta:

• Los clientes no pueden ordenar haciendo clic en los títulos de las columnas, así que activa Mostrar desplegable de ordenación (Show Sorting Dropdown) y ofrece algunas ordenaciones útiles (precio, nombre, popularidad); más información en ordenación de la tabla de productos.
• Seleccionar todos los productos (Select all products) y añadir seleccionados (add selected) están en la cabecera de la columna Carrito (Cart), por lo que no están disponibles en la vista compacta; cada tarjeta conserva su propio botón Añadir al carrito (Add to cart). Las casillas de las filas no tienen utilidad ahí, y este CSS las oculta solo en la vista compacta (las tarjetas se construyen con elementos div, la vista normal con celdas td):

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

• El orden de las columnas pasa a ser el orden de las líneas en cada tarjeta: pon primero el título, el precio y la columna Carrito (Cart), y al final los textos largos, en la pestaña Columnas (Columns).

Ocultar los títulos de las columnas dentro de las tarjetas

En algunos campos, el título que precede al valor solo ocupa espacio: una miniatura no necesita «Miniatura:», y los botones del carrito se explican solos. Cada título es un span con la clase table23_td_cell_title y existe solo en la vista compacta, así que basta una regla CSS sencilla. Ponla en Apariencia → Personalizar → CSS adicional:

/* 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;
}

Cada campo de una tarjeta tiene la clase table23_td_ más su clave de campo: table23_td_post_title, table23_td_price, table23_td_sku, o la clave meta de un campo de la pestaña Meta. En la pestaña CSS personalizado (Custom CSS) de la propia tabla, omite .woot-data-table y escribe un selector por regla: el plugin antepone el ID de la tabla a cada regla. Puede que veas reglas que empiezan por .table23-in-compact-mode; el plugin añade esa clase solo después de cambiar el tamaño de la ventana, así que esas reglas pueden no aplicarse en la primera vista en un teléfono, mientras que las reglas de arriba funcionan desde el principio.

Ocultar columnas en pantallas pequeñas o dispositivos táctiles

Menos columnas ayudan en ambas vistas. Hay dos ajustes, y responden a preguntas distintas.

Para la mayoría de las tiendas, Ocultar en pantalla pequeña (Hide on small screen) es la mejor opción: el SKU, la galería, el peso o una columna de atributo larga pueden desaparecer por debajo de 600 u 800 píxeles mientras el cliente conserva el título, el precio y el carrito. Una tabla construida solo con atributos de shortcode usa hide_on_mobile para el comportamiento en dispositivos táctiles, con una lista de claves de campo separadas por comas: [woot columns="thumbnail,post_title,sku,price,add_to_cart" hide_on_mobile="sku"].

Lo que siga siendo más ancho que la pantalla se puede desplazar hacia los lados: en los dispositivos táctiles, el área de la tabla se desplaza horizontalmente, y en las demás pantallas las tablas anchas reciben una barra de desplazamiento horizontal. Es aceptable para una columna de más, pero no para cinco, y para eso está la vista compacta.

Vista previa de imagen al pasar el cursor y pantallas táctiles

La opción Vista previa al pasar el cursor (Preview on hover) de la columna Miniatura (Thumbnail) (el ancho de la vista previa en píxeles, 400 por defecto) muestra una imagen grande cuando el ratón está sobre una miniatura. Los teléfonos no tienen hover, así que el plugin no asocia la vista previa cuando WordPress reconoce un dispositivo móvil (la comprobación wp_is_mobile(): teléfonos, tabletas Android, Kindle y similares). Un iPad que solicita sitios web de escritorio, algo que Safari en iPadOS hace por defecto, no se reconoce como móvil, y ahí un toque puede abrir la vista previa.

Para desactivar la vista previa en todas partes, define Vista previa al pasar el cursor (Preview on hover) en -1, o añade preview_image_width=-1 al shortcode. Las miniaturas también enlazan a la página del producto en una pestaña nueva; para mantener a los visitantes en la misma pestaña, consulta abrir los enlaces de producto en la misma pestaña, o activa la opción Sin enlace (No Link) de la miniatura si la imagen no debe ser un enlace.

Cabecera flotante, filtro y otros detalles en pantallas pequeñas

• Cabecera flotante. Usar cabecera flotante (Use flying header) mantiene visibles los títulos de las columnas mientras el cliente se desplaza por una tabla larga. En la vista compacta se desactiva automáticamente, porque no hay cabecera. Si choca con el menú fijo de tu tema en tabletas, desactívala, o usa use_flow_header=0 en el shortcode.
• El filtro. Los desplegables se colocan uno junto a otro, de al menos 150 píxeles cada uno, mientras que los deslizadores de rango y los campos de texto ocupan todo el ancho, así que en un teléfono un filtro con varios elementos empuja la tabla hacia abajo. Ocultar formulario de filtro (Hide filter form) en Opciones pliega el filtro tras un botón de mostrar/ocultar, lo que deja los productos en la primera pantalla.
• Filas por página. Diez productos ya son un desplazamiento largo en forma de tarjetas. Mantén Por página por defecto (Per page default) en un valor bajo, o usa Usar botón cargar más (Use load more button), que añade productos debajo en lugar de paginar.
• Cantidad y carrito. El campo de cantidad y el botón Añadir al carrito (Add to cart) funcionan igual en una tarjeta; da a la columna Carrito (Cart) una posición temprana para que los clientes no tengan que pasar por delante del precio para encontrarla.

Pruébalo en un teléfono

• Estrecha la ventana del navegador de escritorio por debajo de Ancho de la vista compacta (Compact view width) y comprueba que la tabla se convierte en tarjetas.
• En el modo de dispositivo del navegador, recarga la página después de elegir un teléfono: la compatibilidad táctil y el user agent se leen al cargar la página, por lo que el interruptor Móvil (Mobile) y la vista previa de imagen cambian solo tras una recarga.
• Abre la página en un teléfono real, sin haber iniciado sesión y tras vaciar la caché de páginas, y comprueba el modo vertical y el horizontal.
• Mira la primera tarjeta: si el orden de las líneas no te convence, cambia el orden de las columnas, no el CSS.

Si la tabla sigue sin ajustarse a la pantalla o las tarjetas se ven rotas con tu tema, abre un tema en el foro de soporte de WOOT con el enlace de la página y el modelo de teléfono, y lo revisaremos.