On your store's checkout page, there are several links customers can click to activate functions such as recalculating shipping or tax, or copy their billing address information into the shipping address form.

You can re-style these links on the checkout page by implementing some JavaScript in your store's Admin Area. This article will demonstrate how to implement this Java Script to change the color value of these links to black.

Caution

Although you do not need any knowledge of how Java Script works to do this, you should be aware that the script must be entered exactly as shown below, otherwise it will not work and may have unforeseen results.

Volusion cannot provide JavaScript support or tuition and this procedure should only be followed with this understanding.

Entering the Java Script Code

Copy the following script into the body of website text article ID 114 in your Admin Area (Design > Site Content):

<script type="text/javascript" language="Javascript">
/* <![CDATA[ */
//
// Note that this script is provided as-is.
// Volusion does not provide support for implementing
// this script in any manner other than what
// is presented in this article.
//
var list = document.getElementsByTagName("font");
 for (var i = 0; i < list.length; i++)
  if (list[i].innerHTML.indexOf("Shipping to ") == 0)
   list[i].style.color= "black";
list = document.getElementsByTagName("a");
 for (var i = 0; i < list.length; i++)
  if (list[i].innerHTML.indexOf("Copy Billing to Shipping") == 0)
list[i].style.color= "black";
 for (var i = 0; i < list.length; i++)
  if (list[i].innerHTML.indexOf("recalculate shipping &amp; tax") == 0)  
   list[i].style.color = "black";
   list[i].style.fontWeight = "normal";
/* ]]> */ </script>

Changing the Recalculate Link

Optionally, if you wish to also modify the "Recalculate" link on this page to use the same "Recalculate" image as displayed in your store's shopping cart page, simply replace the last line in the above code that beings with "list[i].style.color = ..." with the following:

list[i].innerHTML = "<img src='/v/vspfiles/templates/#/
images/buttons/btn_recalculate.gif' alt=''>";

Be sure to change the # in the above code to reflect the theme name or number you are using within your store (for example, if you're using theme "90", the above portion of the script should be changed to "/templates/90/images".

Note that you can configure this script to change the related links' color to your color of choice by editing the "black" value within the script to the color or HTML color value you wish.

Did this answer your question?