Knowledgebase: Site Design

How Do I Make The "Buy" Link On Category Pages Direct Customers To The Product Page?
 

By default, the "Buy" or "Add to Cart" button underneath each product on category pages will automatically add the product to the customer's shopping cart.  It will follow whatever "Add to Cart Action" you have set up in the General Store Settings area of your Online Store Manager.

On the one hand, if your products have selectable options, then the visitor is directed to the product's listing page in order to select those options. However, for regular, stand alone products, the default category buy link action is to add to cart and direct them towards the checkout pages.

With a little template editing, it's possible to have the category "buy" link direct the customers to each product page (regardless of option) instead of adding to cart. If you would like to direct the customer to the product listing pages instead, we've set up the following instructions to help you along:

Important:
The following information will involve making changes to your HTML template coding. Before making any changes to your site's templates, be sure to create a backup of your code first.

Please keep in mind that this information is being provided solely as a courtesy. Custom design or HTML/CSS template changes are outside the scope of our provided technical support. If you are uncomfortable with making changes to your site's HTML/CSS, please contact our Support Team and inquire about HTML and design services which can make these changes for you.

To continue, you will need to Modify the category_0.html template. This can be found via FTP, or you can use the template editor in the Online Store Manager.

Core Theme

Use the following steps if your theme is a Core theme.

  1. Go to Settings >Design >Themes & Styles in your Admin panel.
  2. Towards the top right of the page, you will see a button labeled "Edit Template (HTML)." Click this button.

You will see a listing of your store theme's unique templates. If there is a category_x.html template within this list, look to the far right of the listing and click on the "Action >Edit" button for it and skip to step 5 listed here. Otherwise, if the category_x.html template is not present, proceed to step 3 next.

  1. On the page, look for the "Go to Folder:" drop down menu (found along the top right) and select your store's "template/common" folder.

Tip
There will be only one common folder listed. However, depending on the type of theme you have selected, the common folder may be called "template/common-core" or "template/common-html5."

  1. In the common folder, locate category_0.html, look to the far right of it and click on the "Action >Edit" button
  2. In the template, look for the block of coding found within the following start and end tags:
<!--START: addtocart-->

<--END: addtocart-->
  1. Change the coding in the block to the following:
<div class="action">
<a href="product.asp?itemid=[catalogid]" class="btn btn-default">
<span class="buyitlink-text">[category_buyitlink] </a>
</div>
  1. Save your changes

HTML5 Themes

Use the following steps if your theme is an HTML5 theme.

  1. Go to Settings >Design >Themes & Styles in your Admin panel.
  2. Towards the top right of the page, you will see a button labeled "Edit Template (HTML)." Click this button.

You will see a listing of your store theme's unique templates. If there is a category_x.html template within this list, look to the far right of the listing and click on the "Action >Edit" button for it and skip to step 5 listed here. Otherwise, if the category_x.html template is not present, proceed to step 3 next.

  1. On the page, look for the "Go to Folder:" drop down menu (found along the top right) and select your store's "template/common" folder.

Tip
There will be only one common folder listed. However, depending on the type of theme you have selected, the common folder may be called "template/common-core" or "template/common-html5."

  1. In the common folder, locate category_0.html, look to the far right of it and click on the "Action >Edit" button
  2. In the template, look for the following instances of HTML coding

onclick="window.location = 'add_cart.asp?quick=1&amp;item_id=[catalogid]'"

  1. Change the above coding from the above to this:

onClick="window.location = 'product.asp?itemid=[catalogid]'"

  1. Save your changes

Tip:
It may be easier to copy/paste the code into Notepad or your favorite text editor in order to find and replace the "before" and "after" changes easier.

For the default category_0.html template, there will be six instances of this code to change.

Changing the Link/Button Label

Lastly, you may want to edit the category page further so that the "Add to Cart" button's label is changed to say "View Item" or something similar.

While still in the Online Store Manager,

  1. Go to Settings >Design >Store Language
  2. Using CTRL-F on your browser, look for "Category"
  3. Towards the top of the listing of category labels you should see "buyitlink"
  4. Change this from "Add to Cart" to "View Item"
  5. Save the store language page.

Be sure to clear your store's cache on your store to see changes if they are not readily apparent.
Help Desk Software by Kayako fusion