WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

    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?

share|improve this question

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.


 * 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 ) {

            __( 'Price per Unit', 'myplugin_textdomain' ),
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:

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;
share|improve this answer

First I'll answer your question the way you were going about it and then I'm going to answer it the way I think it should be done.


You can do this with CSS in a couple different minor ways:

1) You can target any product page:

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

2) You can target any specific product with it's product id:

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

3) You can target a specific category with it's category id:

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

Measurement Price Calculator

You could of course use the Measurement Price Calculator extension for WooCommerce. That does a whole bunch of what you want and it adds a bunch of awesome UI elements. This is probably how I would do it.

share|improve this answer
Can you please clarify your affiliation to the extension you're suggesting. – ialocin Dec 1 '13 at 17:11
@ialocin I do work for WooThemes but my answer is my own. – BFTrick Dec 2 '13 at 0:12

protected by Community Jan 21 '14 at 12:42

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.