[Resolved] How to display field titles with icons before field values

[Author]

Posts

[maximilianD]

I have bought your plugin, but I'm struggling with it.

I want to show product attributes (custom fields) on the product page in a nice table view, just like woocommerce attributes are shown. And the same attribute as an icon on the product archive page

1. problem
I have achived that the custom field content shows up on the product page, but it doesn't show the fields name.
How it currently looks:
black
large
cotton
How I want it to show up:
Color: black
Size: large
Material: cotton

2. How can I show a custom field (text) as an image/icon on the product archive page?
I want to link an icon to a text field.

[Nigel]

Hi there

When you edit a template you are editing the markup that will be output on the page, so if you insert a custom field using a types shortcode you can simply precede the field value with whatever text you want, e.g.

<p>Color: [types field="color"][/types]</p>
<p>Size: [types field="size"][/types]</p>

I'm not sure what you mean by your second question.

According to your settings at Toolset > Settings > Custom Content you can save HTML in your custom fields, so you could directly save an svg tag with an icon in a text field for example which would render as an icon on the front end.

Or, if you just mean you want to show an icon before the text of a custom field then you can just simply add it to the markup, like above. Precisely how will depend on what icon solutions you have available to you (your theme may make icons available on the front end, or you could insert an svg tag with an icon, for example).

If I have misunderstood, please clarify what you need.

[maximilianD]

Thank you for your quick reply.

Is there a way I can show all the custom fields that belong to a Post Field Group with just one shortcode?
If I use the solution you suggested, it would for example show:
color:
size: L

It would show color without any value if I didn't choose one for the product.
What I mean by that is, that I only want to show the custom fields and it's titles, if I choose a value for this product.
For some of the products, I choose all values, and for other, I only choose some selected ones, and I don't want to show empty field titles without any values on the frontend.

Regarding my 2nd question:
I have a field called color. On the product page I want to show word color in text format, and on the product archive page I want to show a red little icon using the same custom field. I don't want to create 2 seperate fields one for the product and one for the product archive page.
How is that possible?

Thank you!

[maximilianD]

Never mind I'm slowly getting the hang of it.
Now I have a different problem.
Since I#m using toolset, the settings page of WPML is blanked out and I can't use the string translation tool.
What could cause the problem?

New threads created by Nigel and linked to this one are listed below:

https://toolset.com/forums/topic/split-wpml-settings-page-is-blank-when-toolset-in-use/

[Nigel]

You resolved the issue with not displaying labels when the fields are empty.

(Answer is to wrap the whole label and field markup inside a conditional shortcode that first tests whether the field has a value: https://toolset.com/documentation/user-guides/conditional-html-output-in-views/checking-fields-and-other-elements-for-emptynon-empty-values/.)

You also worked out outputting the field value differently on the single post and archive pages?

The forum has a policy of one issue per thread, so I have opened a new thread with your question about WPML and will follow up there.