[alexdigitalParticipant]

Hi,

I’m using the Woocommerce featured products on my homepage:

http://emresolutions.com.gridhosted.co.uk/

The add to cart button does add the product and show the view cart link after I made these changes:

https://community.theme.co//forums/topic/woocommerce-add-to-cart-button-problem/

However I don’t get the fancy confirmation that I get on the other pages like:

http://emresolutions.com.gridhosted.co.uk/product-category/sem-products/sem-resolution-standards/

Can you help?

-Alex

[Rue NelModerator]

Hello There,

Thanks for writing in! The fancy confirmation is only available in product archive pages. If you want to display sitewide so that you can have the same effect with the woocommerce shortcodes, please insert the following code in your child theme’s functions.php file

// AJAX
// =============================================================================

if ( ! function_exists( 'x_woocommerce_navbar_cart_ajax_notification' ) ) :
  function x_woocommerce_navbar_cart_ajax_notification() {

    if ( get_option( 'woocommerce_enable_ajax_add_to_cart' ) == 'yes' ) {
      $notification = '<div class="x-cart-notification">'
                      . '<div class="x-cart-notification-icon loading">'
                        . '<i class="x-icon-cart-arrow-down" data-x-icon=""></i>'
                      . '</div>'
                      . '<div class="x-cart-notification-icon added">'
                        . '<i class="x-icon-check" data-x-icon=""></i>'
                      . '</div>'
                    . '</div>';
    } else {
      $notification = '';
    }

    echo $notification;

  }
  add_action( 'x_before_site_end', 'x_woocommerce_navbar_cart_ajax_notification' );
endif;

Copy the raw code here: http://pastebin.com/addW1qng to preserve the icon unicode html entity.

After adding the code above, please make sure that you have enable AJAX in WooCommerce by going to WooCommerce > Settings > Products > Display > Add to cart behaviour and check “Enable AJAX add to cart buttons on archives”.

Please let us know how it goes.

[alexdigitalParticipant]

Thanks!

Works a treat.

-Alex

[Rue NelModerator]

Hi Alex,

You’re most welcome!
Thanks for letting us know that it has worked for you.

[justmascParticipant]

hey,

I was looking for the same… works like a charm.
but is this possible as well for the single product page?

currently it works for standard shop page and all pages where woo shortcodes were included..
but not for the single product page.

I only want to display the “fancy confirmation” and not the box on top of product page (including the link to cart)
-> I need the information about how to add ajax confirmation and how to stop the html confirmation.

by the way: is it possible to slow down the ajax confirmation a little bit? so that both icons stay longer visible?

best, tig

[Rue NelModerator]

Hello There,

Thanks for updating the thread! No because Ajax confirmation is only for the product archives and the shop page. This is how WooCommerce does it. You can find this settings in WooCommerce > Settings > Products > Display > Add to cart behaviour

To slow down the ajax confirmation, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-cart-notification,
.x-cart-notification:before,
.x-cart-notification-icon {
	transition: opacity 2s cubic-bezier(0.23, 1, 0.32, 1),transform 2s cubic-bezier(0.23, 1, 0.32, 1);
}

Feel free to increase the number of seconds 2s that suits your preferred timing. Please let us know how it goes.

[justmascParticipant]

1. hmm.. but how is then the cart icon (in navbar) updated after klicking add to card (on single product page)?
-> isn´t there the possibility to fire the confirmation?

I want to give my users the same experience.. so it would be important to have the same things happen, after they klick on “add to cart” button – doesn´t matter which add to cart button they click !

2. css: unfortunately this didn´t change anything ;(

[RadModerator]

Hi there,

Unfortunately, all of your requested changes are needed to be done through javascript. It’s the script that controls the confirmation’s visibility. Even if you hide them or display them through css, javascript will still manipulate them. And we can’t provide customisation for the mentioned script since it’s compiled and shouldn’t be edited.

You may hire someone that could help you recompiling your customised javascripts.

Thanks for understanding.

[justmascParticipant]

ok thank you, can you give me a hint which script it is?
thanks, tig

[ZeshanMember]

Hi there,

The script responsible for our cart notification is located in file /wp-content/themes/x/framework/js/src/site/inc/x-body-woocommerce.js.

Thanks!

[DonWattzParticipant]

What am I missing here? I still get this when I add product to cart.

[Rue NelModerator]

Hey @DonWattz,

Thanks for updating this thread! Please make sure that you have enable AJAX in WooCommerce by going to WooCommerce > Settings > Products > Display > Add to cart behaviour and check “Enable AJAX add to cart buttons on archives”.

To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[DonWattzParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Provided username or password is incorrect, please check.
For the time being please try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Hope it helps.

[DonWattzParticipant]

This reply has been marked as private.

[Author]

Posts