PHP color and image loop I did create a function which loops through the colors of a product and outputs a div with the specific color. After that it finds the image for the available colors. But I think the code can be a lot smarter.

Can someone optimize my code?

&lt;?php
$brand_terms = get_the_terms($post, 'pa_kleur');
$brand_string = ''; // Reset string
foreach ($brand_terms as $term) : ?&gt; &lt;div style="display: block; margin-bottom: 50px;"&gt;&lt;?php

    if (($term-&gt;name) == 'Roze') {
        echo '&lt;div style="width: 20px; height: 20px; background-color: pink;" class="roze-kleur"&gt;&lt;/div&gt;';

        $variations = $product-&gt;get_available_variations();
        foreach ( $variations as $key =&gt; $value ) {
    ?&gt;
        &lt;?php if ($value['attributes']['attribute_pa_kleur'] == 'roze') { ?&gt;
        &lt;li&gt;
            &lt;span&gt;&lt;?php echo $value['image']['url']; }?&gt;&lt;/span&gt;
        &lt;/li&gt;&lt;/div&gt;
    &lt;?php
    }
    }
    if (($term-&gt;name) == 'Grijs') {
        echo '&lt;div style="width: 20px; height: 20px; background-color: grey;" class="grijze-kleur"&gt;&lt;/div&gt;';

        $variations = $product-&gt;get_available_variations();
        foreach ( $variations as $key =&gt; $value ) {
    ?&gt;
        &lt;?php if ($value['attributes']['attribute_pa_kleur'] == 'grijs') { ?&gt;
        &lt;li&gt;
            &lt;span&gt;&lt;?php echo $value['image']['url']; }?&gt;&lt;/span&gt;
        &lt;/li&gt;&lt;/div&gt;
    &lt;?php
    }
    }
endforeach;
?&gt;


Thanks for your time!
keeping separate actions on a different line and tabbing your code will go a long way with making your code readable.
avoid declaring single-use variables 
I don't see $brand_string being used, so that declaration can be omitted.
I do not prefer the endforeach syntax.  Despite being declarative, I find it unnecessarily verbose.  Good tabbing is always enough to help me track the nesting of control structures and functions.
move all inline styling to an external stylesheet.  Using meaningful class names to assign appropriate colors is most logical here.
I expect all &lt;div&gt; tags are display: block; by default -- I doubt this style declaration is necessary.
use a lookup array to swiftly translate $term-&gt;name values into class attribute values and eliminate the mostly redundant if blocks.
don't declare $key if you never intend to use it.
filter the variations array based on the lowercase value of $term-&gt;name and use a conditional break for best efficiency.  I am confidently assuming that there will only be one match in your variations array based on the trailing &lt;/div&gt;
your list item should be nested inside of a list tag (e.g. &lt;ul&gt;)
remove the &lt;span&gt; tags -- they are unnecessary markup.  If you need to style the list items, style the &lt;li&gt; tags
if you must have your data processing in the same script as your content outputting, then I recommend doing your processing first, then keeping your markup readable by referencing the generated variables


Code:

$colorClasses = [
    'Roze' =&gt; 'roze-kleur',
    'Grijs' =&gt; 'grijze-kleur',
];
foreach (get_the_terms($post, 'pa_kleur') as $term) {
    $lowerColor = lcfirst($term-&gt;name);
    $colorUrl = 'you_decide_the_url';
    foreach ($product-&gt;get_available_variations() as $row) {
        if ($row['attributes']['attribute_pa_kleur'] === $lowerColor) {
            $colorUrl = $value['image']['url'];
            break;
        }
    }

    echo '&lt;div&gt;
              &lt;div class="' , ($colorClasses[$term-&gt;name] ?? 'default-kleur') , '"&gt;&lt;/div&gt;
              &lt;ul&gt;&lt;li&gt;' , $colorUrl , '&lt;/li&gt;&lt;/ul&gt;
          &lt;/div&gt;';
 }