Adăugarea unității de măsură după prețul WooCommerce. Exemplu $24 /m2 și $24 /m

În primul rând, să faci asta cu CSS nu este deloc soluția potrivită.

În al doilea rând, să plătești 129$ pentru o extensie doar pentru această funcționalitate minoră ar fi ridicol – fără nicio problemă cu pluginul în sine.

În al treilea rând, soluția de bază prezentată mai jos este bazată pe exemplul din pagina codex pentru add_meta_box. Există diverse alte soluții pentru a realiza acest lucru, doar căută în jur, aceasta are scopul de a te ajuta să începi.

Cod:

/**
 * Adaugă un câmp în coloana principală pe ecranele de editare pentru Post și Pagină.
 */
function wpse103469_wc_price_per_unit_mb() {

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

    foreach ( $screens as $screen ) {

        add_meta_box(
            'wc_price_per_unit_mb',
            __( 'Preț pe Unitate', 'myplugin_textdomain' ),
            'wpse103469_wc_price_per_unit_inner_mb',
            $screen,
            'advanced',
            'high'
        );
    }
}
add_action( 'add_meta_boxes', 'wpse103469_wc_price_per_unit_mb' );

/**
 * Afișează conținutul câmpului.
 * 
 * @param WP_Post $post Obiectul pentru postarea/pagina curentă.
 */
function wpse103469_wc_price_per_unit_inner_mb( $post ) {

  // Adaugă un câmp nonce pentru a putea verifica mai târziu.
  wp_nonce_field( 'wpse103469_wc_price_per_unit_inner_mb', 'wpse103469_wc_price_per_unit_inner_mb_nonce' );

  /*
   * Folosește get_post_meta() pentru a prelua o valoare existentă
   * din baza de date și folosește valoarea pentru formular.
   */
  $value = get_post_meta( $post->ID, 'wc_price_per_unit_key', true );

  echo '<label for="wc_price_per_unit_field">';
       _e( "Preț pe Unitate", '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" />';

}

/**
 * Când postarea este salvată, salvează datele noastre personalizate.
 *
 * @param int $post_id ID-ul postării care este salvată.
 */
function wpse103469_wc_price_per_unit_save_postdata( $post_id ) {

  /*
   * Trebuie să verificăm că acest lucru vine de la ecranul nostru și cu autorizația corespunzătoare,
   * deoarece save_post poate fi declanșat în alte momente.
   */

  // Verifică dacă nonce-ul nostru este setat.
  if ( ! isset( $_POST['wpse103469_wc_price_per_unit_inner_mb_nonce'] ) )
    return $post_id;

  $nonce = $_POST['wpse103469_wc_price_per_unit_inner_mb_nonce'];

  // Verifică dacă nonce-ul este valid.
  if ( ! wp_verify_nonce( $nonce, 'wpse103469_wc_price_per_unit_inner_mb' ) )
      return $post_id;

  // Dacă acesta este un autosave, formularul nostru nu a fost trimis, așa că nu dorim să facem nimic.
  if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) 
      return $post_id;

  // Verifică permisiunile utilizatorului.
  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, este sigur pentru noi să salvăm datele acum. */

  // Sanitizează inputul utilizatorului.
  $price_per_unit = sanitize_text_field( $_POST['wc_price_per_unit_field'] );

  // Actualizează câmpul meta în baza de date.
  update_post_meta( $post_id, 'wc_price_per_unit_key', $price_per_unit );
}
add_action( 'save_post', 'wpse103469_wc_price_per_unit_save_postdata' );

Câmpul meta »Preț pe Unitate« poate fi afișat astfel:

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

în fișierul de șablon corespunzător.

Pentru a adăuga informația din câmpul meta »Preț pe Unitate« direct la afișarea prețului, poți face ceva de genul:

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

Mai întâi voi răspunde la întrebarea ta în modul în care ai abordat-o și apoi o voi răspunde așa cum cred că ar trebui făcut.

CSS

Poți face asta cu CSS în câteva moduri minore diferite:

1) Poți direcționa orice pagină de produs:

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

2) Poți direcționa orice produs specific cu ID-ul produsului:

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

3) Poți direcționa o categorie specifică cu ID-ul categoriei:

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

Calculator de Preț pe Bază de Măsurătoare

Desigur, ai putea folosi extensia Measurement Price Calculator pentru WooCommerce. Aceasta face o mulțime din ceea ce dorești și adaugă elemente UI minunate. Acesta este probabil modul în care aș face eu.