Отображение цветового атрибута WooCommerce в контейнере Div

Question

Мне кажется, что я пытался сделать все, чтобы добиться того, чтобы все мои цветовые атрибуты были помещены в контейнер div, без всякой удачи, любая помощь была бы признательна!

Я хочу показать образцы цветов на моей странице отдельного продукта в woocommerce, и я обнаружил, что этот код работает и возвращает все цветовые комбинации одного продукта:

function nt_product_attributes() {
global $product;
if ( $product->has_attributes() ) {

    $attributes = ( object ) array (
    'color'              => $product->get_attribute( 'pa_color' ),
    'size'            => $product->get_attribute( 'pa_size' ),
    );
return $attributes;
}
}

$attributes = nt_product_attributes();
echo $attributes->color;

Возвращает каждый цвет, разделенный запятой.

Однако чего я хочу достичь помещает каждый цвет в контейнер div, например:

<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>  

Таким образом, в зависимости от того, сколько цветов у продукта, он будет отображать такие атрибуты.

Если у моего продукта было 2 цвета он бы показал эти 2 контейнера выше с двумя указанными c цветами, помещенными внутри (атрибут show color).

Это выполнимо?