Добавление единицы измерения после цены в WooCommerce. Пример: $24 /м2 и $24 /м

Во-первых, реализация этого с помощью CSS, на мой взгляд, абсолютно неверный подход.

Во-вторых, платить 129$ за расширение только ради такой незначительной функции было бы просто нелепо — ничего не имею против самого плагина.

В-третьих, представленное ниже базовое решение основано на примере из страницы документации add_meta_box. Существуют и другие способы реализации этого функционала, просто посмотрите вокруг, данный пример поможет вам начать.

Код:

/**
 * Добавляет блок в основную колонку при редактировании записей и страниц.
 */
function wpse103469_wc_price_per_unit_mb() {

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

    foreach ( $screens as $screen ) {

        add_meta_box(
            'wc_price_per_unit_mb',
            __( 'Цена за единицу', 'myplugin_textdomain' ),
            'wpse103469_wc_price_per_unit_inner_mb',
            $screen,
            'advanced',
            'high'
        );
    }
}
add_action( 'add_meta_boxes', 'wpse103469_wc_price_per_unit_mb' );

/**
 * Выводит содержимое блока.
 * 
 * @param WP_Post $post Объект текущей записи/страницы.
 */
function wpse103469_wc_price_per_unit_inner_mb( $post ) {

  // Добавляем nonce для проверки безопасности
  wp_nonce_field( 'wpse103469_wc_price_per_unit_inner_mb', 'wpse103469_wc_price_per_unit_inner_mb_nonce' );

  /*
   * Используем get_post_meta() для получения существующего значения
   * из базы данных и подставляем его в форму.
   */
  $value = get_post_meta( $post->ID, 'wc_price_per_unit_key', true );

  echo '<label for="wc_price_per_unit_field">';
       _e( "Цена за единицу", '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" />';

}

/**
 * Сохраняет пользовательские данные при сохранении записи.
 *
 * @param int $post_id ID сохраняемой записи.
 */
function wpse103469_wc_price_per_unit_save_postdata( $post_id ) {

  /*
   * Проверяем, что запрос пришел с нужного экрана и с правильными правами,
   * так как save_post может вызываться в других случаях.
   */

  // Проверяем наличие nonce
  if ( ! isset( $_POST['wpse103469_wc_price_per_unit_inner_mb_nonce'] ) )
    return $post_id;

  $nonce = $_POST['wpse103469_wc_price_per_unit_inner_mb_nonce'];

  // Проверяем валидность nonce
  if ( ! wp_verify_nonce( $nonce, 'wpse103469_wc_price_per_unit_inner_mb' ) )
      return $post_id;

  // Если это автосохранение, форма не отправлялась, ничего не делаем
  if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) 
      return $post_id;

  // Проверяем права пользователя
  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, теперь безопасно сохраняем данные */

  // Очищаем пользовательский ввод
  $price_per_unit = sanitize_text_field( $_POST['wc_price_per_unit_field'] );

  // Обновляем метаполе в базе данных
  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: "/м²";
    text-size: 13px;
}

2) Вы можете стилизовать конкретный товар по его ID товара:

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

3) Вы можете стилизовать конкретную категорию по её ID категории:

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

Measurement Price Calculator

Конечно, вы можете использовать расширение Measurement Price Calculator для WooCommerce. Оно выполняет множество функций, которые вам нужны, и добавляет отличные элементы интерфейса. Вероятно, я бы сделал именно так.