Change "Add to cart"&"Proceed to checkout" buttons

-- url of the page with the problem -- : silverguitars.com/test/guitars-pickups/s...r-pickups/black-rose
-- HikaShop version -- : 2.5
-- Joomla version -- : 3.4.1
-- PHP version -- : 5.4.8
-- Browser(s) name and version -- : Firefox 36.0.4

Hello,

Please I would like your help to change the Icons.

I'm trying to change the add to cart icon with the attached but when I add the background url to Css then it changes all of the icons (Proceed to cheout, register, add etc).

I would like to add different icons to every button.

Is it possible to do?
I read and the similar posts, made the changes but without any success.

Please could you help me?
The Url is: silverguitars.com/test/guitars-pickups/s...r-pickups/black-rose



Thank you very much in advance!

Best,
Nikos

Hello,
You're issue is probably coming from the CSS code that you used to add your add to cart image, can you tell me which CSS code did you use ?
Using that kind of CSS code for your product page will probably the job :

Thank you Mohamed,

Please wait to check it.

Mohamed I use the frontend_custom.css and I added this code to change the color:

a.hikashop_cart_button, a.hikashop_compare_button, .hikashop_cart_input_button{
text-decoration:none;
color: #777777 !important;
cursor: pointer;
display: inline-block;
line-height: 18px;
margin: 5px;
padding: 3px 8px;
text-align: center;

text-shadow:none !important;
border:1px solid;
border-color: #EEEEEE #DDDDDD #DDDDDD #EEEEEE;
border-radius:3px;
background-color: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eee));
background: -webkit-linear-gradient(top, #ffffff, #eee);
background: -moz-linear-gradient(top, #ffffff, #eee);
background: -o-linear-gradient(top, #ffffff, #eee);
background: linear-gradient(top, #ffffff, #eee);

border-color: rgba(11, 155, 0, 0.;
outline: 0;
outline: thin dotted \9;
/* IE6-9 */

-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(11,155,0,.6);

}

The problem is that when I try to change the add to cart button with my icon then the same icon is on the Proceed to checkout button, on the login button, on the register button, on the add coupon button and on the finish button.

Is there a way to have a different icon on all of these buttons?

Thank you Mohamed!

Nikos

Hi,

Sure. You just need to prefix your CSS with a main class.

So for example, for the buttons on the product page, you should replace:
a.hikashop_cart_button, a.hikashop_compare_button, .hikashop_cart_input_button{

by:
.hikashop_product_page a.hikashop_cart_button, .hikashop_product_page a.hikashop_compare_button, .hikashop_product_page .hikashop_cart_input_button{

For the checkout buttons, it would be:
.hikashop_checkout_page a.hikashop_cart_button, .hikashop_checkout_page a.hikashop_compare_button, .hikashop_checkout_page .hikashop_cart_input_button{

If you look at the HTML of the pages with your browser inspector, you can see these classes on the main divs of the main area of the pages.