Как получить значение атрибута и заменить его?

Question

[macstuff]

Привет!
Есть модуль вывода цветов в карточке товара на woocommerce. Модуль задает значение цвета блока через hex.
Для некоторых цветов нужно загрузить изображение вместо hex.
Не могу разобраться как получить значение из "wpk-color-name" и если оно например "gold", то заменить на "background-image: url(...gold.jpg) !important;" вместо "background: #b33200"

<div class="wpk-color" data-color="#b33200">
                <div class="wpk-color-preview" style="background: #b33200">
                  
                </div>
                <div class="wpk-color-price">20%</div>
                <div class="wpk-color-name">
                    Red
                </div>

Answer 1

[Александр Алексеев]

можно вывести Red в аттрибут и делать селектор на него

class="wpk-color-name" data-color-name="Red">
  Red
</div>

[data-color-name*='Red"] { background: }

Comments

[macstuff]

Текущую схему вывода поменять не смогу, познаний в js 0... максимум на что хватает это проанализировать примеры и на их основе делать себе