Published on Apr 25, 2020

ACF field value with SVG icons on single product pages

Sridhar Katakam

In WPDevDesign's Facebook group a user asks:

Hi all! Been trying to get my head around a requirement I need on a single product page. Using ACF to add custom fields to products, the custom fields are basically a yes/no i.e. Yes = "All items included", and No = "Parts missing".
Pretty straight forward, but I'm wanting to add an icon for each answer. Yes icon would be a 'check' and the No answer would be the 'times' icon.
I've been able to get the fields to display in the backend product pages and in the Oxygen template with the text appearing, but not the icons.
I tried using the ACF 'True/False' field and in each 'On text' or 'Off text' field adding the text and icon, but it appears that these fields strip the html?
I even tried using a PNG in case I didn't added the icon correctly but that didn't show either. Any ideas? Cheers!

This members-only tutorial provides the steps to add a field group using Advanced Custom Fields plugin having a Select type of custom field and outputting it with different SVG icons depending on the value selected for each singular product.

When "Pre-owned condition" custom field has been set to "All pieces included":

When "Pre-owned condition" custom field has been set to "Pieces are missing":

Step 1

Set up your field group.

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $599 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right