Skip to content
English - United States
Contact Us
  • There are no suggestions because the search field is empty.

Custom Buttons using Add To Cart Replacement Text

To make things easier, we have created a video to walk you through the basics. Please take a few minutes to watch it. We will also outline the steps below.

 

The Add To Cart Button Replacement Text field is useful for a few things. You can add simple text to it in order to temporarily make a product unpurchaseable on your store. You can add more information about upcoming products. You can add an image to draw attention. However, one of the best uses is to create a custom button. A custom button can direct your customers to an article, a different product or many other locations.

Using Add To Cart Replacement Text

Prior to adding Add To Cart Button Replacement Text, you will want to go through the steps for creating your product.

Once created, you can access the field by navigating to the Advanced Info section of your product and clicking the Product Display tab.

 

Scroll down and locate the Add To Cart Button Replacement Text field.

 

You can add simple text to the field and click the blue Save button at top right.

 

This will replace the Add To Cart Button with the text.

 

In some cases this will be good enough, but if you are looking for something extra, let's discuss creating a custom linked button.

Creating a Custom Button

Begin by removing any text in the Add To Cart Button Replacement Text field and saving the product. View your product live and copy the Add To Cart Button image by right-clicking it and choosing Copy File. Paste the image into photo editing software, such as Google Drawings.

In your photo editing software, create a text box with your new button text on it. Place the text over the existing button and save the new image onto your personal computer.

To add the image back into your store, from your Admin Dashboard, navigate to Design > Site Content and click the blue Add Article button.

To upload your image to your store, locate the Article Body section. Using the Insert Image button, locate the image on your computer and upload it. Once uploaded, click the HTML button (<> icon) to see the code for the image. It will look something like this:

<img src="/v/vspfiles/assets/images/custom-preorder-button.png" alt="Preorder Button">

You will need to save this code. You can cancel the article after uploading the image.

 

We will now need to create a destination for our button to link to. For this, you could have our marketing and web design experts create a custom page to gather customer information, however, Jotform will also work well for this. Using their Form Builder, we created a Pre-Order Form capable of collecting customer name, email address and allowing the customer to specify how many of the product they wish to preorder. Once created you can use the Publish option and choose the Embed tab. This will allow you to copy the HTML code for your form.

 

Create a new Article to hold your form (Design > Site Content > Add Article). Choose a Category ID (like "Sample Articles"). In the Article Body, click the HTML button and paste your Jotform code. Click Save.

Once saved, use the View Live button to see your new Article. Copy the Article URL from your browser's address bar. It should look similar to this: http://www.yourvolusionstore.com/article.asp?ID=123

 

Now, we will build the HTML code for our button. Using the standard "image as a link" format, we start with this template:

Modified Button Code Template:

<a href="URL_OF_YOUR_ARTICLE">
  <img src="URL_OF_YOUR_IMAGE" alt="Button Text">
</a>

Using our created Article, I copied the article URL and inserted it into our button code:

<a href="/article.asp?ID=123">

Then, locate the image source code from the article where you uploaded your button image and add it to the snippet:

<img src="/v/vspfiles/assets/images/custom-preorder-button.png" border="0">

The Final Completed Code: This is the code we will be using for our Add To Cart Button Replacement Text field. Copy and insert the code into the field:

<a href="/article.asp?ID=123">
  <img src="/v/vspfiles/assets/images/custom-preorder-button.png" border="0">
</a>

Click the blue Save button to save your changes. With your button code added, your product will now show the Preorder button. Clicking the button will take your customer to the Preorder form Article, allowing them to place their preorder for your new product.