Каждый цветовой атрибут продукта в отдельном элементе на странице магазина

Question

Привет, я везде искал это без всякой удачи.

Я обнаружил, как показать атрибуты цвета продукта, разделенные запятой, на странице продукта в woocommerce.

Но я хочу чтобы каждый цвет находился в отдельном элементе div, поэтому я могу по-разному его стилизовать в зависимости от цвета.

Что я получил до сих пор:

add_action( 'woocommerce_after_shop_loop_item_title', 'display_color_attribute', 5 );
function display_color_attribute() {
    global $product;

    if ( $product->is_type('variable') ) {
        $taxonomy = 'pa_color';
        echo '<span class="attribute-color">' . $product->get_attribute($taxonomy) . '</span>';
    }
}

Это добавит класс span со словами "1st color 2-й цвет ". Однако, как я могу сделать цвета разделенными так:

<div class="colour-swatch interactive js-product-colour-swatch">                                                                                        

<div class="swatch" data-value="(show color attribute)">
    <div class="circle">
        <div style="background-color: var(--show color attribute);"></div>
        <a href="https://example.com/?attribute_pa_color=(show color attribute)"></a>
    </div>                                              
</div>

<div class="swatch" data-value="(show color attribute)">
    <div class="circle">
        <div style="background-color: var(--show color attribute);"></div>
        <a href="https://example.com/?attribute_pa_color=(show color attribute)"></a>
    </div>
</div>                                                                  


</div>  

Любая помощь будет оценена!