less than a minute read • Updated 9 minutes ago
Add a message above the shipping rates
How to display a custom message above the shipping rates on the cart and checkout.
Copy this code onto your computer's clipboard:
{% if context == "cart" or context == "checkout" %}
<script>
FC.client.on("render.done", function() {
var message = '<p>REPLACE THIS WITH YOUR SHIPPING NOTICE.</p>';
if ($(".shipping-note").length == 0 && FC.json.shipping_address.shipping_results.length > 0) {
if (FC.json.context == "checkout") {
$("div.fc-form-group.fc-shipping-rates").prepend('<div class="row shipping-note"><div class="col-sm-10 col-sm-push-1">' + message + '</div></div>');
} else {
$(".fc-shipping-rates").prepend('<div class="fc-input-group--sidebar shipping-note"><br>' + message + '</div>');
}
}
});
</script>
{% endif %}Step 2: Modify the Checkout Template
Go to your Checkout configuration in your Foxy admin.
Scroll down until you see custom footer under Add custom header and footer code to your templates. You may see some code already in the text area. You can paste the code that you copied to your clipboard into the top of that box (take care not to remove anything that's already there).
Change REPLACE THIS WITH YOUR SHIPPING NOTICE. to your desired message.
Scroll down until you see the "Update" button and click to save.
Step 3: Test
Add a product to the cart and enter a shipping address to ensure that it works as expected. Also proceed to checkout to ensure that it works there as well.
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 .shipping-note {
background-color: lavender;
border-color: pink;
}
</style>To change the text, use:
#fc .shipping-note p {
color: red;
}