Want to test more than just a link? Then, you need to learn JavaScript. Use my method to start changing button icons on your website.

I started a series covering practical step-by-step ways to use JavaScript to set up winning experiments on your website.

Each article in the series covers a different JavaScript method, illustrated by applying best practices to websites as hypothetical cases.

Business case: Changing button icons to increase the conversion rate

Our hypothetical case for this chapter is about changing button icons to increase the conversion rate. An article from Craig Sullivan talks about useless iconography. Our client wants to test if using a well-known icon will increase the conversion rate.

In this hypothetical scenario, we arrive at the following hypothesis:

“Because we saw that icons should only be used when visitors don’t have to learn them, we expect that changing our icons to well-known icons will cause an increase in sales. We’ll measure this using conversion-rate.”

To test this hypothesis, we’re going to apply the changes below:

Code

Now for the fun part! 

To execute the change, we run the following JavaScript code on the testing page. Try it out for yourself to see it in action!

var getShoppingCartButton = document.querySelector(
  ".shopping-cart > div > a > i"
);
var getAddToCartButtons = document.querySelectorAll(
  ".add-to-cart > div > div > div > a > i"
);

let shoppingCartButtonClassList = getShoppingCartButton.classList;
shoppingCartButtonClassList.replace("fa-shopping-bag", "fa-shopping-cart");

for (var i = 0; i < getAddToCartButtons.length; i++) {
  let getAddToCartButtonsClassList = getAddToCartButtons[i].classList;
  getAddToCartButtonsClassList.replace("fa-plus-square", "fa-cart-plus");
}

Breakdown

var getShoppingCartButton = document.querySelector(
  ".shopping-cart > div > a > i"
);

In the first line of code, we declare the variable getShoppingCartButton. We assign the shopping cart icon to this variable using the querySelector method. Notice how we dive down three times in the selector to get the element we want.

We start by declaring all our variables.

var getAddToCartButtons = document.querySelectorAll(
  ".add-to-cart > div > div > div > a > i"
);

This line of code is almost the same, but we are selecting an array of elements using the querySelectorAll method. Every time the property is finished selecting and returning an element, it will find the next one and at it to the array. The array is eventually assigned to the variable getAddToCartButtons.

The second part of the code replaces the icon of a single button.

let shoppingCartButtonClassList = getShoppingCartButton.classList;

In this line of code, we get the array of classes attached to the variable. We assign this array the newly declared shoppingCartButtonClassList variable.

shoppingCartButtonClassList.replace("fa-shopping-bag", "fa-shopping-cart");

Using the replace method, we look and replace the “fa-shopping-bag” string with “fa-shopping-cart”. In this example, I am using Font Awesome. These classes control what icon is shown. By changing the class, we change the icon to a new one.

Now the third part of the code starts. This part is where we change multiple button icons at once.

for (var i = 0; i < getAddToCartButtons.length; i++) {

In this line of code we start a loop to check all the items collected by our querySelectorAll method.

let getAddToCartButtonsClassList = getAddToCartButtons[i].classList;

We declare a temporary variable called getAddToCartButtonsClassList. We assign the class list of the currently looped item to this variable.

getAddToCartButtonsClassList.replace("fa-plus-square", "fa-cart-plus");

Then we replace the “fa-plus-square” class with the “fa-cart-plus” class. This changes the button on the page.

It will do this for every saved button in the array. It is eventually looping three times to change all icons.

}

Then we close the loop and end our script.