Header above product add-ons?

Site URL: https://www.seasailing.org/sea-store/p/mini-camp-advanced

Hi - I'm trying to use product add-ons to get people to make small donations when they sign up for individual camp sessions. I created 2 types of donation add-ons and have them on a sample camp page. However, I'd like to add a header and description above add-ons section so people know what they are there for. 

Any gurus out there have some code suggestions? 

1 hour ago, KifS said:

I'd like to add a header and description above add-ons section so people know what they are there for. 

Can you provide a mockup of what you are trying to achieve?

Something like this: A little more space with text highlighting what the add-ons are for more clearly.

Here's some example code, and a screenshot of what it does:

The script checks that the Product Detail Page (PDP) contains at least one Product Add-on with "Support" in the title. This will ensure that it only adds the title to the Add-on section if you are promoting the support add-ons. If a "Support" Add-on is found, a new H3 heading is inserted just above the Add-ons with the title "Help us thrive".

You should add the following to the Code Injection FOOTER panel:

<!-- Add h3 heading above product add-ons on Product Detail Page ---------->
<!-- Copyright Soundfocus Digital [https://sf.digital] -------------------->
<!-- Use freely in your code injection. Do NOT re-publish. ---------------->
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const sfPdpSection = document.querySelector('.pdp-product-add-ons');
    if (sfPdpSection) {
      const sfAddOnTitleDiv = Array.from(sfPdpSection.querySelectorAll('.add-on-title'))
         .find(sfDiv => /support/i.test(sfDiv.textContent));
        
      if (sfAddOnTitleDiv) {
        const sfCustomDiv = document.createElement('div');
        sfCustomDiv.classList.add('custom-add-on-title');            
        const sfCustomHeading = document.createElement('h3');
        sfCustomHeading.textContent = "Help us thrive";
        sfCustomDiv.appendChild(sfCustomHeading);
        sfPdpSection.parentNode.insertBefore(sfCustomDiv, sfPdpSection);
      }
    }
  });
</script>

By default, the heading will use the H3 default style. If you want to change this, you can add some CSS to the Custom CSS panel:

.custom-add-on-title h3 {



}

Did this help? Please give feedback by clicking an icon below  ⬇️

@paul2009 - somehow I missed this sample code. You are amazing. Thank you!!!! Just what I was looking for!