sinanisler logo

Custom Variations Images, Custom Dynamic Data Tag

this {product_variation_images} data tag loops the current product variations images.

that’s it enjoy.


// TAG : {product_variation_images}

add_filter( 'bricks/dynamic_tags_list', 'register_product_variation_images_tag' );
function register_product_variation_images_tag( $tags ) {
    $tags[] = [
        'name'  => '{product_variation_images}',
        'label' => 'WooCommerce Product Variation Images',
        'group' => 'Custom Tags',
    ];

    return $tags;
}

// Render the dynamic tag for WooCommerce variation images
add_filter( 'bricks/dynamic_data/render_tag', 'render_product_variation_images_tag', 10, 3 );
function render_product_variation_images_tag( $tag, $post, $context = 'text' ) {
    if ( $tag !== 'product_variation_images' ) {
        return $tag;
    }

    // Check if the product is a variable product
    $product = wc_get_product( $post->ID );
    if ( $product && $product->is_type( 'variable' ) ) {

        // Get the main product thumbnail URL
        $main_thumbnail_id = $product->get_image_id();
        $main_thumbnail_url = wp_get_attachment_url( $main_thumbnail_id );

        // Get the available variations
        $available_variations = $product->get_available_variations();

        // Initialize a variable to store the variation images
        $variation_images = '';

        // Loop through the variations to get the images and variation names
        foreach ( $available_variations as $variation ) {
            $variation_id = $variation['variation_id'];
            $variation_product = wc_get_product( $variation_id );
            $variation_image_id = $variation_product->get_image_id();
            $variation_image_url = wp_get_attachment_url( $variation_image_id );

            // Only process if the variation has its own image AND it does not match the main product thumbnail
            if ( ! empty( $variation_image_url ) && $variation_image_url !== $main_thumbnail_url ) {
                $variation_attributes = $variation['attributes'];

                // Collect and sanitize the variation names to use as class names
                $variation_name_classes = [];
                foreach ( $variation_attributes as $key => $value ) {
                    // Clean the attribute name (remove prefix 'pa_' if it exists)
                    $clean_name = str_replace( 'pa_', '', $value );
                    // Convert to lowercase and replace spaces with hyphens
                    $class_name = sanitize_title( $clean_name );
                    $variation_name_classes[] = $class_name;
                }

                // Combine the class names with variation ID
                $class_name = 'variation-image-' . $variation_id . ' ' . implode( ' ', $variation_name_classes );

                // Add the image with both variation ID and sanitized variation names as class
                $variation_images .= '<img src="' . esc_url( $variation_image_url ) . '" alt="Variation Image" class="' . esc_attr( $class_name ) . '">';
            }
        }

        // Return the variation images or nothing if no unique images are found (no fallback)
        return $variation_images ?: ''; // No fallback message or thumbnail
    }

    return 'Not a Variable Product';
}

// Allow the dynamic tag to render inside content
add_filter( 'bricks/dynamic_data/render_content', 'render_product_variation_images_tag_in_content', 10, 3 );
function render_product_variation_images_tag_in_content( $content, $post, $context = 'text' ) {
    if ( strpos( $content, '{product_variation_images}' ) !== false ) {
        $variation_images = render_product_variation_images_tag( 'product_variation_images', $post, $context );
        $content = str_replace( '{product_variation_images}', $variation_images, $content );
    }

    return $content;
}




Leave the first comment