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.
Hi,
I’m looking to add a comments textarea for users to fill out on the product page, by comments I mean to add preferences for the order. My e-commerce store is a butchery, so lets say the customers orders chicken wings and the comment would be ‘ no skin and cut into twos’. I want that comment to automatically be added to the order page.
Is that possible? and would this guide help me reach that goal.
Ofer
Hi Ofer, unfortunately this will not work for that, this is only to place custom fields in the backend and display the values to the customer on the front-end. If you want functionality where customers can enter text at checkout then perhaps look at the Checkout Field Editor http://www.woothemes.com/products/woocommerce-checkout-field-editor/ Or if you want it specifically for customer to enter per product the Product Add-ons extension http://www.woothemes.com/products/product-add-ons/
Hi, for>2 weeks I’m searching a way to add 2 number input fields for width and height,
and add custom price from statements : if width 40-60 and height 60-80 then price=myValue, i
‘m using woocommerce,and i try many plugins already-meas. price calculation, add-ons, acf, gravity forms – without result
How can i add this inputs and statements to set price to my value
What hooks use? I need to do this via code, coz i have hundreds of variation already, with 6 different price cathegory= 6 huge price tables
The perfect code for me will(propobly) look like this:
if product name==a && width >= =<= then price=myvalue
Why is it so hard in cms ;/ on static page – its much more easy to achieve
I'm begging for your help, my project drives me crazy…and mad on cms ;/
Hi Gerhard,
thanks, this is just what i was looking for. But one question: Is there any way to make the rrp price display also on the product overview page and not just on the product detail page?
Would be very happy if you could help.
try this:
// Add to our admin_init function
add_filter(‘manage_product_posts_columns’, ‘myown_add_post_columns’);
function myown_add_post_columns($columns) {
$columns[‘rrp_price’] = ‘Item Number’;
return $columns;
}
// Add to our admin_init function
add_action(‘manage_product_posts_custom_column’, ‘myown_render_post_columns’, 10, 2);
function myown_render_post_columns($column_name, $id) {
switch ($column_name) {
case ‘rrp_price’:
// show my_field
$my_fieldvalue = get_post_meta( $id, ‘rrp_price’, TRUE);
echo $my_fieldvalue;
}
}
Thanks for this, I’m also trying to get the custom fields to show up on my product overview page. I’m having a hard time getting it to work though. I have 4 different custom fields — could that be causing the problem? How would I rewrite this to accommodate multiple values? Thanks very much for any help!
Hi,
I want to add a date to each product (Cookery Courses) I’m using the date picker add-on of the Advanced Custom Fields plug in at the moment . I can get this date to show on each product page and on the catalog, happy with that bit, but getting that date to then show in the customer emails and on the edit order page is proving a challenge. I’ve found no solutions out there. I don’t suppose your RRP custom Field appears on Edit Order screen and emails. If not how would I add it?
All solutions seem to revolve round the checkout field editor but that’s not relevant here…
Pete, no my tutorial does not cover that. For that you will have add the data as product meta data and then it will by default show in the emails. Unfortunately that requires quite a lot dev of works.
Great tutorial!
How would one go about adding an additional field similar to another RRP field?
Hey Gerhard I actually figured it out , however i can’t get the new product fields to display on the product categories page? It will display on the individual product page but I need it to display on both. Any suggestions?
thanks
I updated the last snippet of code to include a hook to show it on the archive pages as well.
If I go to clear out the RRP price and update the page, the price is not going away. Can you fix this?
Hi Chris, I updated the code snippets in the post to delete the field if no data is entered.
Hi Gerhard, and what hooks can I use to create a new field but stylable text (like the Short porduct description field)? Thanks in advance.
I dont know where exactly can I add this code on the function.php , can you please advise
Hi Jola
You can add this code anywhere in your theme’s functions.php file, most themes has a section that says put custom code here, or just add it to the end of the file.
Hi Gerhard,
If I want to display “discount of 10%” (for example) instead of $, how can I do?
Hi Annalisa, for that please see http://gerhardpotgieter.com/2013/09/06/woocommerce-percentage-saved-sale-price/
Wow! It’ss great. Thank you very much!
Hey Gerhard,
Do you know when you will be doing the tutorial for adding custom fields to variable product? Thanks!
Hi Rich, this is on my todo list for early 2014. Keep an eye on the blog or subscribe to the newsletter from the sidebar to keep updated on new tutorials when they come out.
Great.. I have been looking for this extension for quite a while. I’m glad to see that you will be adding it.
When you do that variable product tutorial Gerhard will it by chance cover a way to make the price field (that now says From: $250, which I don’t like) shown on products to just a price range; i.e. $250 – $1,100 ? I suspect the function wouldn’t be too difficult but for this php dummy it’s extreme. 😉 Thanks!
Hi Charly
That is actually something I can do as a standalone tutorial. It will require hooking into the woocommerce_get_price_html filter to modify the display output of the price.
Hi Gerhard,
Did you get around to adding the RRP field and price to variable products, if so where can I find the code?
Kevin
Hey Gerhard,
Do you know how to create an” add to cart” button in woocommerce shop page for simple products.
Regards
Hi Sahil
I am not sure I follow what you mean exactly? By default if you assign a price to a product it will get an “Add to cart” button on the shop page. There is also shortcodes you can use to display “Add to cart” buttons on different pages http://docs.woothemes.com/document/woocommerce-shortcodes/#section-5
This is great, i would also really love to know how to do this for variable products… any helps or hints would be greatly appreciated
I am busy finishing up this tutorial, keep an eye out in the next couple of weeks 🙂
It would be great if you could update this tutorial to cover adding custom fields to variable product
something we want to do but bit beyond us
Hi Will, I am busy with a tutorial on Variable product fields, justing taking longer then expected, time is a bit limited on my side 🙂
This is great! I have been customizing this example to fit my needs, which are to replace it with a Cook Time (ex. 1 hour 30 min) instead of a price. The functionality is awesome. I’ve accomplished what I want, except there is a hokey work-around where the data won’t save unless I create a Custom Field for the product and put “1 hour 30 min” in there, then it auto-fills in the Product Data field I created.
I think it’s the “is_numeric” in the code for saving the data in the product field. Do you know of another way to write that so it doesn’t have to be numbers?
(See, here is how the data fills in on this page http://eatgoodathome.com/test-menu/ and this page http://eatgoodathome.com/product/beer-can-chicken/. I just want a clean way to fill in the info in the Product Data area.)
I figured it out…I just removed all of the “isset” condition.
function wc_time_save_product( $product_id ) {
if ($_POST[‘cook_time’]) update_post_meta( $product_id, ‘cook_time’, $_POST[‘cook_time’] );
}
Hi Gerhard
Thanks for this great post, it’s been helpful 🙂
is it possible to add a custom text field on a ‘Grouped product’?
Thanks
Stoan
Thanks for this nice tut. i customized your code to add a parts number field on the site am working on now. It is working very fine but my search engine cannot find the parts number that i added whenever i search except through the title. Any help or guide will be appreciated .
@philips try this plugin: http://wordpress.org/plugins/search-everything/
It will let you search customfields (metadata)
I am trying to set up a woocommerce site for a stamp collector/dealer. This code looks like what I want, with the exception that I really dont want pricing – I want to display catalog #s for the stamp. Each stamp has a Michel # and a Scott # and I would like these text fields to display under the pricing…can your code be adapted for that?
@jill you could maybe install the woocommerce visibility options plugin to get rid of pricing aspects on the site combined with Gerhard’s above code.
http://www.woothemes.com/products/catalog-visibility-options/
Hi, great tutorial Gerhard! I was lookin for something like this several time ago, but what if we want to put the values of the new custom fields in [cart.php, mini-cart.php or form-checkout.php and mail notifications]? You now, in order to show the values in the same way that show up variables, in my case i want to print in the order this little reference… do you have any advice? 🙂
Hi Walter, that is not what this tutorial is suppose to do. This is only for displaying data entered in the backend on the frontend. If you want to have customer enter data into custom fields and cary it through to the cart, checkout and order have a look at the Product Add-ons extension http://www.woothemes.com/products/product-add-ons/
You just made my googling experience so much more worth it. This solution is awesome.. got my fields added. I changed it to a text field. so works 100%
Thank You.
If anyone want to code to change to text let me know.
Juan,
YES! I actually REALLY need the code to change to text. Help a brother out!
Hey Danny
Basically what I did was add a store name field. and made it appear under SKU, but I wanted it to be a Text field. This is what I did
Here you go….
/**
* Woocommerce Store Name Tab Saving (saving the text entered)
*
*/
add_action( ‘save_post’, ‘wc_store_name_save_product’ );
function wc_store_name_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[‘store_name’] ) ) {
if ( is_string( $_POST[‘store_name’] ) )
update_post_meta( $product_id, ‘store_name’, $_POST[‘store_name’] );
} else delete_post_meta( $product_id, ‘store_name’ );
}
/**
* Woocommerce Store Name Tab Display to Users (displaying to users)
*
*/
add_action( ‘woocommerce_single_product_summary’, ‘wc_store_name_show’, 5 );
function wc_store_name_show() {
global $product;
// Do not show this on variable products
if ( $product->product_type ‘variable’ ) {
$store_name = get_post_meta( $product->id, ‘store_name’, true );
echo ”;
_e( ‘Store Name: ‘, ‘woocommerce’ );
echo ” . $store_name . ”. ” . ”;
echo ”;
}
}
Hi Juan!
I need just like Danny to add a product code field…I tired your code but it broke my site…am I missing something? I’m not very php savvy…but I think I’m missing the first action, to get it to show up on the product backend page? Any pointers on that one? I’d really really appreciate it!
Thanks in advance,
Mariana
Ive tried this code but there is something wrong somewhere. Does anyone know where?
Hi I want to use it for date please help me
hi i am making an e-commerce site using woo commerce. i want to add customised field where in i can ask for user link to Facebook account near the product item. so how can i add it? can u tell? you can mail me too
Great tutorial, very useful.
Just wondering how you would alter this to only display the custom field if I actually put in some information? The website I’m working on has some products they sell with a rental option, and I’m using this to display the rental prices. If I leave the custom field empty, it displays it as $0. Not ALL of their products are available to rent, so how would I go about showing this only on specific products?
Hi Kyle
To make it conditional, just leave the field empty on the product, and then use the following code instead
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 );
if ( ! empty( $rrp ) ) {
echo '';
_e( 'RRP: ', 'woocommerce' );
echo '' . woocommerce_price( $rrp ) . '';
echo '';
}
}
}
Gerhard, what will need to be change if I want RRP amount to be added to the price when cheking out the product?. Thanks
Can this be adapted to have the same div class on as in the original guide??
The reason i ask if for styling reasons as how this code stands, i cannot style it to fit in with my styles on my product pages.
I need a css class of some description for when the rrp shows. – this is is the class for the original guide.
Any assistance woudld be great as i cant work out the code without it either breaking my site or not working at all..
Thanks
Thanks Gerhard, I’ve been trying to use ACF for this one, but the problem was with getting them into the woocomerce loop. This is an elegant and much more end-user friendly way of doing it, and you solved my loop problem. My hat’s off to you friend!
Hey Gerhard,
Thanks for the awesome tutorial! I’m about to give it a whirl. I do have a question though — is it possible to put several custom text fields inside the Product Description?
For example, I want to import data into custom fields within the product description so it shows the following information there like this:
Product Color: Blue, Red, Green
Product Size: 14″
Product Weight: 22 lbs
I want to do this so it’ll be much easier to import the data into the description area without having to edit the post content in Excel, but rather import them all into custom fields piece by piece.
Thanks so much!
Dan
Hey Dan,
Did you get this working with multiple fields?
If so, would you mind sharing?
Best wishes
R
Hey Gerhard,
I’ve created a custom tab for the product data like this:
add_action( ‘woocommerce_product_write_panel_tabs’, ‘woo_add_custom_admin_product_tab’ );
function woo_add_custom_admin_product_tab() {
?>
<?php
}
But I'm having trouble incorporating the hook to put the custom fields in that custom tab. Any wisdom for me on this?
there should be a line between the php tags in the middle like this (without the ‘//’):
//
apparently I can’t include any HTML
It’s a list item declaring the tab.
hello
please help me
i uploaded my products with csv there had many custom fields and into values , the products value and fields are displaying in to admin , but not front end , only information tab are displaying what can i missing . please help me .
Thanks
shoot out issue myself
choosing custom field value
Set the value custom name/product attribute (“Set Name Below “)
thanks
Hi all,
Would it be possible to use a pull down list instead of a text field?
So you can select a predefined value for that field.
How can I place RRP below the product’s short description or directly below the base price? Thanks.
Hi Gerhard, great tutorial!
Is there a way to use this to, instead of a “retail price”, a “Super Saver” price that reflects an even better discount than the woocommerce sale price—which also shows up as the final cart price?
It would go:
Original price/Sale Price/Super Saver Price
Thank you!
Hello Gerard,
I am trying to alter this code for custom text fields. But i cannot get this to work. Can you give me some tips?
How I get the data from database, i want to print the RRP value in my template
How could I do this with a dropdown menu in the backend?
Hello Gerhard, any news about adding custom fields to variable products? I could really need that.
Hi gerhard,
thanks a lot I blogged about your tutorial for variables already. I have one question regarding this tutorial: where can I determin the position? I need that RRP field right under the price in the frontend. When i sue the code unchanged, it appears under add to cart and under wishlist button. In your tutorial for custom field for variable products theres an addition that mentioned the variable.php file of woocommerce where you have to add you code snippet to place the field in frontend.
How does it work in this case? thx in advance 😉
Very helpful, thanks!
A number of people have mentioned adding custom fields to variable products. This is what I really need to do, but it doesn’t appear that variable products have the same kind of hooks as simple products. (Looking at html-variation-admin.php. There appear to be only two action hooks, and not with the price fields as for simple products.)
Is it definitely possible to add fields to variable products?
Hi I would like to have check boxes instead of input box. The reason is because when I check the box in the backend, I want it to show the product as a ‘yes’ or replace ‘checked box’ with a tick icon via CSS (I can sort the CSS part out just wanted to know the correct code for managing checkboxes
Thanks
Hi – Great Tip!
I am having an issue, once I enter a value into the new RRP field, If I go back and remove that value, then hit update page, the value is still there.
Any help would be greatly appreciated.
Hi Gareth, change
if ( is_numeric( $_POST['rrp_price'] ) )
update_post_meta( $product_id, 'rrp_price', $_POST['rrp_price'] );
to
if ( is_numeric( $_POST['rrp_price'] ) )
update_post_meta( $product_id, 'rrp_price', $_POST['rrp_price'] );
else delete_post_meta( $product_id, 'rrp_price' );
Hi,
For some reason all the products are showing RRP: £0.00 by default when the field is blank which I wouldnt expect to happen. If the field RRP is blank then I am expecting the RRP to be hidden on the product page and the category view. Do you know what the reason would be?
Thanks
I am dealing with variable products, and the custom fields need to be conditional so when empty the field does not display on the front-end.
Directly below the product price I would like to add the following conditional text fields:
Fabric: Pima Cotton
Design: Embroidered
Style: Long Sleeve
Manufacturer: ABC Shirts
Shortlink: http://theurltothe product.com
Hi. Is there any relatively simple way to customize the “sort by” options to allow sorting of products by these custom fields? Been searching for hours and can’t find a way to make it work. Thanks for any help.
Hi Gerhard,
We use your plugins all over. You have tru WooFu. Quick question on this tutorial. We offer credit / terms purchases, so the tutorial will allow us to add a “R 50 p/m over 12 months” type thing, but is there a way to calculate this based on the existing product price rather than having to edit each one. No good at PHP here, and can’t find anything that will do this.
So… when will you be making the tutorial for adding a custom field to VARIABLE products available?
Hi – thanks for the excellent tutorial. I am developing a site which will offer products for purchase, rent or loan. I can see how I can these values appear on the front end but how do I then allow users to add an option to the cart and ensure that they can only select one of the options?
Thanks, Simon
Its good solution if this fields static.
But what can i add dynamic inputs on single product page?
For example – I build checkbox-list or multiselect on a single product page, with items, who related to current user (friendlist from buddypress for example)
How can I send checked friends to checkout page, then to email?
Hi Gerhard,
Is it possible to add the price into the subtotal.
I have a product that costs 100$
But there is an extra standard fee on the product – 10$
So subtotal its: 110$
As it is now, the extra price doesn´t add to the subtotal.
Thank you!
Hi Joachim, that is unfortunately a bit more complex as you will need to add code to adjust the totals etc. I’d suggest you look into the Product Add-Ons extension which has this ability http://www.woothemes.com/products/product-add-ons/
Hi Gerhard,
How i could show the RRP field on front-end just under the UGS field.
Here is below the code i enter and who work well. I need just modify it to show my D.A.S value just under the UGS field.
Could you give me the code please ?
// Add Custom field D.A.S
add_action( ‘woocommerce_product_options_pricing’, ‘wc_das_product_field’ );
function wc_das_product_field() {
woocommerce_wp_text_input( array( ‘id’ => ‘das_price’, ‘class’ => ‘wc_input_price short’, ‘label’ => __( ‘das’, ‘woocommerce’ ) . ‘ (‘ . get_woocommerce_currency_symbol() . ‘)’ ) );
}
add_action( ‘save_post’, ‘wc_das_save_product’ );
function wc_das_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[‘das_price’] ) ) {
if ( is_numeric( $_POST[‘das_price’] ) )
update_post_meta( $product_id, ‘das_price’, $_POST[‘das_price’] );
} else delete_post_meta( $product_id, ‘das_price’ );
}
add_action( ‘woocommerce_single_product_summary’, ‘wc_das_show’, 5 );
function wc_das_show() {
global $product;
// Do not show this on variable products
if ( $product->product_type ‘variable’ ) {
$das = get_post_meta( $product->id, ‘das_price’, true );
echo ”;
_e( ‘das: ‘, ‘woocommerce’ );
echo ” . woocommerce_price( $das ) . ”;
echo ”;
}
}
// Optional: To show on archive pages
add_action( ‘woocommerce_after_shop_loop_item_title’, ‘wc_das_show’ );
// End Add Custom field D.A.S
Been looking for this for ages! However…
Is it possible to make this field a calculation one based on product ..
I’m setting up an online print shop and want to be able to display the estimated delivery date on the product page.. Same way as you have but I need to be able to choose number of days so the value would be Now() + 3 or now()+7 then calculate and display it.
Probably over complicated it but basically an estimated delivery date based on the number of days I choose in edit product
Always no response about my question please. ????
Hi,
Working perfectly on simple products, did you ever do the tutorial for variable products? If not how do I do it?
Thanks
Andrea
Hi Andrea, one of my team members at WooThemes did a post on doing it for variable products, see http://www.remicorson.com/woocommerce-custom-fields-for-variations/
Hi
Looked all over for this and this is exactly what I need!
Is it possible, however, to add a category instead of a price?
If not a categoty – then just a text field?
My products are ebooks. Right now on the shop page I just have the product name (book title) and want to list the Author after the product name. Each Author name is a category so it would be great to add the category right under the product name just as RRP is added in this example. If this is not possible then just adding a text field where I could input the author name would be great!
Also, is it possible to have the new data added by this process to look as it outputs on the single product page?
With your example, on my site, the single product page looks like this:
Anthem <—- product name
RRP: £0.00 <—— added by your tutorial
Free! <—— added by woocommerce price setting
On Shop Page and category page it outputs like this:
2 B R 0 2 B
Free!
RRP: £0.00
Would be great if on the shop page and the category if it output like you see on the single product page:
Product name, with RRP under it on the next line, a space, and then Price.
Thanks!
Kyle
Hi I am making a website in wordpress and I need to create this function to calculate quotas and this website I made in another technology: https://lahoradelascompras.com/sitio/index.php?route=product/product&product_id=51 (that is the function with the price in green) The really do not know where to start because I discovered wordpress. Could you help?
This is the website I’m doing: http://compremejor.com/wordpress/
Hi Gerhard,
I would write “call us” if the rcp price is = 0
How can I do it?
Thank you
Ciro
0 Pingbacks
Comment navigation
Comment navigation
Categories
Top Posts & Pages
Instagram
No Instagram images were found.
Get Email Notifications
Discover more from Gerhard Potgieter
Subscribe now to keep reading and get access to the full archive.
Continue reading