How to Style Product Flags

[birdwaves]

HI,
I'm looking to style Product Flags Individually. I've got Hot, Sale, New and Vegan product flags. I want to style each one differently. Is there a way to add a class to each of them or something?
Thanks!

[Matt Zimmermann]

You could try adding a class based on the flag and targeting it that way through CSS:

<span class="product-product-flag flag-&mvte:product:customfield_values:customfields:product_flag;">&mvt:product:customfield_values:customfields:product_flag;</span>

[birdwaves]

You could try adding a class based on the flag and targeting it that way through CSS:

<span class="product-product-flag flag-&mvte:product:customfield_values:customfields:product_flag;">&mvt:product:customfield_values:customfields:product_flag;</span>

Can you give me an example based on one of them, for instance Vegan? Also, where would your code go? I have a custom css file I'm using that I edit in User Interface > CSS Resources. But I'm not clear on where you'd put the above code that would provide the class.

Thanks for you help!

[lesliekirk]

Can you give me an example based on one of them, for instance Vegan? Also, where would your code go? I have a custom css file I'm using that I edit in User Interface > CSS Resources. But I'm not clear on where you'd put the above code that would provide the class.

Thanks for you help!

Quick question - is your site live? Can I peek at it?

[Matt Zimmermann]

To make these edits, you would have to modify the code for the product page within Product Display Layout. Then, in your custom.css file, you would target it with a class like:

.flag-vegan {}

[Bruce - PhosphorMedia]

If you are using the built in flags, then in the Category Product List template, you'd search for:

 
 <span class="product-product-flag">

and replace it with

 <span class="product-product-flag flag-&mvte:product:customfield_values:customfields:product_flag;">

and then as Matt said, add:
.flag-vegan {background:Green} for example, in your CSS file

[birdwaves]

Quick question - is your site live? Can I peek at it?

Sorry, I'm working on the Dev site, which is .htaccess protected.

[birdwaves]

If you are using the built in flags, then in the Category Product List template, you'd search for:

<span class="product-product-flag">

and replace it with

 <span class="product-product-flag flag-&mvte:product:customfield_values:customfields:product_flag;">

and then as Matt said, add:
.flag-vegan {background:Green} for example, in your CSS file

Thanks for chiming in here. I was away, and now taking up the thread on this again. I've replaced the code as you suggested. But when I inspect element, the class still comes up as ".category-product-flag", not ".flag-vegan".

So obviously I'm missing something here. I assume that the code I substituted is supposed to insert the name of the selected product flag. For the record, my Product flags are: HOT, KID-FRIENDLY, NEW, PET-FRIENDLY, SALE and VEGAN.

Thanks for your help.

[Matt Zimmermann]

Did you add the new class to your custom CSS file?

[birdwaves]

Did you add the new class to your custom CSS file?

I've made a little progress, but not quite there yet. I reasoned that since my Product Flag is "VEGAN" that my class should be ".vegan". And that worked!

But my new problem is that it only works for VEGAN. my .kid-friendly and .pet-friendly Classes don't work. And when I inspect element, I indeed see that those classes are not inserted. Only when I use the VEGAN product flag is the .vegan class inserted.

[birdwaves]

Upon further inspection I see that the .vegan class is inserted only when I go to the Vegan category page.
When I inspect element of a product in the Vegan category I see: <span class="category-product-flag vegan">VEGAN</span>

So we do see the .vegan class inserted.

But If I do a product search, for instance, of a product only Flagged as vegan, the product flag is not tagged with the .vegan class. I see this when I inspect element: <span class="category-product-flag">VEGAN</span>

So the code I changed in Product Layout display is targeting Categories, not Product Flags. (I think)

That won't work, because I might have products with the same flag but from different categories. I could have several products flagged as "New" but they belong to different categories.

How to target only the product flags, without using categories?

[Matt Zimmermann]

You will need to add the new code for the flags to the category, product, and search pages to get them to display there. The flags are product level elements, so you should not have to target them by category.

[birdwaves]

Thanks so much for following up so quickly!

To clarify, it turns out I had edited the Product display page, not Category display page. Bruce's comment above suggested the Category display page. So that's my bad. I did however find the code snippet in Product display and replaced it with the suggested code. So that's how I arrived at this point.

But now I am trying to find that same code snippet in the Category and Search page templates per your suggestion and I'm not finding that snippet "<span class="product-product-flag">".

I find no reference to product-flag in the code of the search page Category Product List Layout area.

In the Category Display page I only see this reference: <span class="category-product-flag &mvt:clean_flag;">&mvt:product:customfield_values: customfields:product_flag;</span>

How to put the code in these two pages?

[birdwaves]

Ok, I think I finally got it to all happen. I found a suitable area in the Search page's "Search Results Layout" field to put the code in (not the Product List Layout area). The span with the class "category-product-flag" needed the additional code.

Ditto for the Category Page. The span with the class "category-product-flag" needed the additional code.

So for anyone else that is trying to figure out how to style product flags, you need to edit the pages for Product, Search and Category.

Thanks to Matt and Bruce!