How to display a checkboxes field as a list

This thread is resolved. Here is a description of the problem and solution.

Problem:
The customer wants to display a checkboxes field with multiple selections on the front end as a list view. Currently, the field is displayed with a separator, but this method does not allow for proper styling or HTML tags.

Solution:

To display each selected checkbox as a list item, conditional HTML can be used. Here is an example code snippet:

<ul>
[wpv-conditional if="( '[types field='your-field' option='0'][/types]' eq '1' )"]
   <li>Option 1</li>
[/wpv-conditional]
     
[wpv-conditional if="( '[types field='your-field' option='1'][/types]' eq '1' )"]
   <li>Option 2</li>
[/wpv-conditional]
     
[wpv-conditional if="( '[types field='your-field' option='2'][/types]' eq '1' )"]
   <li>Option 3</li>
[/wpv-conditional]
</ul>

Replace 'your-field' with the actual field name and option='X' with the corresponding option number. This approach allows each selected option to be displayed as a list item, enabling the use of HTML tags for styling.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	9:00 – 12:00	9:00 – 12:00	9:00 – 12:00	9:00 – 12:00	9:00 – 12:00	-
-	13:00 – 18:00	13:00 – 18:00	13:00 – 18:00	13:00 – 18:00	13:00 – 18:00	-

Supporter timezone: America/Sao_Paulo (GMT-03:00)

This topic contains 1 reply, has 2 voices.

Last updated by Mateus Getulio 10 months ago.

Assisted by: Mateus Getulio.

Author

Posts

June 25, 2024 at 2:27 pm #2704390

ahmadG

Tell us what you are trying to do? I have a checkboxes field with multiple selections, I want to display the field on the front end (post view) as a list view, can you point me to how? I'm able to display it with a seperator, but that does not let me style it.

Is there any documentation that you are following? Couldn't find anything on it.

Is there a similar example that we can see? when I add " / " as a seperator this is what it looks like, but I want to format it and the seperator doesn not access HTML Tags.

hoodie / hoodie-all-over-print / t-shirt-round-neck / t-shirt-vneck / cushioned-crew-socks / impact-resistant-cases

What is the link to your site?

June 25, 2024 at 8:18 pm #2704421

Mateus Getulio

Supporter

Languages: English (English )

Timezone: America/Sao_Paulo (GMT-03:00)

Hi, with a checkboxes field you can use conditional HTML to display a list item per checkbox. Here's an example:

<ul>
[wpv-conditional if="( '[types field='your-field' option='0'][/types]' eq '1' )"]
   <li>Option 1</li>
[/wpv-conditional]
    
[wpv-conditional if="( '[types field='your-field' option='1'][/types]' eq '1' )"]
   <li>Option 2</li>
[/wpv-conditional]
    
[wpv-conditional if="( '[types field='your-field' option='2'][/types]' eq '1' )"]
   <li>Option 3</li>
[/wpvconditional]
</ul>

Let me know if you have questions about this approach.

June 26, 2024 at 5:34 am #2704583

ahmadG

Great, thank you