A/B test scripts for pricing pages


€ 47

Billed annually


€ 97

Billed annually


€ 197

Billed annually

You can try out the code yourself by running code in the console.

Press Command+Option+J (Mac) or Control+Shift+J (Windows, Linux, Chrome OS) to open the chrome console.

Copy the code into the console and press enter to see the changes.

1. Re-ordering pricing plans

With this change, we sort the price from high to low.
//this function takes an element and moves it up in the same level
function moveUp(element) {
  if (element.previousElementSibling)
    element.parentNode.insertBefore(element, element.previousElementSibling);

//this function takes an element and moves it down in the same level
function moveDown(element) {
  if (element.nextElementSibling)
    element.parentNode.insertBefore(element.nextElementSibling, element);

//then we select the first and the third pricing block
var pricingBlock1 = document.querySelector(".pricingBlock > div:nth-child(1)");
var pricingBlock3 = document.querySelector(".pricingBlock > div:nth-child(3)");

//then we call the functions to get our new order

2. Adding a most popular option

With this change, we add a red border and add some text to the blocks.
// We use this to declare the CSS with JavaScript.
let objectStyle = document.createElement("STYLE");
let objectCSS = document.createTextNode(
  ".pricingBlock > div:nth-child(2){border: 1px solid #f73065;} .pricingBlock > div:nth-child(2) > p:nth-child(1){color: #f73065;}"
// This functions allows us to quickly add elements.
function addElement(elementType, textNode, targetSelector) {
  var newNode = document.createElement(elementType);
  var newTextNode = document.createTextNode(textNode);
  var targetNode = document.querySelector(targetSelector);
  targetNode.parentNode.insertBefore(newNode, targetNode);
// We call the functions to add the elements to the pricing blocks.
  "Most popular!",
  ".pricingBlock > div:nth-child(2) > p:nth-child(1)"
  "Just starting out!",
  ".pricingBlock > div:nth-child(1) > p:nth-child(1)"
  "When simple isn't enough!",
  ".pricingBlock > div:nth-child(3) > p:nth-child(1)"

3. Adding a comparison benefits

With this change, we add benefits to all of the blocks.
// This functions adds a list of unique selling points to a target element.
function addUniqueSellingPoints(usps, loc) {
  var ul = document.createElement("UL");
  for (i = 0; i < usps.length; i++) {
    var le = document.createElement("LI");
    var usp = document.createTextNode(usps[i]);

// Here we declare and assign the benefits we wan't to add.
var benefitsBlock1 = ["Benefit 1", "Benefit 2"];
var benefitsBlock2 = ["Benefit 1", "Benefit 2", "Benefit 3"];
var benefitsBlock3 = ["Benefit 1", "Benefit 2", "Benefit 3", "Benefit 4"];

// Here we get the different pricing blocks.
var pricingBlock1 = document.querySelector(".pricingBlock > div:nth-child(1)");
var pricingBlock2 = document.querySelector(".pricingBlock > div:nth-child(2)");
var pricingBlock3 = document.querySelector(".pricingBlock > div:nth-child(3)");

// We call the functions to insert our unique selling points.
addUniqueSellingPoints(benefitsBlock1, pricingBlock1);
addUniqueSellingPoints(benefitsBlock2, pricingBlock2);
addUniqueSellingPoints(benefitsBlock3, pricingBlock3);

Want to learn to run any client-side A/B test with JavaScript?

Get started with my free JavaScript for Optimizers mini-course!