Replace ADD_TO_CART by a cart icon in product list

-- HikaShop version -- : 2.3.5
-- Joomla version -- : 3.x

I found many old 2 years+ threads about this topic with a wide range of solution, the next more complicated than the preceeding...

Is there a simple "switch" or CSS Trick way to replace the ADD_TO_CART button text for a Cart Icon wether it is an image or a Symbol font?

I mean, for HikaShop 2.3.5. And for Product listings and product page views.

Hi,

By using the CSS mode for the button, you can set a background picture on the "a.hikashop_cart_button" and specify the height and the width for the element.
You can also change the translation for the "add to cart" text to something empty ; or change the color to "transparent", change the font-size to something really tiny...

There is no really a switch ; but there are a lot of CSS solutions.

Regards,

Thank you Jerome, this sounds good.

But could you enlight me a little bit with this?

By using the CSS mode for the button

Is this a setting in the configuration? I'm not familiar with a "CSS mode"

Hi,

See : www.hikashop.com/support/support/documen...html#display_general

Regards,

Have added the code for an image to this in frontend_custom.css:

a.hikashop_cart_button, a.hikashop_compare_button, .hikashop_cart_input_button, .hikashop_nostock_button{

and here

a.hikashop_cart_button:hover, a.hikashop_compare_button:hover, .hikashop_cart_input_button:hover{

but I'm not successful. I get the extra room for the icon but no way to show the icon. Have tried with both png and jpg.

This is the code taken from a thread in the forum:

background-image: url(../images/cart.png);
background-repeat: no-repeat;
background-position: right;
height: 32px;
padding-right: 40px !important;
background-color: transparent;
cursor: pointer;

also tried the path inside url() with ' ' and " ".

Nothing shows, only the reserved 40px padding right

Any clue?

Hi,

Best is to use the browser development tools in order to see what CSS rules are applied ; you can also tweak them dynamically in order to find the good CSS rule (or good image path).
www.hikashop.com/support/support/documen...ize-the-display.html

Regards,

Right, did this the whole time, the CSS rules look coherent but the screen result didn't. I tried all ways to get into the image folder but the image never renders.

Maybe I will have to reask for help once the site is online.

Thank you anyway.