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.
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' );
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:
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;
}