You can use this snippet if you'd like to show your customers a message above the shipping rates.
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 %}
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.
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; }