Product Card Layouts

Las cards Woo reutilizables no salen de un unico template fijo. El modulo Woo setup resuelve un layout y luego carga la partial correspondiente.

Archivos clave:

• setup/modules/woocommerce-setup/module.php
• setup/modules/woocommerce-setup/templates/woocommerce/partials/product-card.php
• setup/modules/woocommerce-setup/templates/woocommerce/partials/product-card-clean.php
• setup/modules/woocommerce-setup/templates/woocommerce/partials/product-card-photo.php
• setup/modules/woocommerce-setup/templates/woocommerce/partials/product-card-swatch.php
• setup/modules/woocommerce-setup/templates/woocommerce/partials/product-card-variable-modal.php

Router real

La API central es bs_wc_setup_get_product_card().

Que hace:

• normaliza el layout con bs_wc_setup_normalize_product_card_layout()
• construye los datos comunes con bs_wc_setup_get_product_card_template_data()
• carga una partial segun el layout final

Layouts permitidos:

• classic
• clean
• photo
• swatch

Template map:

$template_map = [
    'classic' => 'partials/product-card.php',
    'clean'   => 'partials/product-card-clean.php',
    'photo'   => 'partials/product-card-photo.php',
    'swatch'  => 'partials/product-card-swatch.php',
];

Capa compartida

Antes de entrar en cada partial, el modulo ya resuelve una base comun:

• product_id, type y permalink
• precio y categorias
• excerpt corto opcional
• rating opcional
• favorito activo o no
• badge de oferta
• badge de sin stock
• galeria secundaria serializada en data-gallery-images
• chips de talla
• swatches de color
• modal_id para variables

Eso significa que los layouts cambian markup y UX, pero no recalculan toda la inteligencia desde cero.

Layout classic

Es la card mas completa y mas cercana al catalogo reusable del sistema.

Que incluye:

• media cuadrada con overlay
• badges arriba
• favorito en esquina
• categoria, titulo, rating y precio
• excerpt opcional
• chips de talla y color
• qty stepper para simples
• CTA de elegir opciones para variables
• modal de variaciones compartido

Es el layout mas rico para catalogo denso.

Layout clean

Reduce informacion y simplifica la accion.

Que cambia:

• menos densidad visual
• sin excerpt ni bloque de specs visible
• CTA ancho y limpio
• simple products sin qty selector, siempre quantity 1
• variable products siguen abriendo el modal compartido

Es util cuando el proyecto quiere una card mas editorial y menos cargada.

Layout photo

Prioriza la imagen y la accion flotante.

Que cambia:

• shell visual casi todo media
• badges sobre imagen
• CTA compacto superpuesto
• cuerpo muy corto con titulo y precio
• sin specs ni excerpt

Es el layout mas fotografico. Se usa mucho en related y superficies donde la imagen manda mas que el detalle.

Layout swatch

No hereda la semantica normal del catalogo; tiene una UX propia.

Que cambia:

• clase gp-card—swatch y contexto gp-card—swatch-context-*
• imagen viva ligada al color seleccionado
• rango de tallas por color
• precio visible reactivo por opcion
• flechas de galeria manuales dentro de la media
• hover actions propias
• favoritos y CTA dentro del hover

El template construye swatch_items a partir de las variaciones reales y no solo de terminos sueltos. Cada opcion lleva:

• label
• hex
• image
• price_html
• size_labels
• is_in_stock

Modal variable compartido

Classic, clean, photo y swatch pueden reutilizar la misma partial de modal:

• product-card-variable-modal.php

La partial cambia el shell visual, pero la resolucion de atributos y add to cart variable converge en el mismo runtime del modulo.

Shortcodes

La misma API alimenta shortcodes de grid y de card unica:

• balinot_woo_cards
• balinot_woo_cards_classic
• balinot_woo_cards_clean
• balinot_woo_cards_photo
• balinot_woo_cards_swatch
• balinot_woo_card
• balinot_woo_card_classic
• balinot_woo_card_clean
• balinot_woo_card_photo
• balinot_woo_card_swatch

Regla practica

• si cambia un dato comun de todas las cards, revisa bs_wc_setup_get_product_card_template_data()
• si cambia solo una piel o la posicion de los bloques, entra en la partial del layout
• si cambia la logica variable, no toques solo la partial: revisa tambien product-card-variable-modal.php y woocommerce-card.js