WooCommerce showcase products with Gallery swatches & link to product

Feature Requests / Improvements
1

Hi all,

To showcase WooCommerce products on, for example, a homepage you need to build your own structure with featured image, title etc. which can be built with the current toolset. Even overlayng icons are possible.

image
image1381×908 124 KB

What is NOT possible yet is to use the image Swatches with the WooCommerce Gallery feature outside of WooCommerce as the swatch image does not contain a link to the product:

image
image1645×720 106 KB

My feature request:
Create a linkable product showcase with (optional) image swatches for showcase purposes. The link should be set on the main image.

Jasper

1 Like
2

Hereby a workinbg proof of concept script:

<?php 
/* Generic function to render Product swatches
 * https://forum.bricksbuilder.io/t/tutorial-image-swatches-on-woocommerce-archive-page/33920
 * How to use:
 * In Bricks Query loop use code element: <?php render_kleur_variation_swatches( get_the_ID() );?>
 * In Archive page use template hook in text element: {do_action:woocommerce_after_shop_loop_item}
 * Buildpress.io :: Enque Javascript for the swatches to use in WooCommerce and Frontpage
*/
function render_kleur_variation_swatches( $product_id ) {
    $product = wc_get_product( $product_id );

    if ( ! $product || ! $product->is_type( 'variable' ) ) {
        return;
    }

    $attribute_name = 'pa_kleur'; // Your attribute
    $available_variations = $product->get_available_variations();

    if ( empty( $available_variations ) ) return;

    echo '<div class="variation-swatches" data-product-id="' . esc_attr( $product->get_id() ) . '">';

    $shown_terms = [];

    foreach ( $available_variations as $variation ) {
        $variation_obj = new WC_Product_Variation( $variation['variation_id'] );
        $attr_value    = $variation['attributes']['attribute_' . $attribute_name] ?? '';
        $term          = get_term_by( 'slug', $attr_value, $attribute_name );
        $label         = $term ? $term->name : $attr_value;

        if ( ! $attr_value || in_array( $attr_value, $shown_terms ) ) {
            continue;
        }

        $shown_terms[] = $attr_value;

        $thumb_url      = wp_get_attachment_image_url( $variation_obj->get_image_id(), 'woocommerce_thumbnail' );
        $main_image_url = wp_get_attachment_image_url( $variation_obj->get_image_id(), 'woocommerce_single' );
        $variation_link = esc_url( $product->get_permalink() ) . '?attribute_' . $attribute_name . '=' . rawurlencode( $attr_value );

        echo '<a href="' . $variation_link . '" 
                 class="swatch-image" 
                 data-image="' . esc_url( $main_image_url ) . '" 
                 data-tooltip="' . esc_attr( $label ) . '"
				 title="' . esc_attr( $label ) . '">
                    <img src="' . esc_url( $thumb_url ) . '" alt="' . esc_attr( $attr_value ) . '" />
              </a>';
    }

    echo '</div>';
}

// Hook into WooCommerce template
add_action( 'woocommerce_after_shop_loop_item', function() {
    global $product;
    if ( ! is_product() && $product ) {
        render_kleur_variation_swatches( $product->get_id() );
    }
}, 15 );
// Enque JS and CSS files (for caching)
function enqueue_product_swatches_assets() {
    // JS
    wp_enqueue_script(
        'product-swatches',
        get_stylesheet_directory_uri() . '/assets/js/product-swatches.js',
        [],
        '1.0',
        true
    );

    // CSS
    wp_enqueue_style(
        'product-swatches',
        get_stylesheet_directory_uri() . '/assets/css/product-swatches.css',
        [],
        '1.0'
    );
}
add_action( 'wp_enqueue_scripts', 'enqueue_product_swatches_assets' );