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]
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=""
Hi, Da_Hobit!
Thank you very much for this! You've just saved my theme ;D
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
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
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=""
Thank you very much Da_Hobit
Very good tutorial
You forgot one little detail. Mouse over how do we fix that?
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!
Quote from: dnsorozco on June 19, 2012, 17:48:26 PM
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?
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 :)
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 :(
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..!
http://forum.virtuemart.net/index.php?topic=113895.0