Aggiungere l'unità di misura dopo il prezzo in WooCommerce. Esempio $ 24 /m2 e $24 /m

Innanzitutto, fare questo con CSS secondo me non è assolutamente la strada giusta.

In secondo luogo, pagare 129$ per un'estensione solo per avere questa piccola funzionalità sarebbe ridicolo - nulla contro il plugin in sé.

In terzo luogo, la soluzione di base descritta di seguito si basa sull'esempio della pagina codex di add_meta_box. Ci sono varie altre soluzioni per ottenere questo risultato, basta cercare un po', questo serve per farti iniziare.

Codice:

/**
 * Aggiunge un box alla colonna principale nelle schermate di modifica di Articoli, Pagine e Prodotti.
 */
function wpse103469_wc_price_per_unit_mb() {

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

    foreach ( $screens as $screen ) {

        add_meta_box(
            'wc_price_per_unit_mb',
            __( 'Prezzo 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' );

/**
 * Stampa il contenuto del box.
 * 
 * @param WP_Post $post L'oggetto per l'articolo/pagina corrente.
 */
function wpse103469_wc_price_per_unit_inner_mb( $post ) {

  // Aggiunge un campo nonce per verificarlo in seguito.
  wp_nonce_field( 'wpse103469_wc_price_per_unit_inner_mb', 'wpse103469_wc_price_per_unit_inner_mb_nonce' );

  /*
   * Utilizza get_post_meta() per recuperare un valore esistente
   * dal database e usarlo nel form.
   */
  $value = get_post_meta( $post->ID, 'wc_price_per_unit_key', true );

  echo '<label for="wc_price_per_unit_field">';
       _e( "Prezzo 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" />';

}

/**
 * Quando l'articolo viene salvato, salva i nostri dati personalizzati.
 *
 * @param int $post_id L'ID dell'articolo che viene salvato.
 */
function wpse103469_wc_price_per_unit_save_postdata( $post_id ) {

  /*
   * Dobbiamo verificare che questo provenga dalla nostra schermata e con la giusta autorizzazione,
   * perché save_post può essere attivato in altri momenti.
   */

  // Controlla se il nostro nonce è impostato.
  if ( ! isset( $_POST['wpse103469_wc_price_per_unit_inner_mb_nonce'] ) )
    return $post_id;

  $nonce = $_POST['wpse103469_wc_price_per_unit_inner_mb_nonce'];

  // Verifica che il nonce sia valido.
  if ( ! wp_verify_nonce( $nonce, 'wpse103469_wc_price_per_unit_inner_mb' ) )
      return $post_id;

  // Se è un salvataggio automatico, il nostro form non è stato inviato, quindi non vogliamo fare nulla.
  if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) 
      return $post_id;

  // Controlla i permessi dell'utente.
  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, ora è sicuro salvare i dati. */

  // Sanitizza l'input dell'utente.
  $price_per_unit = sanitize_text_field( $_POST['wc_price_per_unit_field'] );

  // Aggiorna il campo meta nel 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' );

Il campo meta »Prezzo per Unità« può essere visualizzato così:

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

nel relativo file template.

Per aggiungere l'informazione dal campo meta »Prezzo per Unità« direttamente all'output del prezzo puoi fare qualcosa del genere:

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

Prima risponderò alla tua domanda nel modo in cui stavi procedendo, poi ti darò la risposta che secondo me sarebbe più appropriata.

CSS

Puoi ottenere questo risultato con il CSS in alcuni modi diversi:

1) Puoi puntare qualsiasi pagina prodotto:

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

2) Puoi puntare un prodotto specifico usando il suo ID prodotto:

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

3) Puoi puntare una categoria specifica usando il suo ID categoria:

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

Measurement Price Calculator

Potresti naturalmente usare l'estensione Measurement Price Calculator per WooCommerce. Fa molte delle cose che desideri e aggiunge elementi UI fantastici. Probabilmente è la soluzione che consiglierei.