Can not customize "Add to Cart" button

-- HikaShop version -- : Essential 2.3.2
-- Joomla version -- : 2.5.14
-- PHP version -- : 5.3
-- Browser(s) name and version -- : firefox 31
-- Error-message(debug-mod must be tuned on) -- : No error message after turning on "debug mode" and "reporting" set to "max".

Or do I have to turn it on and the support personnel can take a look? Let me know if so.

Hi,

Was trying to customize "Add to Cart" button to a image but found nowhere I can do it. This change will be done on "Add to cart＂button only and should have no impact on "login" button on the same page.

I already made a try by following this page:

[a] www.hikashop.com/forum/4-how-to/47121-cu...-to-cart-button.html [/a]

The file I worked on is / media/ com_hikashop / css / style_orange.css. ( In HikaShop control panel I have configured front-end style as orange.

Any ideas? Thx.

Hi,

If you are using the orange style, it is the good file to edit, or you can edit too the frontend css file.
The properties needs to be applied on the class "hikashop_cart_input_button" and we recommend to use the "!important" attribute after the css property in order to force it.

Something like:

.hikashop_cart_input_button{
    background: url('...') !important;
}

Hi Xavier,

I add this line

background: url('...') !important;

.hikashop_cart_input_button{
    background: url(../images/add-to-cart.jpg) !important;
    background-color:#f8a441;
	margin-top:10px;
	margin-bottom:10px;
	border-right: 1px solid #dc4410;
	border-bottom: 1px solid #dc4410;
	border-left: 1px solid #f4b57d;
	border-top: 1px solid #f4b57d;
	padding:3px 5px;
	color:#fff;
	cursor:pointer;
	font-weight:bold;
	*padding:0px;}

Nicholas,

Thanks a lot. I works.

Instead of going CCS way, I adjusted the size of button by putting space between quotes:

ADD_TO_CART="                                  "

Also a little add-on for whoever might encounter the same problem in the future:

After the above-mentioned change, the "add to cart" button did change into the image so it looks more fancy now. Everything looked good until I tested check out page (The page right after I clicking "add to cart"button). To check out you have to either login (if you have an existing account) or register (if you don't have existing account） to associate yourself with your payment method. To my surprise, the "login" button and "register" button were changed into "add to cart“ image too which is not a expected result. Added code in red fixed the problem (media / com_hikashop / css / style_orange.css file)

#hikashop_checkout_page .button{
[color=#bb0000]background: url(../images/login.jpg) left !important;[/color]
margin-top:0px;
margin-bottom:0px;}