Is there a way I can add an animation to Add to cart button on Woocommerce such that the image of the product fly to the basket.
PN: I am using my own theme in WooCommerce Shopping Cart.
Is your theme using AJAX to add the product to the cart? A solution would be to add a click listener to the 'Add to cart' button with jQuery. Then in your click listener you can animate the product image.
Another solution is explained in this post. There the default jQuery addClass() function is being overridden and an event gets triggered when the addClass function is being called.
The next thing you can do is to listen to this event with the jQuery bind() function, check if the target is an 'Add to cart' button, and do your animation.
A third solution would be to dequeue the WooCommerce 'add to cart' file and create your own version. The benefit of this is that you can add a trigger that's only being triggered when the product is successfully added to the cart. The disadvantage is that you have to check this file everytime you upgrade WooCommerce.
Edit: I see that the WooCommerce 'add to cart' file already has a trigger which you can use:
// Trigger event so themes can refresh other areas
$( 'body' ).trigger( 'added_to_cart', [ fragments, cart_hash ] );
Related
The problem: Radio Button for shipping options successfully goes to selected state which clicked, but does not show a black dot in the selected item to show to the user that it's been selected.
This is on this WooCommerce checkout page of my site. Sorry, the only way to go there is to first select an item on the store, then proceed to checkout: https://dayhikesneardenver.com/shop/
I've inspected the using google chrome inspect page and cannot for the life of me figure out if this is an issue with: 1) My Uncode theme styles, 2) WooCommerce styles, or 3) something else.
Thanks for any insight on this.
When removing the "webkit-appearance: none" property on the radio button form or changing it (webkit-appearance: checkbox) the button appears checked.
The properties
I think something else is overwritting the original style of the button.
Before
After
I have some text field i.e in custom size(length,with) of product.
I want include a check box , when i click on check box , custom size fields will show/hide on checkbox click.please help me how i can perform this without any code customization.
I had tried some plugins but they add text fields but not show/hide them on checkbox click
First of all you need to add some scripts to make the code work. That is, you need to capture the checkbox click and analysing checked is true or false, you have to write code to show or hide the fields. A simple jQuery function is sufficient.
Or you can use product option plugins to make it work. I don't know which plugin you have used. I have used this one for my client. Try this if you need a plugin.
please help my add to cart button is missing
Site:http://emceecouture.com/shop/mc728/#.Uwx05fSSz1g
I really have no idea where to retrieve it back
simplest workaround is to change class of div containing product quantity and add to cart button (/woocommerce/single-product/add-to-cart/variable.php).
i.e. from
<div class="single_variation_wrap">
to
<div class="single_variation_wrap_mod">
to fool js which is adding style="display:none" even when you remove it from html code.
I can't understand why woocommerce developers decided to hide this button and add js to show it after someone selects variation, rather than (as every other ecommerce on the planet) show add to cart button, and focus on the attributes if someone haven't selected one.
IMHO this is an UX fail.
An example of the cufon breaking is when I add a product to my cart,
example here http://joemeetsjoy.com/products
When you click buy now then click ok on the pop up box the cufon breaks. It also happens if you go the the shopping cart and choose a shipping option.
Any ideas why this happens?
I ran a Cufon.refresh() call, which restored the Cufon (running Chrome 15 on Mac) after clicking the "Buy Now" button (which did, as you say, "break the Cufon").
You may want to consider altering the behavior of the onClick handler of that button to run this function. A DOM update or reflow might be causing the Cufon to break as I noticed the onClick handler makes an AJAX call.
How can I add the Ubercart buttons (Update cart and Checkout) to the bottom and top of the cart page ?
I currently have only on the bottom.
thanks
Add them in your preprocess_page and page template.