Add Spinning Icon to Add to Cart Button on Product Archive in Bricks

When building the WooCommerce Product Archive in Bricks (the shop page) with the Products element, a loading spinning icon is not displayed when a Add to Cart button is clicked.

You can get around this with some added JS and CSS.

Javascript add to footer

<script>
document.addEventListener('DOMContentLoaded', () => {
  document.body.addEventListener('click', (e) => {
    const btn = e.target.closest('a.brx_ajax_add_to_cart');
    if (btn && btn.classList.contains('add_to_cart_button')) {
      // Reset state to allow re-adds
      btn.classList.remove('added', 'bricks-cart-added');
      
      // Remove existing spinner if it exists
      const existingSpinner = btn.querySelector('.spinner');
      if (existingSpinner) existingSpinner.remove();

      // Add new spinner
      const spinner = document.createElement('span');
      spinner.className = 'spinner';
      btn.appendChild(spinner);

      btn.classList.add('loading');
    }
  });

  jQuery(document.body).on('added_to_cart', (_event, _fragments, _cart_hash, $button) => {
    $button.removeClass('loading');
  });
});
</script>

This will also apply to related products if added by the Related Products element.

CSS

.brx_ajax_add_to_cart .spinner {
  display: none;
  margin-left: 8px;
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-top: 2px solid #666;
  border-radius: 50%;
  animation: spin .6s linear infinite;
}

.brx_ajax_add_to_cart.loading .spinner {
  display: inline-block;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Ajax Settings

You also need to ensure both Bricks and WooCommerce have ajax add to cart options enabled.

Single Product Template

For the single product template there is an Add to cart element that does have icon, icon position and spinning options (and more) built into Bricks.