Custom SVG icons per "checkboxes" options in attributes

[Nikhil]

I’m trying to implement a use case where each “checkboxes” option inside a single attribute needs its own custom SVG/image icon.

i am working on a custom PHP/template logic that maps option slugs to SVG files and overrides the frontend output.

Is there any official/recommended way to display custom images/SVGs per checkboxes option?

[kseniia]

Hi,

This would require custom development. We can provide some general guidance.

In general, you can use the hivepress/v1/meta_boxes/option_settings hook to add a field there. The options themselves are rendered in the render_options() method located here hivepress/includes/fields/class-checkboxes.php at master · hivepress/hivepress · GitHub. Unfortunately, there’s no dedicated hook in this method.

You may try using the hivepress/v1/fields/checkboxes/display_value hook, but if it doesn’t work for your use case, the only reliable approach would be to implement a custom field type.

Thanks for the suggestion as well, we’ll consider adding this functionality in a future update.

[Nikhil]

Thanks for the clarification.

After digging into this, I couldn’t find a clean native way to add custom icons per checkbox option without overriding core classes or creating a custom field type. Or I should use a single checkbox attribute for each item.

What worked for me was letting HivePress render the checkbox values normally, and then enhancing the output on the frontend using a small JS layer to replace the text with SVG icons/links.

I hope native functionality will be released soon. Thank you.

[ChrisB]

@Nikhil

enhancing the output on the frontend using a small JS layer to replace the text with SVG icons/links.

It would be cool if you could share an image of how this looks, and the code you used to achieve it with the community.

Cheers,
Chris

[Nikhil]

add_action('wp_footer', function () {

    // Run only on single listing pages
    if (!is_singular('hp_listing')) {
        return;
    }
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function () {

        const block = document.querySelector('.hp-listing__attribute--impactalignment');
        if (!block) return;

        const text = block.textContent.trim();
        if (!text) return;

        const baseUrl = '/impactalignment/';
        const values = text.split(',').map(v => v.trim());

        // Remove original text output
        block.innerHTML = '';

        values.forEach(value => {

            // Extract number from label: "Goal 3 – Something" → 3
            const match = value.match(/Goal\s*(\d{1,2})/i);
            if (!match) return;

            const number = match[1];

            const link = document.createElement('a');
            link.href = baseUrl + 'goal-' + number + '/';

            const img = document.createElement('img');
            img.src = '/wp-content/uploads/icons/goal' + number + '.webp';
            img.alt = 'Goal ' + number;

            link.appendChild(img);
            block.appendChild(link);
        });

    });
    </script>
    <?php
});

The script reads the rendered labels, extracts an identifier, and replaces the text with icons and links.

Attribute field name: impactalignment
Checkbox labels should look like: Goal 1 – Description, Goal 2 – Description
Properly named icons uploaded to the media section - goal1.webp, goal2.webp
Set the URL of the pages created by each option to be able to identify like this - /impactalignment/goal-1/

Preview (Add some CSS for styling)

[ChrisB]

Thanks for sharing your solution, @Nikhil. I’m sure others in the community will find it useful, as well.

Cheers,
Chris

[kseniia]

Hi,

Thank you for the solution! This will be very helpful for our community.