In this WooCommerce tutorial I will be showing you how to add a custom field to a WooCommerce product.
I will go through adding a custom field on the general tab section of the WooCommerce edit product page underneath the price fields where you can enter a value in to be saved, go through saving and validating the data and then displaying the data that was saved on the product page on the front-end of your shop.
As an example I will be showing you how to add a Recommended Retail Price (RRP) to a WooCommerce product and display this on the front-end, so lets get starting.
First step would be to define the field on the edit product page, luckily WooCommerce makes this very easy due to the large array of hooks available for use as well as the built in functions to generate HTML input fields. Place the following code inside your theme’s functions.php file to define a new text field on the product edit page.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| add_action( 'woocommerce_product_options_pricing', 'wc_rrp_product_field' ); | |
| function wc_rrp_product_field() { | |
| woocommerce_wp_text_input( array( 'id' => 'rrp_price', 'class' => 'wc_input_price short', 'label' => __( 'RRP', 'woocommerce' ) . ' (' . get_woocommerce_currency_symbol() . ')' ) ); | |
| } |
You will now have a field on your product edit page called RRP, however if you enter something into the field and save the product, the data will not be save as we need to actually still save the data when the product gets updated, to save it and also check that a numeric value is entered add the following code to your theme’s functions.php file
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| add_action( 'save_post', 'wc_rrp_save_product' ); | |
| function wc_rrp_save_product( $product_id ) { | |
| // If this is a auto save do nothing, we only save when update button is clicked | |
| if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) | |
| return; | |
| if ( isset( $_POST['rrp_price'] ) ) { | |
| if ( is_numeric( $_POST['rrp_price'] ) ) | |
| update_post_meta( $product_id, 'rrp_price', $_POST['rrp_price'] ); | |
| } else delete_post_meta( $product_id, 'rrp_price' ); | |
| } |
Now when you enter a value in the RRP field and update the product the field should be saved and loaded in the RRP field you defined when the page loads. The final step would be to actually display the value saved on the product page on the front-end for customers to view, to do this add the following code to your theme’s functions.php file
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| add_action( 'woocommerce_single_product_summary', 'wc_rrp_show', 5 ); | |
| function wc_rrp_show() { | |
| global $product; | |
| // Do not show this on variable products | |
| if ( $product->product_type <> 'variable' ) { | |
| $rrp = get_post_meta( $product->id, 'rrp_price', true ); | |
| echo '<div class="woocommerce_msrp">'; | |
| _e( 'RRP: ', 'woocommerce' ); | |
| echo '<span class="woocommerce-rrp-price">' . woocommerce_price( $rrp ) . '</span>'; | |
| echo '</div>'; | |
| } | |
| } | |
| // Optional: To show on archive pages | |
| add_action( 'woocommerce_after_shop_loop_item_title', 'wc_rrp_show' ); |
Your end result will look like the image below when you add or edit a product
And will look like this on the front-end when a customer views the product
Just a note that this tutorial does not cover adding custom fields to variable product, that process is covered in this tutorial by my fellow team member at WooThemes, Remi Corson.