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:

Hi Xavier,

I add this line

In the "media / com_hikashop / css / style_orange.css" under class “.hikashop_cart_input_button” so it looks like this:

No change on front page.

And the File manager gives me a "alert" (yellow icon on left hand side) complaining about “！Important" attribute. See the attachment for details. Not sure if I missed anything.

Just in case we have some miscommunications: my goal is to replace the hika "Add to cart" button (which is a form I believe) with a picture like the attached one.


Seems like it should be a image linked to the form?

Thanks Xavier.

Try like that and you'll see your image:
background: url(../images/add-to-cart.jpg) left !important;

Then, it's just a matter of adjusting the CSS to increase the width/height of the element, make the color of the text transparent etc.

Nicholas,

Thanks a lot. I works.

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

Hope this is not a problem in long term.

Thanks to Xavier too.

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)
The attached pic shows what buttons I mean.