Change button "add to cart" with a icon

I searched the forum but I found old threads about it.

-how do I change the css button "add to cart" to an icon made ​​by me?
HikaShop Starter 2.1.3
Joomla 2.5.9

Thank you!

Hi there,

You should take a look at our documentation, it explains a lot of thing about styling Hikashop: www.hikashop.com/fr/support/documentation/106-faq.html#css
In your case, you have to use a css rule on the button class: hikashop_cart_input_button. SOmething like:

thanks for the reply
I tried to do as you suggested
but I do not work

summary:
Configuration => System => view = edit css file
right?

and this is the code I tried to replace but does not change much:

What is the code that you added ?

sorry I have wrong
this is the code:

There are four possibilities:
1. The image images/addtocart.png does not exist. Please enter the absolute URL of the file just to make sure.

2. Your browser cache doesn't see your CSS change. So you need to flush your browser's cache.

3. You didn't save the frontend file modification in the configuration. Please double check the modification.

4. You're using normal buttons and not CSS buttons in the configuration of hikaShop.
In that case, you would have to remove the a in front of .hikashop_cart_button in your CSS in order to see the change.

How do I remove the text?
I see this:
www.acme-sicily.com/site/images/ASASAS.bmp
instead of
www.acme-sicily.com/site/images/addtocart.png

With additional CSS. For example :
.hikashop_cart_button{
color: transparent !important;
height: 40px;
}

thanks!!!!!
but apparently there is no way to change the height :huh:
remains high 16px
I solved by making the icon smaller :whistle:

I am trying to add a icon to the add to cart button, when I am using normal buttons (not CSS).

I finally get the icon to appear if I use CSS style buttons, but then the buttons look different than the template.

I have tried to do the modifications according to the normal buttons, as adviced in the thread, but I am doing something wrong.

I am a novice in this field so please explain stepwise how my code below should be modified. I am sure it is something quite obvious for you experienced guys.

Q1) How should I change the following code to have the icon appear using normal style buttons:

/* cart buttons */
a.hikashop_cart_button, a.hikashop_cart_button:hover, a.hikashop_compare_button, a.hikashop_compare_button:hover{
background-image:url(../images/button.jpg);
/* background-image:url("/images/webbutikk/handlevogn-ny2-tb.png"); */
/* background-repeat:no-repeat; */
border:1px solid #356AA0;
color:#000000;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
padding:5px 8px;
text-decoration:none;
cursor:pointer;
float:left;
white-space:nowrap;
}
/* Lagt til 25. juli 2013 for å få ikon i handlekurvknapp */
.hikashop_cart_button{
background-image:url("/images/webbutikk/handlevogn-ny2-tb.png");
background-repeat:no-repeat;
color:transparent !important;
height:50px;
}
a.hikashop_cart_button:hover, a.hikashop_compare_button:hover{
outline: 2px solid #92C1FF;
}



Q2) I think I saw somewhere that the icon could also be added as an image in the language file? Is this correct? If so, how should this be inserted. I.e. what do I need to write. Please be very spesific..

Help will be much appreciated

Hi,

1. I'll probably need a link to your shop if you want me to check you current CSS code in your website

2. I don't think that this can be done with the add to cart button.

Good point.. :whistle:

The domain is:
www.tcam.no

If you could have a quick check I will appreciate any good suggestions, thanks.

Ok, If you want to apply your code through the add to cart button I think that you should probably use this CSS class : Also If your code don't seems to be applied; you can for example "force it" by changing this kind of property : Like this :
Hope this will help you a little.

Yes, this added a image on the background so it did work. Unfortunately it also put the image also on the "contact us" button that is displayed in the product pages (in addition to "add to cart" button).

Is there a way of differenting between the "add to cart" button and the "Contact us" button so the image is only displayed on the first one?

Hi there,

You can use this class instead:

Hmm, that did not seem to do the trick either.

If I enabled the "Display the quantity field on the product page", the image was put in this box when I used the class .hikashop_product_quantity_main input.

Mohamed and Eliot: thanks for pointing out the direction. I'll give it some more try, and see how it goes. If you have other tips and suggestions, let me know

In that case you should use such CSS:
.hikashop_product_stock .hikashop_product_quantity_main input{
//your CSS
}

I solved in this way:
before I modified the css
and then I changed the language file