'Add to cart' button image. How can I remove the text "Add to cart" ?

[mikemaic]

Hello! I'm using Joomla 2.5 with virtuemart 2.0.2. I have the following problem:
I wanted to change the "Add to cart" button with an image (without text). I've modified the file 'components\com_virtuemart\views\productdetails\tmpl\default_addtocart.php' by replacing the line:
- "<input type="submit" name="<?php echo $button_name ?>"  class="<?php echo $button_cls ?>" value="" title="<?php echo $button_lbl ?>" />" 
with this one:
- "<input type="submit" name="<?php echo $button_name ?>"  class="<?php echo $button_cls ?>" value="" title="<?php echo $button_lbl ?>" />"   (I've just removed the value).

Now, in product details the "Add to cart" button looks ok (like I want), but in the modules: "Featured Products" and "Best Sales" the text is still over the image. How can i remove that text ("Add to cart") ?

Thank you!

[attachment cleanup by admin]

[Da_Hobit]

Hi Mike,

try deleting the textvalue in your language ini file...

COM_VIRTUEMART_CART_ADD_TO="Add to cart"

change it to COM_VIRTUEMART_CART_ADD_TO=""

[mikemaic]

Hi, Da_Hobit!
Thank you very much for this! You've just saved my theme 

[jenkinhill]

mike, make sure you use a language override or that edit would be wiped out on the next VirtueMart update. http://forum.virtuemart.net/index.php?topic=92944.0

[bozoleclown]

hello,

can you tell me how to replace the add button by an button image

and put in the file vmsite-ltr.css?

Thank you in advance

[Da_Hobit]

there are 2 solutions

1. change the 'background image' = /components/com_virtuemart/assets/images/vmgeneral/backgrounds.png
but this is a 'sprite' , only 1px width ... so you can change the color but it ain't possible to add an image to your button , just to change the color

2. you create your own button , upload it and change the CSS


option 2:

step 1:
-------
create a button ( i saved it as 'add_to_cart_button.png' )
upload it to : /components/com_virtuemart/assets/images/vmgeneral/

step 2:
-------
edit the code in 'vmsite-ltr.css'
online path: /components/com_virtuemart/assets/css/vmsite-ltr.css

original code :
----------------
span.addtocart-button input.addtocart-button,span.addtocart-button input.notify-button{width:152px;background:#e8e8e8 url(../images/vmgeneral/backgrounds.png) top repeat-x;background-position:0 -160px;color:#fff;border:solid #00a000 1px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;font-size:14px;cursor:pointer;height:34px;text-align:center;letter-spacing:1px;padding:4px 5px;}

editted code :
----------------
span.addtocart-button input.addtocart-button,span.addtocart-button input.notify-button{width:100px;background:url(../images/vmgeneral/add_to_cart_button.png);color:#fff;border:solid #00a000 0px;border-radius:0px;-webkit-border-radius:4px;-moz-border-radius:4px;font-size:12px;cursor:pointer;height:25px;text-align:center;letter-spacing:1px;padding:4px 5px;}

-> you will need to alter the width/height etc. to your own 'button' needs <-

step 3:
-------
delete the text 'add to cart'
oplossing ? -> file 'nl-NL.com_virtuemart.ini' aanpassen

online path: /language/nl-NL/nl-NL.com_virtuemart.ini ( your own language file )

original code :
----------------
rule 22: COM_VIRTUEMART_CART_ADD_TO="Voeg toe"

editted code :
----------------
rule 22: COM_VIRTUEMART_CART_ADD_TO=""

[bozoleclown]

Thank you very much Da_Hobit

Very good tutorial

[dnsorozco]

You forgot one little detail. Mouse over how do we fix that?

[dnsorozco]

well after a few hour of digging around i think i solved my own problem.
Let me add my 5 cents here:

I did everything as describe on the steps above, but once you done you ended up with some unwanted shadows so add -webkit-box-shadow:none;border:0px;
once that is done add the following line if you want a nice mouse over effect:
span.addtocart-button:hover{opacity:0.5;filter:alpha(opacity=50);}

Hope it helps!

[fllipper]

well after a few hour of digging around i think i solved my own problem.
Let me add my 5 cents here:

I did everything as describe on the steps above, but once you done you ended up with some unwanted shadows so add -webkit-box-shadow:none;border:0px;
once that is done add the following line if you want a nice mouse over effect:
span.addtocart-button:hover{opacity:0.5;filter:alpha(opacity=50);}

Hope it helps!

Hello

Were you add the text... "-webkit-box-shadow:none;border:0px;"
Do you have to change more code to ended up with the unwanted the button effects?

I insert the other part off the code "span.addtocart-button:hover{opacity:0.5;filter:alpha(opacity=50);}" and works fine...
Just the movement off the image is not ok...
Could you helpe-me?

[fllipper]

I found one more solution to shadows..
In the file "vmsite-ltr.css" You have to find this text: "span.addtocart-button input.addtocart-button:hover,span.addtocart-button input.notify-button:hover,input.highlight-button:hover,a.highlight:hover{background-position:0 -200px;color:#f2f2f2;}"

You have to delete this "-200px"

Hope this help someone

[fllipper]

One question....

Iff wee delete the text "add to cart" from the file: "en-EN.com_virtuemart", the "tolltip" that appears when you pass the mouse over dessapears too...

How to resolve this?

Tank you in advance

PS: Sorry my bad inglish

[sudhakar]

i'm using vm2 but i didn't find langauge files in my folders plz help..
COM_VIRTUEMART_CART_ADD_TO="Add to cart"
i wanna change all text in my default vm pages..!

[jenkinhill]

http://forum.virtuemart.net/index.php?topic=113895.0