Add a multilingual text after price in woocommerce_get_price_html hook

Question

I am building an WooCommerce website and customizing it, copying and pasting code from internet libraries.

I have managed to add "custom price and custom text" in woocommerce product so they can be translated into different languages. Here is the look of the product page: https://www.primacent.de/de/product/woo-album-3-2

Here is my code in functions.php:

//New Price
add_action('woocommerce_product_options_pricing','custom_unit_price');
function custom_unit_price() {
  woocommerce_wp_text_input( array( 'id' => '_unit_price', 'class' => 'wc_input_price short', 'label' => __( 'Unit Price', 'woocommerce' ) .    ' ('.get_woocommerce_currency_symbol().')', 'type' => 'number', 'desc_tip' => 'true','description' => __( 'Enter the unit price if you want to show this price type.', 'woocommerce' ), 'custom_attributes' => array(
                    'step'  => 'any',
                    'min'   => '0'
                ) ) );
}
add_action('woocommerce_process_product_meta_simple', 'save_custom_unit_price');
function save_custom_unit_price($post_id) {
    global $wpdb, $woocommerce, $woocommerce_errors;
    update_post_meta( $post_id, '_unit_price', stripslashes( $_POST['_unit_price'] ) );
}
// Text Field for unit measurement
add_action('woocommerce_product_options_pricing','custom_unit_measurement');
function custom_unit_measurement() {
woocommerce_wp_text_input ( array('id' => '_unit_measurement', 'label' => __( 'Unit Measurement', 'woocommerce' ), 'placeholder' => 'i.e: pro Stück','desc_tip' => 'true','description' => __( 'Enter the unit measurement in your language. If you want to show price per unit, this field must be filled', 'woocommerce' ) 
    )
);
}
add_action('woocommerce_process_product_meta_simple', 'save_custom_unit_measurement');
function save_custom_unit_measurement($post_id) {
    global $wpdb, $woocommerce, $woocommerce_errors;
    update_post_meta( $post_id, '_unit_measurement', stripslashes( $_POST['_unit_measurement'] ) );
}

// only copy the opening php tag if needed
// Change the shop / product prices if a _unit_price is set
function sv_change_product_html( $price_html, $product ) {

    $_unit_price = get_post_meta( $product->id, '_unit_price', true );
    if ( ! empty( $_unit_price ) ) {
        $price_html = '<span class="amount">' . wc_price( $_unit_price ).  '  </span>';
                      echo $_unit_measurement = get_post_meta( $product->id, '_unit_measurement', true );echo'<br />';      

    }

    return $price_html;
}

add_filter( 'woocommerce_get_price_html', 'sv_change_product_html', 10, 2 );

The problem is that I want the unit measurement (_unit_measurement) after the unit price (_unit_price) to replace the hyphen mark '-'.

For some reasons, I can't put the second meta value into <span> wrap.

Please help me. How can I achieve this?

Thanks!

Answer 1

You just have to concatenate this unit measurement value inside a string (in a <span> tag for example) after the price using .= operator for $price_html variable before it's being returned.

So your code will be:

//New Price
add_action( 'woocommerce_product_options_pricing' ,'custom_unit_price' );
function custom_unit_price() {
    woocommerce_wp_text_input( array( 
        'id'                => '_unit_price', 
        'class'             => 'wc_input_price short', 
        'label'             => __( 'Unit Price', 'woocommerce' ) .    ' ('.get_woocommerce_currency_symbol().')', 
        'type'              => 'number', 
        'desc_tip'          => 'true',
        'description'       => __( 'Enter the unit price if you want to show this price type.', 'woocommerce' ), 
        'custom_attributes' => array(
            'step'          => 'any',
            'min'           => '0'
        ) 
    ));
}

add_action('woocommerce_process_product_meta_simple', 'save_custom_unit_price');
function save_custom_unit_price($post_id) {
    global $wpdb, $woocommerce, $woocommerce_errors;
    update_post_meta( $post_id, '_unit_price', stripslashes( $_POST['_unit_price'] ) );
}

// Text Field for unit measurement
add_action('woocommerce_product_options_pricing','custom_unit_measurement');
function custom_unit_measurement() {
    woocommerce_wp_text_input ( array(
        'id'            => '_unit_measurement', 
        'label'         => __( 'Unit Measurement', 'woocommerce' ), 
        'placeholder'   => 'i.e: pro Stück',
        'desc_tip'      => 'true',
        'description'   => __( 'Enter the unit measurement in your language. If you want to show price per unit, this field must be filled', 'woocommerce' ) 

    ));
}

add_action('woocommerce_process_product_meta_simple', 'save_custom_unit_measurement');
function save_custom_unit_measurement($post_id) {
    global $wpdb, $woocommerce, $woocommerce_errors;
    update_post_meta( $post_id, '_unit_measurement', stripslashes( $_POST['_unit_measurement'] ) );
}

// only copy the opening php tag if needed
// Change the shop / product prices if a _unit_price is set
add_filter( 'woocommerce_get_price_html', 'sv_change_product_html', 10, 2 );
function sv_change_product_html( $price_html, $product ) {

    $_unit_price = get_post_meta( $product->id, '_unit_price', true );

    if ( ! empty( $_unit_price ) ) {
        $_unit_measurement = get_post_meta( $product->id, '_unit_measurement', true );

        // Here you just concatenate the $_unit_measurement variable (in for example another span tag) after the price
        $price_html = '<span class="amount">' . wc_price( $_unit_price ).  '  </span>';
        $price_html .= '<span class="mesurement">' . $_unit_measurement . '  </span><br />';        
    }
    // return the formated price with the formated unit mesurement
    return $price_html;
}

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