How To Make Cart Price Custom HTML

To make the cart price display custom HTML in WooCommerce, you can use a filter hook provided by WooCommerce called woocommerce_cart_item_price. This hook allows you to modify the price output of items in the cart with your own custom HTML.

Here is an example code snippet you can use to get started:

  1. Add the following code to your theme’s functions.php file:
function my_custom_show_sale_price_at_cart( $old_display, $cart_item, $cart_item_key ) {
/** @var WC_Product $product */
$product = $cart_item['data'];

if ( $product ) {
    return $product->get_price_html();

return $old_display;
add_filter( 'woocommerce_cart_item_price', 'my_custom_show_sale_price_at_cart', 10, 3 );
  1. Modify the HTML inside the custom_cart_price_html function to suit your needs. In the example above, we’re adding a new HTML span with a class of “cart-price” that displays the product price and includes the label “Price:”.
  2. Save the changes to your functions.php file, and then refresh your cart page to see the new cart price display.

Either you can use following code:

add_filter( 'woocommerce_cart_item_price', 'custom_cart_price_html', 10, 3 );
function custom_cart_price_html( $price_html, $cart_item, $cart_item_key ) {
   // Add your custom HTML here
   $new_price_html = '<span class="cart-price">' . __( 'Price:', 'woocommerce' ) . ' ' . $cart_item['data']->get_price() . '</span>';
   return $new_price_html;

Note: that this is just one example of how you can customize the cart price display in WooCommerce. You can modify the HTML output to include any other elements or formatting that you need.

Leave a Reply

Your email address will not be published. Required fields are marked *