Rich-text Reply

CTA on category pages

Stians 10-31-16

CTA on category pages

I will like to test "buy now"  vs "read more" on our category pages. How can change the button text on all products in category view without affecting product pages?

Level 1

robertchan 10-31-16

Re: CTA on category pages

If you're trying to make the edit just via the WYSIWYG, you can flip your experiment into interactive mode to trigger the buy now button on hover. Then click back to editing mode and hover over the buy now button. Click edit text, and change it to "read more" then save. You should be all set. 


If you'd like to go with JavaScript or if the approach above does not work for you, simply copy and paste this code into the Variation Code section of your experiment for the variant you'd like to change the text for:


var buyNowBtns = document.getElementsByClassName('btn-cart');

for(var i=0; i<buyNowBtns.length; i++){
  buyNowBtns[i].innerHTML = 'read more'; // Change read more to whatever you want

Notice how I'm using vanilla JavaScript instead of jQuery. IMO, it doesn't take that much more effort to build code in vanilla JavaScript than in jQuery. If your infrastructure changes in the future, or you decide to use Optimizely X, at least the vanilla JavaScript will persistently function as opposed to the jQuery.

Robert Chan

Experimentation Hero