Adding unit ammount after WooCommerce price. Example $ 24 /m2 and $24 / m

So hey guys,

I’m trying to get my WooCommerce price per unit done.
Some of the items I’m selling are floortiles, and as of such they’re sold per square metre.

I have added the following code to display /m2 behind every price

.amount:after{
    content: "/m2";
    text-size: 13px;
}

This adds the /m2 after each price.

However, some of the items I am currently selling are not floortiles. For example decorating strips are sold per metre. And I’m selling column blocks, which are sold per piece. How can I add the price units correctly?

Does the WooCommerce CSS recognize SKU? and if so, how to implement it?

Firstly, doing this with CSS in my mind absolutely isn’t the way to go.

Secondly, paying 129$ for an extension to have this minor feature would just be ridiculous – nothing against the plugin per se.

Thirdly, below outlined basic solution is based on the example from the add_meta_box codex page. There are various other solutions for achieving this out there, just take a look around, this attends to get you started.

Code:

/**
 * Adds a box to the main column on the Post and Page edit screens.
 */
function wpse103469_wc_price_per_unit_mb() {

    $screens = array( 'post', 'page', 'product' );

    foreach ( $screens as $screen ) {

        add_meta_box(
            'wc_price_per_unit_mb',
            __( 'Price per Unit', 'myplugin_textdomain' ),
            'wpse103469_wc_price_per_unit_inner_mb',
            $screen,
            'advanced',
            'high'
        );
    }
}
add_action( 'add_meta_boxes', 'wpse103469_wc_price_per_unit_mb' );

/**
 * Prints the box content.
 * 
 * @param WP_Post $post The object for the current post/page.
 */
function wpse103469_wc_price_per_unit_inner_mb( $post ) {

  // Add an nonce field so we can check for it later.
  wp_nonce_field( 'wpse103469_wc_price_per_unit_inner_mb', 'wpse103469_wc_price_per_unit_inner_mb_nonce' );

  /*
   * Use get_post_meta() to retrieve an existing value
   * from the database and use the value for the form.
   */
  $value = get_post_meta( $post->ID, 'wc_price_per_unit_key', true );

  echo '<label for="wc_price_per_unit_field">';
       _e( "Price per Unit", 'myplugin_textdomain' );
  echo '</label> ';
  echo '<input type="text" id="wc_price_per_unit_field" name="wc_price_per_unit_field" value="' . esc_attr( $value ) . '" size="25" />';

}

/**
 * When the post is saved, saves our custom data.
 *
 * @param int $post_id The ID of the post being saved.
 */
function wpse103469_wc_price_per_unit_save_postdata( $post_id ) {

  /*
   * We need to verify this came from the our screen and with proper authorization,
   * because save_post can be triggered at other times.
   */

  // Check if our nonce is set.
  if ( ! isset( $_POST['wpse103469_wc_price_per_unit_inner_mb_nonce'] ) )
    return $post_id;

  $nonce = $_POST['wpse103469_wc_price_per_unit_inner_mb_nonce'];

  // Verify that the nonce is valid.
  if ( ! wp_verify_nonce( $nonce, 'wpse103469_wc_price_per_unit_inner_mb' ) )
      return $post_id;

  // If this is an autosave, our form has not been submitted, so we don't want to do anything.
  if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) 
      return $post_id;

  // Check the user's permissions.
  if ( 'page' == $_POST['post_type'] ) {

    if ( ! current_user_can( 'edit_page', $post_id ) )
        return $post_id;

  } else {

    if ( ! current_user_can( 'edit_post', $post_id ) )
        return $post_id;
  }

  /* OK, its safe for us to save the data now. */

  // Sanitize user input.
  $price_per_unit = sanitize_text_field( $_POST['wc_price_per_unit_field'] );

  // Update the meta field in the database.
  update_post_meta( $post_id, 'wc_price_per_unit_key', $price_per_unit );
}
add_action( 'save_post', 'wpse103469_wc_price_per_unit_save_postdata' );

The »Price per Unit« meta field can be outputted like this:

echo get_post_meta(get_the_ID(), 'wc_price_per_unit_key', true); 

in the according template file.

For adding the information from the »Price per Unit« meta field directly to the price output you can do something like this:

add_filter('woocommerce_get_price_html','wpse103469_add_price_per_unit_meta_to_price');
function wpse103469_add_price_per_unit_meta_to_price( $price ) {
    $price .= ' ' . get_post_meta(get_the_ID(), 'wc_price_per_unit_key', true);
    return $price;
}