Icons in wishlist and compare list button in v4.0.x

HI fellows

integrating the bootstrap glyphicons in CS-Cart is a great feature for v4.0.x.

Lets see how we can use this not only in html blocks but also in store buttons like wishlist and compare list buttons.

I first create a file for the buttons hook in product screen like:


I then copy the content form the hook “products:buttons_block” in :

design/themes/basic/templates/common/product_data.tpl and just insert in

{if $separate_buttons}


the icon-th-list at the end like this

{if $separate_buttons}


Same thing for thje wish list line

<{if $separate_buttons}div{else}span{/if} id="cart_buttons_block_{$obj_prefix}{$obj_id}" class="add-buttons add-to-wish ">

by adding icon-star-empty at the end like this

<{if $separate_buttons}div{else}span{/if} id="cart_buttons_block_{$obj_prefix}{$obj_id}" class="add-buttons add-to-wish icon-star-empty">

Then a little css in your design/themes/basic/templates/addons/my_changes/hooks/index/my_style.css (or whatever you liek to call it)

.icon-star-empty:before {
color: #FFFFFF;
content: "";
float: left;
font-size: 17px;
padding: 7px 11px 0 8px;
.add-buttons-wrap .add-to-wish {
display: inline;
margin: 0 0 2px;

.wish-link.text-button {

background-color: #585858 !important;
border: 1px solid #000000;
border-radius: 6px;
color: #FFFFFF;
display: block;
font-size: 9px;
margin: 5px 0;
padding: 9px 11px 8px;
text-decoration: none;

.add-buttons-wrap .add-to-compare .text-button {

background-color: #2294C8 !important;
border: 1px solid #166587;
border-radius: 6px;
color: #FFFFFF;
display: block;
margin: 0;
padding: 8px 5px 7px;
text-decoration: none;
width: 196px;

Thats it!

This is what you get


Have fun playing with glyphicons. See the whole list in http://marcoceppi.gi…rap-glyphicons/



It the same method used for the 4.2.4 version i have? Because i canot find the path design/themes/basic/templates/addons/ it goes design/themes/responsive/templates/addons

Thanks in advance

Hi prelude

havent test it to 42x yet but I think the css3 method with :before would work much better that this early attempt.

I will try this and let you know


Ok prelude

here is the new CSS3 way you need to work with.

  1. OPen a new folder in design\themes\responsive\templates\addons\my_changes\hooks\index\meta.post.tpl

    and add this



Then add to your custom CSS field in VIsula Theme Editor this csscode for adding an icon to buy button (in this case the cart with + sign)

.ty-product-block__button .ty-btn__primary.ty-btn__big.ty-btn__add-to-cart::before {
content: "\f217";
font-family: FontAwesome;
font-size: 18px;
padding-right: 10px;

You need to clean the cache before you see this.

The key to this is the css :before. You can find the code for all font awesome icons here by using the UTF-8 code.

So if you know the css class for the element you want to add the icon, you put the :before and then the rest of the css code you like.

Thats the result


Hope this helps


Thanks that helped