{"id":15350,"date":"2025-09-27T15:44:08","date_gmt":"2025-09-27T13:44:08","guid":{"rendered":"https:\/\/marabelia.com\/producto\/wc-attribute-gallery-builder-gratis-shortcodes-de-atributos-con-imagen-para-woocommerce\/"},"modified":"2025-09-29T14:11:09","modified_gmt":"2025-09-29T12:11:09","slug":"wc-attribute-gallery-builder-gratis-shortcodes-de-atributos-con-imagen-para-woocommerce","status":"publish","type":"product","link":"https:\/\/marabelia.com\/en\/producto\/wc-attribute-gallery-builder-gratis-shortcodes-de-atributos-con-imagen-para-woocommerce\/","title":{"rendered":"WC Attribute Gallery Builder \u2014 Attribute Shortcodes with Image for WooCommerce"},"content":{"rendered":"
[vc_row][vc_column][vc_column_text css=””]\n

Turn any WooCommerce attribute or variable (color, size, style, etc.) into a gallery with images<\/strong> or a carousel<\/strong> that will display all the attribute terms and their featured image (For example, selecting “color” will show a gallery, grid, or carousel with the featured image of the selected colors: “red”, “yellow”, “green”, “blue” with hover effect and link to all the products of that variable). The user only needs to insert the shortcode<\/strong> generated in the page area where they want to display the attribute variables.<\/p>\n

It respects your manual term order, links to their archive pages (internal SEO), and is compatible with product variation featured image plugins swatches<\/strong> (it reads their image metadata).<\/p>\n

How to use (3 steps)<\/h2>\n
    \n
  1. \n

    In Products \u2192 Attributes (Shortcode)<\/strong>, choose an attribute.<\/p>\n<\/li>\n

  2. \n

    Select the terms<\/strong> (or click Select all<\/strong>).<\/p>\n<\/li>\n

  3. \n

    Adjust the layout<\/strong> and copy the generated shortcode. Paste it into a page or block.<\/p>\n<\/li>\n<\/ol>\n

     <\/p>\n

    \"\"<\/p>\n

    \"\"[\/vc_column_text][vc_column_text css=”.vc_custom_1759147787129{padding-top: 3% !important;}”]\n

    Attribute terms “color” in 12 columns, round, with carousel-slider effect:<\/h3>\n

    \"\"<\/p>\n

     <\/p>\n

    Attribute terms “measure” in 10 columns, round and shaded with preselected image, in carousel-slider:<\/h3>\n

    \"\"<\/p>\n

    Attribute terms “style” in 6 columns, square, with carousel-slider effect:<\/h3>\n

    \"\"<\/p>\n

     <\/p>\n

    Attribute terms “color” in 12 columns, round, with gallery effect:<\/h3>\n

    \"\"<\/p>\n

     <\/p>\n

    Attribute terms “trends” in 5 columns, square, with gallery effect:<\/h3>\n

    \"\"[\/vc_column_text][vc_column_text css=”.vc_custom_1759147170242{padding-top: 3% !important;}”]\n

    SEO\/UX Benefits<\/h3>\n
      \n
    • \n

      Internal linking<\/strong> automatically to term pages (improves crawling and topical relevance).<\/p>\n<\/li>\n

    • \n

      Better CTR and conversion<\/strong>: visible and clickable variations (image\/hover).<\/p>\n<\/li>\n

    • \n

      Performance<\/strong>: no external libraries; native slider with scroll-snap<\/em> and inline critical CSS (anti-override).<\/p>\n<\/li>\n<\/ul>\n

      Available styles<\/h3>\n
        \n
      • \n

        Grid (cards):<\/strong> grid with configurable columns.<\/p>\n<\/li>\n

      • \n

        Chips (swatches):<\/strong> round or square thumbnails.<\/p>\n<\/li>\n

      • \n

        List:<\/strong> compact row with thumbnail and name.<\/p>\n<\/li>\n

      • \n

        Slider\/Carousel:<\/strong> horizontal rail \u201cno libraries\u201d, arrows, configurable visible columns, and adjustable padding.<\/p>\n<\/li>\n<\/ul>\n

        Effects and accessibility<\/h3>\n
          \n
        • \n

          Smooth hover<\/strong> (elevation + shadow) on thumbnails and arrows.<\/p>\n<\/li>\n

        • \n

          Focus-visible<\/strong> for keyboard navigation.<\/p>\n<\/li>\n

        • \n

          Respects prefers-reduced-motion<\/strong>.<\/p>\n<\/li>\n<\/ul>\n

          Generator options \/ shortcode attributes<\/h3>\n

          Each option can be adjusted in the plugin screen or directly in the shortcode:<\/p>\n

            \n
          • \n

            taxonomy<\/code> (required): attribute taxonomy (e.g. pa_color<\/code>, pa_size<\/code>, pa_distance<\/code>).<\/p>\n<\/li>\n

          • \n

            include<\/code> \/ exclude<\/code>: list of term slugs<\/em> separated by commas to include or exclude.<\/p>\n<\/li>\n

          • \n

            orderby<\/code>: menu_order<\/code> (respects your drag & drop), name<\/code>, name_desc<\/code>, count<\/code>, count_desc<\/code>.<\/p>\n<\/li>\n

          • \n

            order<\/code>: ASC<\/code> \/ DESC<\/code> (applies if you\u2019re not using the *_desc<\/code> aliases).<\/p>\n<\/li>\n

          • \n

            hide_empty<\/code>: true<\/code>\/false<\/code> (hides terms without products).<\/p>\n<\/li>\n

          • \n

            in_stock_only<\/code>: true<\/code>\/false<\/code> (only terms with stock).<\/p>\n<\/li>\n

          • \n

            show_name<\/code>: true<\/code>\/false<\/code> (display the term name).<\/p>\n<\/li>\n

          • \n

            show_count<\/code>: true<\/code>\/false<\/code> (display the count).<\/p>\n<\/li>\n

          • \n

            link<\/code>: true<\/code>\/false<\/code> (link each term to its archive).<\/p>\n<\/li>\n

          • \n

            style<\/code>: grid<\/code> | chips<\/code> | list<\/code> | slider<\/code>.<\/p>\n<\/li>\n

          • \n

            columns<\/code>: no. of columns (grid\/chips) or visible<\/strong> in slider.<\/p>\n<\/li>\n

          • \n

            size<\/code>: WP image size (e.g. woocommerce_thumbnail<\/code>, medium<\/code>, etc.).<\/p>\n<\/li>\n

          • \n

            Term image<\/strong><\/p>\n

              \n
            • \n

              meta_key<\/code> (optional): if you use a custom meta for the term image.<\/p>\n<\/li>\n

            • \n

              Swatches compatibility<\/strong>: automatically detects common keys like wvs_term_image<\/code>, thumbnail_id<\/code>, etc.<\/p>\n<\/li>\n

            • \n

              default_image_id<\/code> \/ default_image_url<\/code>: default image for all terms without photo.<\/p>\n<\/li>\n

            • \n

              fallback<\/code>: placeholder<\/code> | color<\/code> | none<\/code>. With color<\/code>, if the term has meta product_attribute_color<\/code>\/color<\/code>, it shows a color chip.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n

            • \n

              Fine layer design<\/strong><\/p>\n

                \n
              • \n

                shape<\/code>: auto<\/code> | circle<\/code> | rounded<\/code> | square<\/code>.<\/p>\n<\/li>\n

              • \n

                radius<\/code>: corner radius in px (if shape=\"auto\"<\/code> or rounded<\/code>).<\/p>\n<\/li>\n

              • \n

                thumb_border<\/code>: border thickness of the thumbnail in px.<\/p>\n<\/li>\n

              • \n

                gap<\/code>: spacing between items in px.<\/p>\n<\/li>\n

              • \n

                Slider only:<\/strong><\/p>\n

                  \n
                • \n

                  arrow_offset<\/code>: horizontal spacing of arrows in px.<\/p>\n<\/li>\n

                • \n

                  track_padding<\/code>: inner padding of the track in px.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

                  Compatibility and requirements<\/h3>\n
                    \n
                  • \n

                    Recent WooCommerce and WordPress.<\/p>\n<\/li>\n

                  • \n

                    Compatible with Variation Swatches for WooCommerce<\/strong> and common image\/color metadata.<\/p>\n<\/li>\n

                  • \n

                    No external JS dependencies; lightweight and friendly with Core Web Vitals<\/strong>.<\/p>\n<\/li>\n<\/ul>\n

                    Where the generator is<\/h3>\n

                    Products \u2192 Attributes (Shortcode)<\/strong>.
                    There you choose the attribute, select terms (with Select all\/Invert<\/strong>), adjust the style, and copy the shortcode.<\/p>\n

                    Credits and license<\/h3>\n

                    WC Attribute Gallery Builder<\/strong> \u2014 made by MARABELIA COOP.V \u00d7 Chati<\/strong>.
                    License GPLv2 or later<\/strong>.<\/p>\n[\/vc_column_text][\/vc_column][\/vc_row]\n<\/div>","protected":false},"excerpt":{"rendered":"

                    WC Attribute Gallery Builder | G<\/span>allery shortcode generator to display Attributes | Variables with Images on any page.<\/span><\/p>\n

                    Do you want to create galleries or carousels that display your variable terms with their featured image?<\/strong> This is your plugin: WC Attribute Gallery Builder<\/strong>, free from MARABELIA COOP.V<\/strong>, fully compatible with WooCommerce variations. It includes a visual screen to select the attribute, mark terms, and apply ready-made styles (grid, chips, list, or slider\/carousel), with hover effect<\/strong>, sorting by drag & drop<\/strong>, and a default image<\/strong> when a term has no photo.<\/p>\n

                     <\/p>\n","protected":false},"featured_media":15334,"template":"","meta":[],"product_brand":[],"product_cat":[125],"product_tag":[],"class_list":{"0":"post-15350","1":"product","2":"type-product","3":"status-publish","4":"has-post-thumbnail","6":"product_cat-plugins","8":"first","9":"instock","10":"downloadable","11":"virtual","12":"taxable","13":"purchasable","14":"product-type-simple"},"yoast_head":"\nWC Attribute Gallery Builder \u2014 Attribute Shortcodes with Image for WooCommerce • Marabelia | Agencia Digital en Valencia<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marabelia.com\/en\/producto\/wc-attribute-gallery-builder-gratis-shortcodes-de-atributos-con-imagen-para-woocommerce\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WC Attribute Gallery Builder \u2014 Attribute Shortcodes with Image for WooCommerce • Marabelia | Agencia Digital en Valencia\" \/>\n<meta property=\"og:description\" content=\"WC Attribute Gallery Builder | Gallery shortcode generator to display Attributes | Variables with Images on any page. Do you want to create galleries or carousels that display your variable terms with their featured image? This is your plugin: WC Attribute Gallery Builder, free from MARABELIA COOP.V, fully compatible with WooCommerce variations. It includes a visual screen to select the attribute, mark terms, and apply ready-made styles (grid, chips, list, or slider\/carousel), with hover effect, sorting by drag & drop, and a default image when a term has no photo.  \" \/>\n<meta property=\"og:url\" content=\"https:\/\/marabelia.com\/en\/producto\/wc-attribute-gallery-builder-gratis-shortcodes-de-atributos-con-imagen-para-woocommerce\/\" \/>\n<meta property=\"og:site_name\" content=\"Marabelia | Agencia Digital en Valencia\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-29T12:11:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1080\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WC Attribute Gallery Builder \u2014 Attribute Shortcodes with Image for WooCommerce • Marabelia | Agencia Digital en Valencia","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/marabelia.com\/en\/producto\/wc-attribute-gallery-builder-gratis-shortcodes-de-atributos-con-imagen-para-woocommerce\/","og_locale":"en_US","og_type":"article","og_title":"WC Attribute Gallery Builder \u2014 Attribute Shortcodes with Image for WooCommerce • Marabelia | Agencia Digital en Valencia","og_description":"WC Attribute Gallery Builder | Gallery shortcode generator to display Attributes | Variables with Images on any page. Do you want to create galleries or carousels that display your variable terms with their featured image? This is your plugin: WC Attribute Gallery Builder, free from MARABELIA COOP.V, fully compatible with WooCommerce variations. It includes a visual screen to select the attribute, mark terms, and apply ready-made styles (grid, chips, list, or slider\/carousel), with hover effect, sorting by drag & drop, and a default image when a term has no photo.  ","og_url":"https:\/\/marabelia.com\/en\/producto\/wc-attribute-gallery-builder-gratis-shortcodes-de-atributos-con-imagen-para-woocommerce\/","og_site_name":"Marabelia | Agencia Digital en Valencia","article_modified_time":"2025-09-29T12:11:09+00:00","og_image":[{"width":1080,"height":1080,"url":"https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/2.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[]}},"_links":{"self":[{"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/product\/15350","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/product"}],"about":[{"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/types\/product"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/media\/15334"}],"wp:attachment":[{"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/media?parent=15350"}],"wp:term":[{"taxonomy":"product_brand","embeddable":true,"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/product_brand?post=15350"},{"taxonomy":"product_cat","embeddable":true,"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/product_cat?post=15350"},{"taxonomy":"product_tag","embeddable":true,"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/product_tag?post=15350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}