Display Woocommerce product attribute images on archive page

Hi im trying to display the thumbnails from the attribute "color" in order to make something like this what i want to achieve

So far i found this code that shows images from all the attribute but i just want to target the attribute color

add_action ('woocommerce_before_shop_loop_item_title', 'test_code' );
function test_code () {
global $product; 

if ( $product->has_child() ) {

$variations = $product->get_children();

foreach ( $variations as $variation ) {

if ( has_post_thumbnail( $variation ) ) {

        echo get_the_post_thumbnail( $variation );
      }
    }
  }
}

How can i target only the "color" attribute?

After research and mostly time ive come to a solution.

I create two functions, the first displays a thumbnails for each value(not repeated) of the attribute color in each variable product.

add_action( 'woocommerce_before_shop_loop_item_title', 'heam_display_color_attribute_thumbnails' );

function heam_display_color_attribute_thumbnails() {
    global $product;

    $color_values = $product->get_attribute( 'color' );
    $color_values_array = array_map( 'trim', explode( ',', $color_values ) );

    if ( $product->is_type( 'variable' ) ) {
        foreach ( $color_values_array as $color_value ) {

            foreach ( $product->get_visible_children() as $variation_id ) {
                $variation = wc_get_product( $variation_id );

                $variation_color = $variation->get_attribute( 'color' );

                if ( trim( $variation_color ) === $color_value ) {
                    $color_image = $variation->get_image( array( 30, 30 ), array( 'class' => 'heam-product-attribute-color-thumbnail', 
                    'data-visibility' => 'false' ) );
                    echo $color_image;
                    break;
                }
            }
        }
    }
}

I also add a class and a data-visibility to each image. the class is for styling and the data-visibility is for the swatches.

---

The second function displays(in the same order as the images) a list with list items for each value(not repeated) of the attribute color in each variable product

add_action( 'woocommerce_after_shop_loop_item', 
'heam_display_color_attribute_list', 5 );

function heam_display_color_attribute_list() {
    global $product;

    $color_values = $product->get_attribute( 'color' );
    $color_values_array = array_map( 'trim', explode( ',', $color_values ) 
);

    if ( $product->is_type( 'variable' ) ) {
        echo "<ul class=\"heam-color-atribbute-list\">";
        foreach ( $color_values_array as $color_value ) {
            echo "<li class=\"heam-color-atribbute-list-item\"><div 
class=\"color-attribute-swatch\" data-color=\"" . $color_value . "\"> 
</div></li>";
        }
        echo "</ul>";
    }
}

Inside each LI i add a div with a class to style the swatch for each color and data-color for targeting a particular color and style it.

---

The javascript for switch between colors

colorAttributeListItem = document.querySelectorAll(
  ".heam-color-atribbute-list-item"
);
colorAttributeImages = document.querySelectorAll(
  ".heam-product-attribute-color-thumbnail"
);

colorAttributeListItem.forEach((listItem, index) => {
  listItem.addEventListener("click", () => {
    colorAttributeImages[index].dataset.visibility = "true";

    for (let i = 0; i < colorAttributeImages.length; i++) {
      if (i !== index) {
        colorAttributeImages[i].dataset.visibility = "false";
      }
    }
  });
});

---

Finally the CSS

.columns-4 a:nth-child(1) > .heam-product-attribute-color-thumbnail {
  position: absolute;
  top: 0;
  opacity: 0;
  transition: all 200ms ease-in-out;
}

.columns-4
  a:nth-child(1)
  > .heam-product-attribute-color-thumbnail[data-visibility="true"] {
  opacity: 1;
  transition: all 200ms ease-in-out;
}

.heam-color-atribbute-list {
  display: flex;
  gap: 0.5rem;
}

.color-attribute-swatch {
  background-color: black;
  width: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  cursor: pointer;
  outline: 1px solid lightgray;
}

.color-attribute-swatch[data-color="blanco"] {
  background-color: white;
}

.color-attribute-swatch[data-color="negro"] {
  background-color: black;
}

.color-attribute-swatch[data-color="rojo"] {
  background-color: red;
}

Remember to change the classes to match yours and also de data-color="your-color".