Enable Additional Variation Images In WooCommerce Admin Variable Products

Since 1 week, I’m trying to do writing custom PHP & jQuery code to upload additional variation images to each variation. I wrote some code, but it doesn’t work properly.

With the code below, I am:

1. not able to delete selected images.
2. not able to see the images that i upload each variation (on the front-end section)

Any help is highly appreciated.

function custom_allow_multiple_variation_images( $loop, $variation_data, $variation ) {
    $variation_id = $variation->ID;
    $field_name = 'variation_image';
    $attachment_ids = get_post_meta( $variation_id, $field_name, true );

    echo '<div class="upload_variation_image">';
    echo '<h4>Fotoğraf</h4>';
    echo '<input type="hidden" name="' . $field_name . '[' . $loop . ']" id="' . $field_name . '" class="upload_image" value="' . esc_attr( implode( ',', (array) $attachment_ids ) ) . '" />';
    echo '<button class="upload_image_button button">Upload Image</button>';

    if ( $attachment_ids ) {
        $attachment_ids = explode( ',', $attachment_ids );
        foreach ( $attachment_ids as $attachment_id ) {
            $image_src = wp_get_attachment_image_src( $attachment_id, 'thumbnail' );
            if ( $image_src ) {
                echo '<div class="uploaded_image_wrapper">';
                echo '<img src="' . esc_url( $image_src[0] ) . '" alt="Uploaded Image" />';
                echo '<span class="delete_variation_image" data-attachment_id="' . $attachment_id . '">Sil</span>';
                echo '</div>';
            }
        }
    }

    echo '</div>';
}

add_action( 'woocommerce_variation_options', 'custom_allow_multiple_variation_images', 10, 3 );


function custom_save_variation_image( $variation_id ) {
    $field_name = 'variation_image';
    $attachment_ids = isset( $_POST[ $field_name ] ) ? array_map( 'absint', explode( ',', wc_clean( $_POST[ $field_name ][0] ) ) ) : array();

    update_post_meta( $variation_id, $field_name, implode( ',', $attachment_ids ) );
}

add_action( 'woocommerce_save_product_variation', 'custom_save_variation_image', 10, 1 );


add_action( 'woocommerce_save_product_variation', 'custom_save_variation_image', 10, 1 );


function custom_variation_image_scripts() {
    ?>
    <script>
        jQuery(document).ready(function($) {
            
            function custom_add_variation_image($wrapper) {
                var file_frame;
                if (file_frame) {
                    file_frame.open();
                    return;
                }
                file_frame = wp.media.frames.file_frame = wp.media({
                    title: 'Variation Image Select',
                    button: {
                        text: 'Add Additional Image'
                    },
                    multiple: true
                });

                file_frame.on('select', function() {
                    var attachment_ids = [];
                    var selection = file_frame.state().get('selection');
                    selection.map(function(attachment) {
                        attachment = attachment.toJSON();
                        attachment_ids.push(attachment.id);
                    });
                    $wrapper.find('.upload_image').val(attachment_ids.join(','));
                    $wrapper.find('.uploaded_image_wrapper').remove();
                    attachment_ids.forEach(function(attachment_id) {
                        var image_url = wp.media.attachment(attachment_id).get('url');
                        $wrapper.append('<div class="uploaded_image_wrapper"><img src="' + image_url + '" alt="Uploaded Image" /><span class="delete_variation_image" data-attachment_id="' + attachment_id + '">Sil</span></div>');
                    });
                    $wrapper.find('.upload_image').trigger('change'); // Trigger change event when selecting a variation image
                });
                file_frame.open();
            }

           
            function custom_remove_variation_image($wrapper, attachment_id) {
                var attachment_ids = $wrapper.find('.upload_image').val().split(',');
                var index = attachment_ids.indexOf(attachment_id);
                if (index !== -1) {
                    attachment_ids.splice(index, 1);
                    $wrapper.find('.upload_image').val(attachment_ids.join(','));
                }
                $wrapper.find('.uploaded_image_wrapper[data-attachment_id="' + attachment_id + '"]').remove();
                $wrapper.find('.upload_image').trigger('change'); // Trigger change event when removing a variation image
            }

            
            function custom_detect_variation_changes() {
                $('form.cart').on('change', '.variation-control', function() {
                    $('.single_add_to_cart_button').prop('disabled', false);
                });

                // When a variation image changes, enable "Add to Cart" button
                $('form.cart').on('change', '.upload_image', function() {
                    $('.single_add_to_cart_button').prop('disabled', false);
                });
            }

            // Medya yükleyici olaylarını ekle
            $(document).on('click', '.upload_image_button', function(e) {
                e.preventDefault();
                custom_add_variation_image($(this).closest('.upload_variation_image'));
            });

            $(document).on('click', '.delete_variation_image', function() {
                var attachment_id = $(this).data('attachment_id');
                custom_remove_variation_image($(this).closest('.upload_variation_image'), attachment_id);
            });

            
            custom_detect_variation_changes();
        });
    </script>
    <style>
        .uploaded_image_wrapper {
            margin: 10px 0;
            display: inline-block;
        }

        .uploaded_image_wrapper img {
            max-width: 100px;
            height: auto;
            margin-right: 10px;
        }

        .delete_variation_image {
            cursor: pointer;
            color: #a00;
        }
    </style>
    <?php
}

add_action( 'admin_footer', 'custom_variation_image_scripts' );

After @LoicTheAztec answer i can add variation images from variation tab but nothing display on the product page. You can see the image below about my latest situation.