How To Add Prefix And Suffix To WooCommerce Prices

WooCommerce is a great eCommerce platform but unfortunately, it does not offer a direct way to add a prefix or a suffix to prices. Thankfully we have a fix for this problem and will show you how to add a prefix and suffix to your product prices individually.

Creating a custom metadata field

The first thing we need to create is a custom metadata field to hold the price prefix and suffix so we can, later on, add them to the product.

Note that we need to create two fields. One to save the prefix and another one to save the suffix. Another important part is to run them through sanitization to ensure no malicious code or other than text can be inputted into the field.

Remember that all code goes to your themes functions.php file.

/**
 * Original code by https://bloginbox.com
 * Create and show prefix and suffix fields in product settings
 */

function wcps_create_custom_field() {
    $args = array(
    'id' => 'custom_prefix_for_price',
    'label' => __( 'Prefix for prices', 'wc-prefix-suffix' ),
    'class' => 'prefix-custom-field',
    'desc_tip' => true,
    'description' => __( 'Add price prefix here', 'wc-prefix-suffix' ),
    );
    woocommerce_wp_text_input( $args );
    
    $args = array(
    'id' => 'custom_suffix_for_price',
    'label' => __( 'Suffix for prices', 'wc-prefix-suffix' ),
    'class' => 'suffix-custom-field',
    'desc_tip' => true,
    'description' => __( 'Add price suffix here.', 'wc-prefix-suffix' ),
    );
    woocommerce_wp_text_input( $args );
}

add_action( 'woocommerce_product_options_general_product_data', 'wcps_create_custom_field' );

/**
 * Save custom fields to database.
 */

function wcps_save_custom_field( $post_id ) {
 $product = wc_get_product( $post_id );
 $prefix = isset( $_POST['custom_prefix_for_price'] ) ? $_POST['custom_prefix_for_price'] : '';
 $suffix = isset( $_POST['custom_suffix_for_price']) ? $_POST['custom_suffix_for_price'] : '';
 $product->update_meta_data( 'custom_prefix_for_price', sanitize_text_field( $prefix ) );
 $product->update_meta_data( 'custom_suffix_for_price', sanitize_text_field( $suffix ) ); 
 $product->save();
}
add_action( 'woocommerce_process_product_meta', 'wcps_save_custom_field' );

Adding the functionality

Now that we have the metadata fields to hold the prefix and suffix we need to add them before the price in WooCommerce when needed. To do this we will connect to the woocommerce_get_price_html filter and find the products that have prefix and suffix saved as metadata to them. After that, we simply return the prefix and suffix with the price if they can be found. Otherwise, we will only return the price.

/**
 * Connect to filter and add prefix and suffix to price
 */

add_filter( 'woocommerce_get_price_html', 'wcps_add_price_suffix', 99, 4 );
function wcps_add_price_suffix( $price, $product ){
    
    global $post;
     $product = wc_get_product( $post->ID );
     $prefix = $product->get_meta( 'custom_prefix_for_price' );
     $suffix = $product->get_meta( 'custom_suffix_for_price' );
 // Check if product has prefix or suffix before adding it to price
     if( $prefix || $suffix )  {
        $price = $prefix . ' ' . $price . ' ' . $suffix;
        return $price; // Return price with prefix and suffix
    }
    else {
        return $price; // If no prefix or suffix is found we will return just the price.
    }
}

Conclusion

In conclusion, adding a prefix and suffix to the price is not hard, but does take some extra coding. Something we do need to point out is that the prefix or the suffix will not show up in the cart, checkout, or on the order page.

Below you can find example images of the product prefix and suffix on a product archive page, single product page.

Feel free to copy the full code from below and add it to your themes functions.php file.

/**
  * Create and show prefix and suffix fields in product settings
 */

function wcps_create_custom_field() {
    $args = array(
    'id' => 'custom_prefix_for_price',
    'label' => __( 'Prefix for price', 'wc-prefix-suffix' ),
    'class' => 'prefix-custom-field',
    'desc_tip' => true,
    'description' => __( 'Add price prefix here', 'wc-prefix-suffix' ),
    );
    woocommerce_wp_text_input( $args );
    
    $args = array(
    'id' => 'custom_suffix_for_price',
    'label' => __( 'Suffix for price', 'wc-prefix-suffix' ),
    'class' => 'suffix-custom-field',
    'desc_tip' => true,
    'description' => __( 'Add price suffix here.', 'wc-prefix-suffix' ),
    );
    woocommerce_wp_text_input( $args );
}

add_action( 'woocommerce_product_options_general_product_data', 'wcps_create_custom_field' );

/**
 * Save custom fields to database.
 */

function wcps_save_custom_field( $post_id ) {
 $product = wc_get_product( $post_id );
 $prefix = isset( $_POST['custom_prefix_for_price'] ) ? $_POST['custom_prefix_for_price'] : '';
 $suffix = isset( $_POST['custom_suffix_for_price']) ? $_POST['custom_suffix_for_price'] : '';
 $product->update_meta_data( 'custom_prefix_for_price', sanitize_text_field( $prefix ) );
 $product->update_meta_data( 'custom_suffix_for_price', sanitize_text_field( $suffix ) ); 
 $product->save();
}
add_action( 'woocommerce_process_product_meta', 'wcps_save_custom_field' );

/**
 * Connect to filter and add prefix and suffix to price
 */

add_filter( 'woocommerce_get_price_html', 'wcps_add_price_suffix', 99, 4 );
function wcps_add_price_suffix( $price, $product ){
    
    global $post;
     $product = wc_get_product( $post->ID );
     $prefix = $product->get_meta( 'custom_prefix_for_price' );
     $suffix = $product->get_meta( 'custom_suffix_for_price' );
 // Check if product has prefix or suffix before adding it to price
     if( $prefix || $suffix )  {
        $price = $prefix . ' ' . $price . ' ' . $suffix;
        return $price; // Return price with prefix and suffix
    }
    else {
        return $price; // If no prefix or suffix is found we will return just the price.
    }
}