Mostrar variaciones como filas separadas en una tabla de productos WooCommerce

Para mostrar las variaciones como filas separadas en una tabla de productos WooCommerce, primero hay que saber qué lista la tabla por defecto: una fila por producto. Un producto variable recibe una sola fila y sus variaciones se abren en una ventana emergente desde el botón seleccionar [N] (select [N]). Según lo que necesites, hay tres formas de sortearlo: una tabla con todas las variaciones de un producto, una tabla limitada a una categoría con las variaciones a un clic, o una tabla específica que lista como filas las variaciones de muchos productos, configurada con un pequeño fragmento de código. Cada una se explica a continuación, con sus límites.

Por qué una tabla de productos WooCommerce muestra una fila por producto variable

En WooCommerce, un producto variable y sus variaciones son tipos de entrada distintos. El producto es un product, y cada variación (Rojo / L, Azul / M) es una entrada product_variation independiente que pertenece a él. Una variación tiene su propio precio, SKU, stock e imagen, pero no tiene categorías, etiquetas ni términos de atributo propios: estos permanecen en el producto padre, y la variación solo guarda qué valores de atributo representa.

La tabla [woot] consulta productos, igual que lo hace la página de la tienda. Por eso muestra el padre una sola vez, por eso su celda Precio (Price) muestra un rango de precios y por eso la columna Carrito (Cart) muestra seleccionar [N] (select [N]) en lugar de un botón Añadir al carrito (Add to cart). Ese botón, y el botón Var.[N] de la columna Variaciones (Variations), abren una ventana emergente que lista las variaciones como filas, cada una con su campo de cantidad y su propio botón Añadir al carrito (Add to cart). Cómo cambiar las columnas, la ordenación y la paginación de esa ventana se explica en personalizar la ventana emergente de variaciones.

Los plugins que muestran variaciones individuales en la tienda lo hacen modificando la consulta de la tienda de WooCommerce. La tabla ejecuta su propia consulta, así que esos plugins no le añaden variaciones.

Todas las variaciones de un producto como filas de tabla: [woot_variations]

El shortcode [woot_variations] imprime las variaciones de un producto variable como una tabla completa, directamente en la página en lugar de en una ventana emergente:

[woot_variations id=49]

id es el ID del producto variable, no el de una tabla. Cada variación es una fila con su título (el nombre del producto más sus valores de atributo, como Camiseta - Rojo, L), el precio, el stock y una celda de carrito con un campo de cantidad, una casilla y un botón Añadir al carrito (Add to cart). Las casillas funcionan junto con el enlace añadir seleccionados (add selected) de la cabecera de la columna del carrito, de modo que un comprador puede marcar varias variaciones, indicar cantidades y añadirlas al carrito con un solo clic. Eso convierte al shortcode en un buen formulario de pedido para productos con muchas tallas o colores.

• Columnas. Sin el atributo columns, la tabla usa WOOT → Ajustes (Settings) → Columnas de variaciones (Variations columns), la misma lista que la ventana emergente. Para definirlas solo en una tabla, usa el atributo: [woot_variations id=49 columns='thumbnail,post_title,sku,price,stock_quantity,add_to_cart'].
• Filas por página. Todas las variaciones se cargan de una vez y se paginan en el navegador, 10 por página por defecto. per_page=-1 las muestra todas y per_page_position='b' coloca la paginación debajo de la tabla (t, b, tb o none).
• Ordenación. Las filas se ordenan por título, de la A a la Z. orderby y order lo cambian, por ejemplo orderby='id' order='asc' para el orden en que se crearon las variaciones. Las filas se ordenan en el navegador según el contenido de esa columna, por lo que la columna id debe estar entre las columnas para que funcione.
• En la página de un solo producto. Omite id y el shortcode toma el producto de la página actual. Funciona en una plantilla de página de producto (Elementor, una plantilla de tema de bloques) o añadido mediante un hook, como se muestra en cómo insertar shortcodes en la página de un solo producto. En una página que no es de producto, sin id imprime WOOT: Set product id please in the shortcode attribute!.

Solo los atributos globales (creados en Productos → Atributos) se añaden al título de la variación y pueden mostrarse como columnas, como pa_size. Los valores de los atributos personalizados escritos directamente en un producto no aparecen.

Una tabla para una categoría, con las variaciones a un clic

A menudo, la petición que hay detrás de «mostrar todas las variaciones» es más concreta: una tabla por línea de producto, donde cada producto variable sea fácil de comprar. Crea una tabla, abre su pestaña Predefinición (Predefinition) y rellena Taxonomía incluida (Included taxonomy) con el ID de término de la categoría, por ejemplo product_cat:25 (varias categorías: product_cat:25,26). La tabla muestra entonces solo los productos de esa categoría, y los botones seleccionar [N] (select [N]) abren las variaciones de cada uno. La pregunta frecuente sobre una tabla distinta para cada categoría muestra la misma configuración repartida en varias páginas.

Para una categoría con solo unos pocos productos variables, la disposición más directa es una página con un [woot_variations] por producto, cada uno bajo su propio encabezado.

Variaciones de muchos productos como filas separadas

La tabla no tiene ningún interruptor que convierta cada producto en sus filas de variación. Se puede conseguir con el hook woot_wp_query_args, que recibe la consulta de una tabla antes de ejecutarse. El shortcode [woot_variations] funciona internamente de la misma manera: pide entradas del tipo product_variation. Crea una tabla aparte para esto, define sus columnas (Título (Title), SKU, Precio (Price), stock, Carrito (Cart) y las columnas de atributo que necesites) y añade:

/*
 * Products table #25 lists variations instead of products.
 * Child theme functions.php or a code snippets plugin.
 */
add_filter('woot_wp_query_args', function ($args, $table_id) {
    if ((int) $table_id !== 25) { // the ID of your variations table
        return $args;
    }

    // Variations have no categories: find the variable parent products first
    $tax_query = [
        [
            'taxonomy' => 'product_type',
            'field'    => 'slug',
            'terms'    => ['variable'],
        ],
        [
            'taxonomy' => 'product_cat',
            'field'    => 'slug',
            'terms'    => ['t-shirts'], // category slugs; remove this block for all categories
        ],
    ];

    $parent_ids = get_posts([
        'post_type'      => 'product',
        'post_status'    => 'publish',
        'posts_per_page' => -1,
        'fields'         => 'ids',
        'tax_query'      => $tax_query,
    ]);

    $args['post_type'] = 'product_variation';
    $args['post_parent__in'] = $parent_ids ? $parent_ids : [0];

    return $args;
}, 10, 2);

Inserta la tabla con [woot id=25]. Cada variación publicada de los productos seleccionados tiene ahora su propia fila, con su propio precio, stock y botón Añadir al carrito (Add to cart). Las variaciones desactivadas se guardan como entradas privadas, así que quedan fuera mientras la opción de estado de entrada de la tabla conserve su valor por defecto, publicado. Conoce las contrapartidas antes de construir una página de tienda sobre esto:

• Las reglas de categoría y de atributo no se aplican a las filas de variación. Las variaciones no tienen términos, así que Taxonomía incluida (Included taxonomy) en Predefinición, y los elementos de categoría o atributo del filtro de la tabla, no encuentran nada en esta tabla. Elige las categorías en el código, como arriba. El precio, el SKU, el stock y la búsqueda por título siguen funcionando, porque las variaciones tienen esos campos.
• El título es texto sin formato. Una variación no tiene página propia, así que su celda Título (Title) no es un enlace. Añade la columna Miniatura (Thumbnail) si los compradores necesitan ver el artículo; muestra la imagen propia de la variación.
• Las variaciones «Cualquiera» no se pueden comprar desde una fila. Una variación configurada como Cualquier talla (Any Size) exige que el comprador elija una talla, y una fila no tiene campo para ello, por lo que WooCommerce se niega a añadirla al carrito. Asigna a esas variaciones valores concretos.
• Número de filas. Cien productos con veinte variaciones cada uno forman una tabla de dos mil filas. Mantén la paginación activada y un número moderado de filas por página.

Qué enfoque elegir

Si las variaciones no se muestran

• [woot_variations] muestra No Data!: el ID pertenece a un producto simple, o todas sus variaciones están desactivadas o sin publicar.
• El shortcode imprime el aviso «set product id»: añade id, o colócalo donde un producto sea la página actual.
• La tabla de variaciones creada con el fragmento está vacía: revisa el ID de la tabla en el código, los slugs de categoría y que la tabla no tenga ninguna regla de Taxonomía incluida (Included taxonomy) en Predefinición.
• Una fila no tiene botón Añadir al carrito (Add to cart): la variación no tiene precio o está agotada, y WooCommerce no la considera comprable.

Para diseños que no se tratan aquí, pregunta en el foro de soporte de WOOT.