Firstly, 在我看来，用CSS来做这件事绝对不是一条好路。

Secondly, 花129美元买一个扩展来拥有这个小功能简直太荒谬了——这与插件本身没有什么不同。

Thirdly, 下面概述的基本解决方案基于example from the add_meta_box 法典第页。有很多其他的解决方案可以实现这一点，看看周围，这会让你开始。

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\' );

“单位价格”元字段可以如下输出：

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

在相应的模板文件中。

要将»单位价格«元字段中的信息直接添加到价格输出，可以执行以下操作：

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;
}

首先，我将以你的方式回答你的问题，然后我将以我认为应该采取的方式回答你的问题。

CSS

您可以通过几种不同的次要方式使用CSS来实现这一点：

1） 您可以针对任何产品页面：

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

2）您可以针对任何特定产品product id:

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

3）您可以针对特定类别category id:

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

计量价格计算器当然可以使用Measurement Price Calculator WooCommerce的扩展。这做了一大堆你想要的，它添加了一堆很棒的UI元素。我可能会这样做。