Virtuemart Support :: Topic: Disable Animated Add to Cart button (1/1)

Welcome, Guest

TOPIC: Disable Animated Add to Cart button

Disable Animated Add to Cart button 11 years 3 months ago #1908

John Pagan	Hi, As I'll be having my products set to remove when not in stock, I don't need the Add To Cart button to animate and reveal a Product In Stock statement. How do I turn this off?
	The administrator has disabled public write access.

Disable Animated Add to Cart button 11 years 3 months ago #1912

Support	Hi, Why don't try to change your configuration through VM Configuration window to change the "actions" when the product is "out of stock". "Displays 'Notify Me' instead of 'Add To Cart' button" is the best option though. So, add to cart button will be replaced by "notify me" button when the product is out of stock. Attachment Pasted_Image_1_3_13_9_12_AM.gif not found Regards. Forum Support?
	The administrator has disabled public write access.

Disable Animated Add to Cart button 11 years 3 months ago #1917

John Pagan

Hi,

No, you've mis-understood me there I'm afraid.

I'm familiar with those settings for making the Products display certain messages.

What I'm talking about is the Animated "Add To Cart" button in the template. When you click the button, it expands (the cart tips on its side?) to reveal a "product in stock" message.

I don't want that animation to happen. If they can see the product, its in stock. Is there a way to disable it?

The administrator has disabled public write access.

Disable Animated Add to Cart button 11 years 3 months ago #1930

Support

Okay.

Yes, you can disable that animation.

Open this CSS file:
ROOT//templates/<yourjoomlatemplate>/html/com_virtuemart/assets/css/flexibleVM2Global.css

and find this CSS rule:

.FlexibleCSS3Button:hover{
    height:65px;
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
}

And change the "height" value in this CSS rule from 65ps; to 28px; so eventually this rule will look like:

.FlexibleCSS3Button:hover{
    height:28px;
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
}