WC Attribute Gallery Builder — Shortcodes de Atributos con Imagen para WooCommerce

Términos del atributo «color» en 12 columnas, redondo y con efecto carrusel-slider:

Términos del atributo «medida» en 10 columnas, redondo y sombreado con imagen preseleccionada y en carrusel-slider:

Términos del atributo «estilo» en 6 columnas, cuadrado y con efecto carrusel-slider:

Términos del atributo «color» en 12 columnas, redondo y con efecto galería:

Términos del atributo «tendencias» en 5 columnas, cuadrado y con efecto galería:

Beneficios SEO/UX

• Enlazado interno automático a las páginas de término (mejora rastreo y relevancia temática).

• CTR y conversión mejores: variaciones visibles y clicables (imagen/hover).

• Rendimiento: sin librerías externas; slider nativo con scroll-snap y CSS crítico inline (anti-override).

Estilos disponibles

• Grid (tarjetas): cuadrícula con columnas configurables.

• Chips (swatches): miniaturas redondas o cuadradas.

• Lista: fila compacta con miniatura y nombre.

• Slider/Carrusel: carril horizontal “sin librerías”, flechas, columnas visibles y padding ajustables.

Efectos y accesibilidad

• Hover suave (elevación + sombra) en miniaturas y flechas.

• Focus-visible para navegación por teclado.

• Respeto a prefers-reduced-motion.

Opciones del generador / atributos del shortcode

Cada opción se puede ajustar en la pantalla del plugin o directamente en el shortcode:

• taxonomy (obligatorio): taxonomía del atributo (ej. pa_color, pa_talla, pa_distancia).

• include / exclude: lista de slugs de términos separados por comas para incluir o excluir.

• orderby: menu_order (respeta tu drag & drop), name, name_desc, count, count_desc.

• order: ASC / DESC (se aplica si no usas los alias *_desc).

• hide_empty: true/false (oculta términos sin productos).

• in_stock_only: true/false (solo términos con stock).

• show_name: true/false (muestra el nombre del término).

• show_count: true/false (muestra el conteo).

• link: true/false (enlaza cada término a su archivo).

• style: grid | chips | list | slider.

• columns: nº de columnas (grid/chips) o visibles en slider.

• size: tamaño de imagen WP (ej. woocommerce_thumbnail, medium, etc.).

• Imagen de los términos

  • meta_key (opcional): si usas una meta personalizada para la imagen del término.

  • Compatibilidad swatches: detecta automáticamente claves comunes como wvs_term_image, thumbnail_id, etc.

  • default_image_id / default_image_url: imagen por defecto para todos los términos sin foto.

  • fallback: placeholder | color | none. Con color, si el término tiene meta product_attribute_color/color, muestra un chip de color.

• Diseño fina capa

  • shape: auto | circle | rounded | square.

  • radius: radio de las esquinas en px (si shape="auto" o rounded).

  • thumb_border: grosor del borde de la miniatura en px.

  • gap: separación entre ítems en px.

  • Solo slider:

    • arrow_offset: separación lateral de las flechas en px.

    • track_padding: padding interno del carril en px.

Compatibilidad y requisitos

• WooCommerce y WordPress recientes.

• Compatible con Variation Swatches for WooCommerce y metadatos habituales de imagen/color.

• Sin dependencias JS externas; ligero y amable con Core Web Vitals.

Dónde está el generador

Productos → Atributos (Shortcode).
Ahí eliges el atributo, marcas términos (con Seleccionar todo/Invertir), ajustas estilo y copias el shortcode.

Créditos y licencia

WC Attribute Gallery Builder — hecho por MARABELIA COOP.V × Chati.
Licencia GPLv2 o posterior.