Style Woocommerce loop item with ACF Color picker field based on category

Loops & Logic
1

Dear Community,

Im new to L&L i would like to ask for some help:)

Currently im working on a project where i want to add different border color to my WC loop items based on their Category. My first approach was to add a color picker field to the products and pick a color for every product when i upload it.I created a code snippet with the code below, but sadly on the front-end my loop only shows 1 color from the 5 different colors, so it stays static.

<style type="text/css">
.loop-item {
    border: 2px;
    border-style: solid;
    border-color:  <?php the_field('border_color'); ?>;
}
</style>

<div class="loop-item">

</div>

So my second approach would be L&L. I managed to add a a dynamic image to my loop with L&L based on the category, so im wondering is it maybe possible with a color picker field?

Thank you in advance!

2

Hi Peter, welcome to the forum! This should definitely be possible in L&L. You’ll want to save your field as a sass variable within your L&L template using the Set tag and then add your CSS to the “style” tab within your L&L template, referring to your variable using sass syntax like $border_color_varible. I just realized that the docs don’t seem to specifically mention that piece of sass syntax so I think I’ll add that for those that are unfamiliar with sass.

Alternatively, if you wanted to do it all inline, you could use the sass module to do that like this:

<Set sass=item_border><Field border_color /></Set>

<style type=sass>
.loop-item {
    border: 2px;
    border-style: solid;
    border-color:  $item_border;
}
</style>

<div class="loop-item">
</div>