Separate Price field for Image choice option

Wishlist Form Builder
1

I would like to have the option to add a price to an “image choice” option. At the moment, I’m placing the price in the caption, but I would prefer to display a different text alongside it. Alternatively, it would be helpful if the caption supported HTML, similar to what’s possible with the “Paragraph” element.

2 Likes
2

Hi there, @user8320 :wave:

I completely got your idea, thanks for sharing! If this request gets more votes, we’ll try to consider it :slightly_smiling_face:

As for now, I’d be happy to check if there’s a custom solution for your case. Could you just specify the name of the Form Builder widget where you’d like to have it?

3

Hi Max,

Thanks for your response. In this case, it’s about ‘Reparatie V3.’ I use this widget to give customers the option to register their repair.

1 Like
4

Thank you! I’ve checked your use case with the devs and, unfortunately, the custom solution isn’t possible now.

Let’s hope this idea catches on with the community and the devs will consider it in the future updates :slightly_smiling_face:

5

Hi Max,

I’ve managed to solve it using this code. It might be useful for you as well. There definitely seem to be possibilities.


(function() {
const labelToTime = {
“beelscherm vervangen”: “60 minuten”,
“flexgate reparatie”: “1–3 dagen”,
“batterij vervangen”: “90 minuten”,
“trackpad vervangen”: “60 minuten”,
“toetsenbord reparatie”: “90 minuten”,
“moederbord reparatie”: “3–5 dagen”,
“dustgate reparatie”: “1–3 dagen”,
“waterschade behandeling”: “1–3 dagen”,
“speaker vervangen”: “60 minuten”,
“koeling vervangen”: “90 minuten”,
“usb-poort reparatie”: “60 minuten”,
“intern reinigen (stof en vuil)”: “90 minuten”,
“overige reparaties”: “onbekend”,
“macbook data recovery”: “3–5 dagen”
};

// Functie moet boven gebruik staan
function addHint(label) {
const labelText = label.textContent.toLowerCase().trim();
if (!labelToTime\[labelText\]) return;
if (label.parentElement.querySelector(‘.extra-hint-time’)) return;

const hint = label.closest('[class*="ImageOption__Item-sc"]').querySelector('[class*="ImageOption__ItemHint"]');
if (!hint) return;

const extraHint = document.createElement("div");
extraHint.className = 'extra-hint-time';
extraHint.textContent = labelToTime[labelText];

extraHint.style.display = "inline-block";
extraHint.style.backgroundColor = "#e0f0ff";
extraHint.style.color = "#1a1a1a";
extraHint.style.fontWeight = "600";
extraHint.style.fontSize = "13px";
extraHint.style.padding = "4px 8px";
extraHint.style.borderRadius = "12px";
extraHint.style.marginTop = "4px";
extraHint.style.marginLeft = "4px";

hint.parentElement.appendChild(extraHint);


}

// IntersectionObserver voor mobiele & lazy load
const intersectionObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
addHint(entry.target);
intersectionObserver.unobserve(entry.target);
}
});
}, {
root: null,
rootMargin: “0px”,
threshold: 0.1
});

function observeLabels() {
const labels = document.querySelectorAll(‘\[class\*=“ImageOption__ItemLabel”\]’);
labels.forEach(label => intersectionObserver.observe(label));
}

// MutationObserver om nieuwe labels te detecteren (Elfsight kan async laden)
const domObserver = new MutationObserver(observeLabels);
domObserver.observe(document.body, { childList: true, subtree: true });

// Initial call
observeLabels();
})();
1 Like
6

Hi there, @user8320 :waving_hand:

I’ve checked your widget and it works great. Thanks a ton for sharing your wisdom with the community - that’s much appreciated :blush: