Adding dynamic text to WPGive donation form

Hi, @trashcashph.

Glad you reached out.

You can find a similar setting for this by navigating to Donations > Settings > All Forms and then selecting “edit” under the Multi-Step form you’d like to update. Click the left-hand menu option titled “Donation Options”, and scroll down just a bit to see the Donation Levels. This is where you can add text:

In the Multi-Step and Classic templates, the text you enter will display as a tooltip, it won’t replace the numerical value. It’ll look something like this:

We are collecting feedback about the possibility of adding text to donation levels. I’ve added you as a voter for it here https://feedback.givewp.com/feature-requests/p/donation-levels-should-support-textdescriptionsmulti-step-classic-form.

?We are actively tracking user feedback to understand further the needs you all have. You can use the link to check in for updates or to provide additional details of your own. I would encourage you to comment on that post about the impact this would have on your organization. Information like that is always helpful for our teams to see.

I’ve also linked your ticket internally, so if this feature request is developed, we can reach back out to update you.Give the post above a look, and let me know if there are any additional details you would like for me to add. I want to ensure your need is as accurately reflected as possible, and I’m happy to include an internal note to our teams with any specific information you would like them to have.

Thanks for using GiveWP! Have a great day.

Hi @matheusfd Thank you for replying to my inquiry! Is there’s a way to modify the code to add text above donation options to display the description after customer tap each options?

Hi, @trashcashph.

It would be possible with some custom code, but I do not have a handy code snippet I could give you. In this case, you would need to develop it.

?Please let us know if you have further questions or need additional assistance!

Hi

I have already done what I want to achieve. I created a new custom function and I access the CSS class from there. Here’s my sample JS code.

// Get the selected donation amount and update the impact text

function updateImpactText() {

    var selectedAmount = document.querySelector('#give-amount').value;

    selectedAmount = selectedAmount.replace(/,/g, '');

    var impactValue = selectedAmount / 55;

    var weightEquivalent = Math.round(impactValue * 100) / 100;

    var bottleEquivalent = (impactValue * 55).toLocaleString();

    document.querySelector('#selected-value').textContent = selectedAmount;

    document.querySelector('#weight-equivalent').textContent = weightEquivalent;

    document.querySelector('#bottle-equivalent').textContent = bottleEquivalent;

}

window.addEventListener('load',populateImpact);

// Add the input event listener to update the impact text whenever the value changes

document.querySelector('#give-amount').addEventListener('input', updateImpactText);

// give-donation-level-btn give-btn give-btn-level-0 give-default-level

var donationButtons = document.querySelectorAll('.give-donation-level-btn');

for (var i = 0; i < donationButtons.length; i++) {

    var button = donationButtons[i];

    // Exclude the "Custom Amount" button

    if (!button.classList.contains('give-btn-level-custom')) {

    button.addEventListener('click', handleButtonClick);

    }

}

  // Event handler for button click

function handleButtonClick(event) {

    // Get the selected donation amount from the clicked button

    var selectedAmount = event.target.value;

    selectedAmount = selectedAmount.replace(/,/g, '');

    // Update the impact text with the selected amount

    var impactValue = selectedAmount / 55;

    var weightEquivalent = Math.round(impactValue * 100) / 100;

    var bottleEquivalent = (impactValue * 55).toLocaleString();

    document.querySelector('#selected-value').textContent = selectedAmount;

    document.querySelector('#weight-equivalent').textContent = weightEquivalent;

    document.querySelector('#bottle-equivalent').textContent = bottleEquivalent;

}

function populateImpact(){

    document.querySelector('#selected-value').textContent = "0";

    document.querySelector('#weight-equivalent').textContent = '0';

    document.querySelector('#bottle-equivalent').textContent = '0';

}

Glad to hear that you found a workaround, @trashcashph.

Thanks for using GiveWP! Have a great day.