WC Attribute Gallery Builder — Attribute Shortcodes with Image for WooCommerce

Attribute terms “color” in 12 columns, round, with carousel-slider effect:

Attribute terms “measure” in 10 columns, round and shaded with preselected image, in carousel-slider:

Attribute terms “style” in 6 columns, square, with carousel-slider effect:

Attribute terms “color” in 12 columns, round, with gallery effect:

Attribute terms “trends” in 5 columns, square, with gallery effect:

SEO/UX Benefits

• Internal linking automatically to term pages (improves crawling and topical relevance).

• Better CTR and conversion: visible and clickable variations (image/hover).

• Performance: no external libraries; native slider with scroll-snap and inline critical CSS (anti-override).

Available styles

• Grid (cards): grid with configurable columns.

• Chips (swatches): round or square thumbnails.

• List: compact row with thumbnail and name.

• Slider/Carousel: horizontal rail “no libraries”, arrows, configurable visible columns, and adjustable padding.

Effects and accessibility

• Smooth hover (elevation + shadow) on thumbnails and arrows.

• Focus-visible for keyboard navigation.

• Respects prefers-reduced-motion.

Generator options / shortcode attributes

Each option can be adjusted in the plugin screen or directly in the shortcode:

• taxonomy (required): attribute taxonomy (e.g. pa_color, pa_size, pa_distance).

• include / exclude: list of term slugs separated by commas to include or exclude.

• orderby: menu_order (respects your drag & drop), name, name_desc, count, count_desc.

• order: ASC / DESC (applies if you’re not using the *_desc aliases).

• hide_empty: true/false (hides terms without products).

• in_stock_only: true/false (only terms with stock).

• show_name: true/false (display the term name).

• show_count: true/false (display the count).

• link: true/false (link each term to its archive).

• style: grid | chips | list | slider.

• columns: no. of columns (grid/chips) or visible in slider.

• size: WP image size (e.g. woocommerce_thumbnail, medium, etc.).

• Term image

  • meta_key (optional): if you use a custom meta for the term image.

  • Swatches compatibility: automatically detects common keys like wvs_term_image, thumbnail_id, etc.

  • default_image_id / default_image_url: default image for all terms without photo.

  • fallback: placeholder | color | none. With color, if the term has meta product_attribute_color/color, it shows a color chip.

• Fine layer design

  • shape: auto | circle | rounded | square.

  • radius: corner radius in px (if shape="auto" or rounded).

  • thumb_border: border thickness of the thumbnail in px.

  • gap: spacing between items in px.

  • Slider only:

    • arrow_offset: horizontal spacing of arrows in px.

    • track_padding: inner padding of the track in px.

Compatibility and requirements

• Recent WooCommerce and WordPress.

• Compatible with Variation Swatches for WooCommerce and common image/color metadata.

• No external JS dependencies; lightweight and friendly with Core Web Vitals.

Where the generator is

Products → Attributes (Shortcode).
There you choose the attribute, select terms (with Select all/Invert), adjust the style, and copy the shortcode.

Credits and license

WC Attribute Gallery Builder — made by MARABELIA COOP.V × Chati.
License GPLv2 or later.