Adding custom text labels to the product prices depending on their type

Question

I have one little problem that I can't solve yet. I have this WooCommerce web site with variable products, and currently prices are shown in this way:

$5.50 per dozen – $100.00 per dozen

I use this CSS rule that adds "per dozen" after every price, but that dont make sense in the current scenario.

.price .amount:after {
content: " per dozen";
}

I would like to show the prices on this variable products this way:

$5.50 per dozen – $100.00 per case (quantity number)

Thanks in advance for any help.

Do you checked the link in my question? Currently show $5.50 per dozen –$100.00 per dozen and want to show like $5.50 per dozen –$100.00 per case Understand, price for piece, and bulk price. — Dora
I can't check external links. You need to provide a minimal reproducible example — Daniel Springer
See this image: i.imgur.com/KKrtpvj.png?1 You see that currently show $5.50 per dozen –$100.00 per dozen, and i want only to show $5.50 per dozen –$100.00 per case. Thats all. — Dora
change the CSS class, or make a new one and add it only there. — Daniel Springer

LoicTheAztec LoicTheAztec · Accepted Answer · 2017-02-19T10:33:50

Here you are going to be able to add custom labels just as you want using a custom function hooked in woocommerce_price_html and woocommerce_variation_price_html filters hooks (for simple and variables products.

For the min / max prices in variables products, we need a separated function hooked in woocommerce_variation_sale_price_html filter hook.

Update: AS my code will now will handle also " per dozen" on single products too, you have to remove your custom CSS rule .price .amount:after { content: " per dozen";}.

This will avoid to have a repetitive "per dozen" everywhere.

But it's not possible to set a different label on the live price based on the selected attributes values. For that the only way is using Javascript/jQuery, as this is a live event on client side...

Update2
Here is that working and tested code (see the screenshots at the end):

add_filter('woocommerce_variation_price_html','prices_custom_labels', 10, 2 );
add_filter('woocommerce_price_html','prices_custom_labels', 10, 2 );
function prices_custom_labels( $price, $product ){

    // Custom label name
    $per_dozen = ' '. __('per dozen', 'woocommerce' );

    // Set HERE your "quantity" attribute slug
    $attribute_qty_slug = 'pa_quantity';

    $attribute_qty_slug_key = 'attribute_'.$attribute_qty_slug;
    $append_label = '';

    // 1) Variable products
    if ($product->product_type != 'simple' && $product->variation_id ) {

        // Getting the attribute "quantity" value
        $attribute_qty_is_set = $product->variation_data[$attribute_qty_slug_key];

        // if "quantity" not set we display " per dozen"
        if( ! $attribute_qty_is_set )
            $append_label = $per_dozen;


        // Outputed price + custom label
        $price = '<ins class="highlight">'.woocommerce_price( $product->regular_price ).$append_label.'</ins>';
    }
    // 2) Simple products
    else
    {
        // Here the output price + custom default label
        $price = '<ins class="highlight">'.woocommerce_price( $product->regular_price ).$per_dozen.'</ins>';
    }
    return $price;
}

add_filter('woocommerce_variable_price_html', 'prices_custom_labels_min_max', 20, 2);
function prices_custom_labels_min_max( $price, $product) {

    // Custom label name
    $per_dozen = ' '. __('per dozen', 'woocommerce' );
    $per_case = ' '. __('per case', 'woocommerce' );

    // Set HERE your quantity attribute slug
    $attribute_qty_slug = 'pa_quantity';


    // Getting the min and max variations prices
    $variation_min_reg_price = $product->get_variation_regular_price('min', true);
    $variation_max_reg_price = $product->get_variation_regular_price('max', true);
    $variation_reg_price = $product->get_variation_regular_price();


    if( $variation_min_reg_price == $variation_max_reg_price )
    {
        $price = '<ins class="highlight">'.woocommerce_price($variation_reg_price) . $per_dozen . '</ins>';
    }
    else
    {
        if( !in_array( $attribute_qty_slug, array_keys( $product->get_attributes() ) ) )
        {
            $price = '<ins class="highlight">' . woocommerce_price($variation_min_reg_price) . $per_dozen . ' - ' . woocommerce_price($variation_max_reg_price) . $per_dozen . '</ins>';
        }
        else
        {
            $price = '<ins class="highlight">' . woocommerce_price($variation_min_reg_price) . $per_dozen . ' - ' . woocommerce_price($variation_max_reg_price) . $per_case . '</ins>';
        }
    }
    return $price;
}

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

Here is a real screenshot from my test sever:

This code is tested and really works.

Adding custom text labels to the product prices depending on their type

2 Answers