WordPress: WooCommerce Custom Product Feild
WooCommerce is a free eCommerce plugin that allows you to sell on your own website. WooCommerce is my go to eCommerce solution for WordPress as it gives owners and developers a lot of control over the system. I have found that sometimes it is necessary to add some custom product fields to capture more information than what comes out of the box with WooCommerce.
Luckily the developers at WooThemes have added hooks into there own plugins to allow us easy access.
To set this up we must:
- Display our Custom Fields
- Save our Custom Fields
Display our Custom Fields
The first step is to display our custom fields on the product editor screed. For this we need to add the following code to our themes functions.php file:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/*WooCommerce Custom Fields*/ // Display Fields add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_general_fields' ); function woo_add_custom_general_fields() { global $woocommerce, $post; echo '<div class="options_group">'; // Checkbox: Example 1 woocommerce_wp_checkbox( array( 'id' => '_checkbox_example1', 'wrapper_class' => 'show_if_simple', 'label' => __('Example 1', 'woocommerce' ), 'desc_tip' => 'true', 'description' => __( 'A decsription for Example 1', 'woocommerce' ) ) ); echo '</div>'; } |
First we are telling WordPress to add our custom function (woo_add_custom_general_fields) to the built in woocommerce_product_options_general_product_data hook. This will add our custom fields to the general tab on the product edit display.
Next we create the woo_add_custom_general_fields function, get the global WooCommerce variables, and echo the wrapper that will contain our custom product fields.
Next we use a WooCommerce built in function to create our custom fields. In our example we are creating a checkbox. You can view more options and a bit of a description on how these functions work from Remi Corson post here.
Save our Custom Fields
Now that we have our fields displayed on the product editor screen we need to actually save the data. Add the following to the code above:
1 2 3 4 5 6 7 |
// Save Fields add_action( 'woocommerce_process_product_meta', 'woo_add_custom_general_fields_save' ); function woo_add_custom_general_fields_save( $post_id ){ // Checkbox $woocommerce_checkbox = isset( $_POST['_checkbox_example1'] ) ? 'yes' : 'no'; update_post_meta( $post_id, '_checkbox_example1', $woocommerce_checkbox ); } |
First we tell WordPress to add our save function woo_add_custom_general_fields_save to the built in WooCommerce function woocommerce_process_product_meta.
Next we create the woo_add_custom_general_fields_save function check its value then use the update_post_meta function to store it in the database.
Retrieving Fields Values
To retrieve your custom fields use the following php code:
1 |
echo get_post_meta( $post->ID, '_checkbox_example1', true ); |
View the Full Code Below
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
/*WooCommerce Custom Fields*/ // Display Fields add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_general_fields' ); function woo_add_custom_general_fields() { global $woocommerce, $post; echo '<div class="options_group">'; // Checkbox: Example 1 woocommerce_wp_checkbox( array( 'id' => '_checkbox_example1', 'wrapper_class' => 'show_if_simple', 'label' => __('Example 1', 'woocommerce' ), 'desc_tip' => 'true', 'description' => __( 'A decsription for Example 1', 'woocommerce' ) ) ); echo '</div>'; } // Save Fields add_action( 'woocommerce_process_product_meta', 'woo_add_custom_general_fields_save' ); function woo_add_custom_general_fields_save( $post_id ){ // Checkbox $woocommerce_checkbox = isset( $_POST['_checkbox_example1'] ) ? 'yes' : 'no'; update_post_meta( $post_id, '_checkbox_example1', $woocommerce_checkbox ); } |
Recent Comments