4th April 2012

5 Minute Masterclass: Changing Status Messages with jQuery

We’re currently waiting for access to the language.ini file and proper multi language support from BC. In the mean time we have to rely on 1) editing what labels we can through design mode, 2) deleting %%LNG.%% variables and replacing them with our own text or 3) using crude smart little hacks using jQuery.

So for this 5 minute masterclass, I’m going to show you how to change a status message in the cart page with jQuery.

One such status message appears when your customer submits a coupon code to discount their order. Generally, BC notifies the customer that “The coupon that you entered has been applied to your cart”. Fair enough, but we might want to say something like “Thank you for taking advantage of one of our awesome offers!”. This can be done quickly and easily with one line of code.

To do this, simply open your cart.html template file from Design > Template Files and before the closing </body> tag, add the following code:

<script type="text/javascript">
$("div.SuccessMessage").text($("div.SuccessMessage").text().replace("The coupon that you entered has been applied to your cart.", "Thank you for taking advantage of one of our awesome offers!"));

Updated Status Message
And there we have it, a status message updated using jQuery. You can do this with any text you previously thought impossible to edit. Just change the selector (the $(“div.SuccessMessage”) part) to the appropriate class/id of the element you want to replace. Happy editing!

Leave a Reply

Would you like to improve your conversion rate?

Get a free design analysis and report for your ecommerce site

Submit your details below to receive a free, tailored 12 point conversion rate optimisation report for your website:

Free, no obligation service. We will not share your details.

Thank you for your request!

One of our conversion rate optimisation team will be reviewing your site soon, and we will send your free  report in the next 5 working days.