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:

.hikashop_cart_input_button{
  background: url("yourimageadress") no-repeat;
}

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:

a.hikashop_cart_button, a.hikashop_cart_button:hover, a.hikashop_compare_button, a.hikashop_compare_button:hover{
	background-image:url(../images/button.jpg);
	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;
}
a.hikashop_cart_button:hover, a.hikashop_compare_button:hover{
	outline: 2px solid #92C1FF;
}
#hikashop_order_listing a.hikashop_cart_button, #hikashop_order_listing a.hikashop_cart_button:hover,
#hikashop_checkout_login a.hikashop_cart_button, #hikashop_checkout_login a.hikashop_cart_button:hover,
a.hikashop_compare_button, a.hikashop_compare_button:hover{
	float:none;
}

sorry I have wrong
this is the code:

a.hikashop_cart_button, a.hikashop_cart_button:hover, a.hikashop_compare_button, a.hikashop_compare_button:hover{
	background: url("images/addtocart.png") no-repeat;
}
a.hikashop_cart_button:hover, a.hikashop_compare_button:hover{
}
#hikashop_order_listing a.hikashop_cart_button, #hikashop_order_listing a.hikashop_cart_button:hover,
#hikashop_checkout_login a.hikashop_cart_button, #hikashop_checkout_login a.hikashop_cart_button:hover,
a.hikashop_compare_button, a.hikashop_compare_button:hover{
	float:none;
}

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

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

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..

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 :

.btn.button.hikashop_cart_input_button.art-button {
}

.btn.button.hikashop_cart_input_button.art-button {
background-image:url(../images/button.jpg);
}

.btn.button.hikashop_cart_input_button.art-button {
background-image:url(../images/button.jpg) !important;
}

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:

.hikashop_product_quantity_main input{
}

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

I solved in this way:
before I modified the css

a.hikashop_cart_button, a.hikashop_cart_button:hover, a.hikashop_compare_button, a.hikashop_compare_button:hover{
  border:1px solid #ffffff;
  color:#000000;
  font-family:Verdana,Arial,Helvetica,sans-serif;
  font-size:15px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
  text-transform: uppercase;
}

ADD_TO_CART="<img src="http://www.acme-sicily.com/site/images/addtocart.png" style="float:right "style="padding-bottom:-40px" align="right" style="vertical-align:top">"