Display product sale price in WooCommerce checkout issues

Question

I'm using this code snippet to display product sale prices at WooCommerce checkout:

function show_sale_price_at_checkout( $subtotal, $cart_item, $cart_item_key ) {
    
    $product = $cart_item['data'];
    $quantity = $cart_item['quantity'];
    if ( ! $product ) {
        return $subtotal;
    }
    $regular_price = $sale_price = $suffix = '';
    if ( $product->is_taxable() ) {
        if ( 'excl' === WC()->cart->tax_display_cart ) {
            $regular_price = wc_get_price_excluding_tax( $product, array( 'price' => $product->get_regular_price(), 'qty' => $quantity ) );
            $sale_price    = wc_get_price_excluding_tax( $product, array( 'price' => $product->get_sale_price(), 'qty' => $quantity ) );
            if ( WC()->cart->prices_include_tax && WC()->cart->tax_total > 0 ) {
                $suffix .= ' ' . WC()->countries->ex_tax_or_vat() . '';
            }
        } else {
            $regular_price = wc_get_price_including_tax( $product, array( 'price' => $product->get_regular_price(), 'qty' => $quantity ) );
            $sale_price = wc_get_price_including_tax( $product, array( 'price' => $product->get_sale_price(), 'qty' => $quantity ) );
            if ( ! WC()->cart->prices_include_tax && WC()->cart->tax_total > 0 ) {
                $suffix .= ' ' . WC()->countries->inc_tax_or_vat() . '';
            }
        }
    } else {
        $regular_price    = $product->get_price() * $quantity;
        $sale_price       = $product->get_sale_price() * $quantity;
    }
    if ( $product->is_on_sale() && ! empty( $sale_price ) ) {
        $price = wc_format_sale_price(
                     wc_get_price_to_display( $product, array( 'price' => $product->get_regular_price(), 'qty' => $quantity ) ),
                     wc_get_price_to_display( $product, array( 'qty' => $quantity ) )
                 ) . $product->get_price_suffix();
    } else {
        $price = wc_price( $regular_price ) . $product->get_price_suffix();
    }
   
    $price = $price . $suffix;
    return $price;
}
add_filter( 'woocommerce_cart_item_subtotal', 'show_sale_price_at_checkout', 10, 3 );

Screenshot: https://ibb.co/xLB60Px

However, there's 3 issues:

1. I'm unable to target the sale price individually with custom CSS. Is there a way to give the sale price a CSS class?

2. I can not change the color of the sale price properly. Setting the color to #000000 does not result into pure black, it stays grey. So I thought the sale price is a bit transparent but adding opacity: 1; did not help, it stays grey. I can not increase the opacity, only decrease it. I'm confused.

3. When the checkout page is loading it shows this ugly long message next to the products that have no sale price: https://ibb.co/PzJztck What does it mean and how to get rid of it?

Could someone please help resolve these issues?

score 2 · Accepted Answer · answered Feb 15 '21 at 21:14

In your function you check if the product is taxable and if the price must be VAT excluded or VAT included. This check is already done in the WooCommerce function wc_get_price_to_display: here the documentation.

So you could optimize it like this:

// shows the product price on sale (if any) in the checkout table
add_filter( 'woocommerce_cart_item_subtotal', 'show_sale_price_at_checkout', 10, 3 );
function show_sale_price_at_checkout( $subtotal, $cart_item, $cart_item_key ) {
    
    // gets the product object
    $product = $cart_item['data'];
    // get the quantity of the product in the cart
    $quantity = $cart_item['quantity'];

    // check if the object exists
    if ( ! $product ) {
        return $subtotal;
    }

    // check if the product is on sale
    if ( $product->is_on_sale() && ! empty( $product->get_sale_price() ) ) {
        // shows sale price and regular price       
        $price = wc_format_sale_price (
            // regular price
            wc_get_price_to_display(
                $product, array(
                    'price' => $product->get_regular_price(),
                    'qty' => $quantity
                    )
                ),
            // sale price
            wc_get_price_to_display( $product, array (
                'price' => $product->get_sale_price(),
                'qty' => $quantity
                )
            )
        ) . $product->get_price_suffix();
    } else {
        // shows regular price
        $price = wc_price (
            // regular price
            wc_get_price_to_display(
                $product, array (
                    'price' => $product->get_regular_price(),
                    'qty' => $quantity
                )
            )
        ) . $product->get_price_suffix();
    }
   
    return $price;
}

The code has been tested and works. Add it to your active theme's functions.php.

Regarding the 3 issues I will answer you by points:

You can use the ins element as a selector for the price on sale. For example: tr.cart_item ins { ... }
The previous point should resolve this point. In case it doesn't work, it could depend on the specificity of another previously declared selector. In this case you have two options:
- find the CSS rule that has already been declared and modify it
- add !important to the end of the new CSS rule (It would be preferable to avoid it)
The function I posted should fix this error.

Display product sale price in WooCommerce checkout issues

1 Answers1