Table of Contents
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; }