How to remove spinning icon on archive pages (add-to-cart-button)

Hi @cutu234,

Thank you for reaching out.

I understand you’d like to remove the spinning icon on archive pages when adding a product to cart. This will involve the help of custom coding and making changes to the core WooCommerce plugin.

Just to clarify, helping out with custom coding of this nature is outside the scope of support that our support staff can help out with here, although I would recommend the following:

1. Checking whether there are existing plugins in the WordPress plugin repository that might be doing that already.
2. Joining our WooCommerce Slack community (it does have a developer channel where you can ask coding questions): https://woo.com/community-slack/
3. Hiring a developer.

Hope it helps!

Thanks for the reply. More often than not Woocommerce provides filters or hooks for tasks like that. This is why I posted this question here in the forum. We don’t have any problems to write some custom code, but sometimes we simply can’t find the according section in the documentation.

Having said this, it might be a good idea to make this spinning icon optional or at least include some information on how to do that in the documentation. The icon does not provide very much information for the customer, but uses valuable space that is needed on small mobile devices. We had to decrease the font size to avoid any overlapping of icon and button text.

You might argue that the checkmark symbol does need some space, too. So why removing the spinning icon? That’s true! In a perfect world, we would have a cart symbol that changes to the checkmark symbol after the product was added to the cart. By default, there is no cart symbol. These small details do matter! Might be a good idea for an update.

• This reply was modified 1 month, 1 week ago by cutu234.

Hello cutu234,

Thank you for your reply.

Could you please share a screenshot of the spinner and a link to your site?
I’d like to check if this element is coming from WooCommerce, another plugin, or your theme.

Looking forward to your response. ??

This is my test server with very few plugins and a standard theme installed:

https://demo.my-blog-shop.de/produkt-kategorie/unkategorisiert/

After deactivating the Woocommerce ajax cart, the spinner disappeares. This is most likely a Woocommerce feature.

Hello cutu234,

Thank you for your reply.

I activated the GeneratePress theme on my test site and noticed the same spinning icon, which suggests that this is a feature of the theme. It did not appear when I was using the Twenty Twenty-Four theme.

I recommend reaching out to GeneratePress support for further assistance on how to remove or deactivate the icon. They should be able to provide you with the best guidance on customizing this feature.

If you have any more questions or need further assistance, feel free to reach out!

Best regards.

It did not appear when I was using the Twenty Twenty-Four theme.

Really? I’ve just activated the Storefront theme. It shows the spinning icon. The same is true for the Twenty-Four theme. It looks a little bit different, but it is there. Please, check for yourself:

https://demo.my-blog-shop.de/produkt-kategorie/unkategorisiert/

I can understand your concern, generally we do not provide support for the custom coding like my colleague explain previously. however, making an exception. Could you please try to use the following custom CSS code.

.add_to_cart_button.wp-block-button__link:after {
  content: '';
  opacity: 0;
font-size: 0px;
}

Please note that the code will work for all add to cart buttons on your sites. If it does not work I would suggest you:

1. Joining our WooCommerce Slack community (it does have a developer channel where you can ask coding questions):?https://woo.com/community-slack/
2. Hiring a developer.
   
   I hope this helps.

I appreciate your help. Usually, I wouldn’t bother you with such a triviality. But it is not that easy in this case. The icon appears just for a second or so. It’s almost impossible to use the developer tools for that.

In addition to that, this might be a general issue. While I do understand the idea behind this, the icon can become a problem on mobile devices. You do want to have as much space for text as possible. On the other hand, the checkmark icon does make sense when using the ajax cart. It’s a mixed bag.

Besides, the CSS you provided does not work. Anyway, it’s not super important. I use a smaller font-size on mobile devices. That works ok.

• This reply was modified 1 month ago by cutu234.
• This reply was modified 1 month ago by cutu234.

Hey @cutu234 ,

This spinning feature is related to enabling Ajax add-to-cart buttons on archive pages. Removing this would require customization as @ckadenge pointed out previously.

Since help with custom code is outside?our scope of support, we have our developer resources portal that can help you get going, feel free to check it further if you need more help with this:

https://developer.woocommerce.com/

Another option is to check our customizations page to hire an expert who can create a custom solution for you: 

• WooExperts
• Codeable.io

Additionally, you can reach out in one of the channels below with customization questions:

• WooCommerce Advanced Facebook Group
• WooCommerce Developer Slack Channel

Alternatively, it may be helpful to submit a?feature request?for?making this spinning icon optional ??

Hope this helps point you in the right direction!

Thank you very much! ??