Adding a Custom Checkout Message

• Overview
• Step 1: Add Some Markup to One Page Checkout
• Step 2 Add a Widget to the Widget Area
• Step 3: Enter the Custom Message
• A Note on Theme Modification

Overview

This article will walk you through the steps of adding a custom checkout message to the checkout page just above the place order button. This article assumes are are familiar and comfortable with working with HTML and the AmeriCommerce theme system. We recommend backing up your theme and/or testing the changes in a non-active clone of your theme. 

Step 1: Add Some Markup to One Page Checkout. 

Navigate to Themes > Edit Theme > Pages > One Page Checkout > HTML Editor, then paste the following code just above the ending </div> tag for the main checkout <div class="col-sm-9"> like so: 

<! -- the big, main checkout panel on the left starts here around line 15 -->
<div class="col-sm-9">
... 

   <!-- Message code to paste in just above the end tag below -->
   <div class="row">
      <div class="col-sm-6"></div>
      <div class="col-sm-6">
          <div class="panel pad-5"><ac:widgetarea id="CustomCheckoutMessage"></ac:widgetarea></div>
      </div>
   </div>

<!-- This is the end tag for the big panel, near end of file --> 
</div>

Step 2: Add a Widget to the Widget Area

If done correctly, the markup you pasted to the checkout page above will add widget area called "CustomCheckoutMessage" to One Page Checkout > Widgets, navigate there, then

• Click Add Widget
• In the widget selection screen, select Custom HTML widget
• Drag and drop the custom HTML widget to the CustomCheckoutMessage widget area you just created
• Save

Step 3: Enter the Custom Message

In the new custom HTML widget, add your custom message into the WYSIWG editor.

• Scroll down to the widget name setting and give your new widget a name to make it easy to identify. 
• Bookmark the widget editor page if you plan to make frequent adjustments to the custom message. 

A Note on Theme Modification

Our technical support team can direct you to the location of editor's in the admin and explain how to use different features; however, editing and modifying code is outside the scope of our free technical support. If you would like help adding or editing custom code, we recommend reaching out to our sales team at 1800-936-9006 (option 1) to get a quote on custom implementation. You can also chat with a sales agent at AmeriCommerce.com