Add a Message Above the Email Field

You can use this snippet if you'd like to show your customers a message at the top of the checkout page.

Step 1: Get the Snippet

Copy this code onto your computer's clipboard:

{% block login_register %}
<div class="fc-messages">
    <div class="fc-alert fc-alert--info custom-message">
        <ul><li>Your custom message here.</li></ul>
    </div>
</div>
{{ parent() }}
{% endblock %}

Step 2: Modify the Checkout Template

  • Go to your checkout template in your FoxyCart admin here.
  • If you don't see a textarea called “checkout template:”, on the setting labeled “or, use a default template:”, select the “Custom Template” option to make the textarea box appear.
  • Scroll down in the “checkout template:” box until you see {% embed 'checkout.inc.twig' %}. On the next line, paste the code that you copied in Step 1 above. The line following what you pasted should be {% endembed %} .
  • Change the “Your custom message here.” text in the code to be what you'd like to see on the checkout.
  • Scroll down until you see the “Update Template” button and click to save.

Step 3: Test

Add a product to the cart and go to the checkout to ensure that it works as expected.

Optional Styling

You can change the style of the message by adding styles to your custom header on your configuration settings. You may need to click “Add custom header and footer code to your templates” to get the “custom header:” text area.

You can put the styles in between <style> tags. Example:

To change the box styling, use:

<style>
#fc .fc-messages .custom-message{
    background-color: lavender;
    border-color: pink;
}
</style>

To change the text, use:

#fc .fc-messages .custom-message ul li {
    color: red;
}

Site Tools