How to Show "Amount in Cart" on Product Cards & Update Add to Cart Button Text?

1

Hey everyone,

I’m working on a shop page in Bricks Builder and need help with two things:

:one: Displaying the quantity of a product already in the cart on each product card (e.g., “3 in cart” if the user has 3 of that item in their cart).

:two: Changing the “Add to Cart” button text to “[X item has] added to cart” dynamically when a product is added.

Has anyone implemented this in Bricks? Any guidance on how to achieve this with dynamic data, JavaScript, or Bricks conditions would be appreciated!

Thanks in advance! :rocket:

2

Hey everyone, I found a solution! :rocket:

First, I created a shortcode to display the cart item quantity for each product. This checks how many of that product are already in the cart and updates dynamically.

Then, I used AJAX to refresh the quantity when a product is added. I also updated the “Add to Cart” button to show a temporary “Adding ×[quantity]…” message while processing, then revert to its original text.

Important:

Make sure to enqueue the script properly so everything works smoothly.

Then, place the shortcode inside your query loop (product card) like this:

[product_cart_quantity id=“{post_id}”]

Here’s the code I used:
**PHP

<?php
// Shortcode to display cart quantity for a given product
function get_cart_quantity_by_product_shortcode( $atts = [] ) {
  if ( ! function_exists( 'WC' ) ) return '<span>WooCommerce not active</span>';

  $atts = shortcode_atts( array(
      'id' => get_the_ID(),
  ), $atts );

  $product_id = intval( $atts['id'] );
  $cart = WC()->cart;

  if ( ! $cart ) return '<span>Cart not available</span>';

  $quantity = 0;

  foreach ( $cart->get_cart() as $cart_item ) {
      if ( $cart_item['product_id'] == $product_id ) {
          $quantity += $cart_item['quantity'];
      }
  }

  return '<span class="wd-quantity wd-quantity-' . $product_id . '">' . ($quantity >= 1 ? $quantity . ' In cart' : '') . '</span>';
}
add_shortcode( 'product_cart_quantity', 'get_cart_quantity_by_product_shortcode' );


// AJAX handler to refresh only the quantity for a given product
add_action('wp_ajax_refresh_product_cart_quantity', 'refresh_product_cart_quantity');
add_action('wp_ajax_nopriv_refresh_product_cart_quantity', 'refresh_product_cart_quantity');

function refresh_product_cart_quantity() {
    $product_id = isset($_POST['product_id']) ? intval($_POST['product_id']) : 0;

    if (! $product_id ) {
        wp_send_json_success('<span class="wd-quantity wd-quantity-0"></span>');
    }

    $output = do_shortcode('[product_cart_quantity id="' . $product_id . '"]');
    wp_send_json_success($output);
}


?>

**JS CODE

jQuery(document).ready(function ($) {

  function refreshProductCartQuantity(productId) {
    $.ajax({
      url: wdl_ajax_object.ajaxurl,
      type: 'POST',
      data: {
        action: 'refresh_product_cart_quantity',
        product_id: productId || 0,
      },
      success: function (response) {
        if (response.success) {
          const output = $(response.data).text();
          if (productId && productId !== 'empty') {
            $('.wd-quantity-' + productId).html(output);
          } else {
            $('.wd-quantity').html('');
          }
        } else {
          console.error('Refresh failed:', response.data);
        }
      },
      error: function (xhr, status, error) {
        console.error('AJAX error:', status, error);
        console.log(xhr.responseText);
      }
    });
  }
  

$(document.body).on('adding_to_cart', function (event, $button, data) {
	const $quantityInput = $button.closest('.product-card-ac').find('.quantity input');
	const quantity = $quantityInput.val() || 1;

	if (!$button.data('original-text')) {
		$button.data('original-text', $button.text().trim());
	}

	$button.addClass('is-adding').text(`Adding ×${quantity}...`);

});

$(document.body).on('added_to_cart', function (event, fragments, cart_hash, $button) {
	const productId = $button.data('product_id');
	if (productId) {
		refreshProductCartQuantity(productId);
	}

	const originalText = $button.data('original-text') || 'Add to cart';
	setTimeout(() => {
		$button.removeClass('is-adding').text(originalText);
	}, 600);

});
});

Hope this helps! Let me know if you have any questions. :blush: