Product Card Badges And Specs

Badges, swatches, tallas y favoritos no se reparten igual en todos los layouts, pero salen de una base comun.

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-photo.php
• setup/modules/woocommerce-setup/templates/woocommerce/partials/product-card-swatch.php
• setup/modules/woocommerce-setup/assets/js/woocommerce-card.js

Sale badge

La etiqueta de oferta no es un texto fijo del template. Sale de woocommerce_sale_flash, y el modulo la rehace con porcentaje real.

Patron:

• simples: calcula regular vs sale
• variables: busca el mayor descuento entre hijas en oferta
• si hay descuento real, pinta -N%
• si no, cae a Oferta

Por eso todos los layouts consumen sale_badge ya resuelto.

Stock badge

La regla actual es deliberadamente minima:

• solo se pinta badge cuando no hay stock
• no hay badge de En stock

Variable comun:

$show_stock_badge = !$product->is_in_stock();

Favoritos

La base comun calcula is_favorite si la feature esta activa y el usuario esta logado.

Cada layout lo presenta distinto:

• classic: boton en esquina superior derecha
• clean: boton redondo en la media
• swatch: boton dentro del hover action set
• photo: no fuerza favorito en la misma forma que classic

La persistencia no vive en la card, sino en gp_toggle_favorite_product() y el AJAX gp_toggle_favorite.

Tallas

Las tallas no se leen por un nombre tecnico fijo. La deteccion usa un helper flexible que busca tokens como talla o size tanto en nombre como en label del atributo.

Resultado:

• en classic se pintan chips de talla si existen
• en swatch se resume un rango por color seleccionado
• clean y photo no exponen ese bloque de specs en la misma capa visual

Colores y swatches

Si hay taxonomia global de color configurada y existe hex por termino:

• la base comun construye card_color_swatches
• classic pinta puntos de color informativos
• swatch convierte el color en el centro mismo de la UX

Diferencia importante:

• classic usa swatches como dato secundario
• swatch usa swatches como selector principal de la card

Galeria secundaria

La base comun serializa gallery frames en data-gallery-images.

Eso permite dos comportamientos:

• classic, clean y photo: rotacion hover gestionada por JS
• swatch: navegacion manual con flechas, sin autorrotacion por hover

Specs count

Classic calcula card_specs_count para ajustar el bloque cuando solo hay un tipo de spec:

• tallas
• colores

Esto es puramente de composicion visual, pero conviene saberlo al tocar spacing y layout.

Badges por layout

classic

• oferta
• sin stock
• favorito
• destacado como meta extra si el producto lo es
• specs de talla y color debajo del cuerpo

clean

• oferta
• sin stock
• favorito
• sin bloque visible de specs

photo

• oferta
• sin stock
• accion flotante sobre media
• cuerpo muy reducido

swatch

• oferta
• sin stock
• categoria en kicker
• rango de tallas por color
• favoritos y CTA en hover
• color activo y precio vivo

Regla practica

• si cambia una regla de negocio de badges, revisa el filtro sale_flash o la base comun
• si cambia solo la colocacion visual, revisa la partial del layout
• si cambia comportamiento de swatches o favoritos, revisa tambien woocommerce-card.js