I'm hopping someone can help me figure out how to add a custom text field to my single woocommerce product page.
I simply want to add a form and found this plugin, but it's not customizable. I much rather create the form and place it where I need it.
https://wordpress.org/plugins/wc-fields-factory/
Thanks!
You Can try This, This will work 100%,
// Display Fields (function.php)
function woo_add_custom_general_fields() {
global $woocommerce, $post;
echo '<div class="options_group">';
// Custom fields will be created here...
echo '</div>';
}
add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_general_fields' );
To create a text field type, you will need to use that code:
// Text Field
woocommerce_wp_text_input(
array(
'id' => '_text_field',
'label' => __( 'My Text Field', 'woocommerce' ),
'placeholder' => 'http://',
'desc_tip' => 'true',
'description' => __( 'Enter the custom value here.', 'woocommerce' )
)
);
To create a textarea, here is the code to use:
// Textarea
woocommerce_wp_textarea_input(
array(
'id' => '_textarea',
'label' => __( 'My Textarea', 'woocommerce' ),
'placeholder' => '',
'description' => __( 'Enter the custom value here.', 'woocommerce' )
)
);
Saving Fields Values:
function woo_add_custom_general_fields_save( $post_id ){
// Text Field
$woocommerce_text_field = $_POST['_text_field'];
if( !empty( $woocommerce_text_field ) )
update_post_meta( $post_id, '_text_field', esc_attr( $woocommerce_text_field ) );
// Textarea
$woocommerce_textarea = $_POST['_textarea'];
if( !empty( $woocommerce_textarea ) )
update_post_meta( $post_id, '_textarea', esc_html( $woocommerce_textarea ) );
}
// Save Fields
add_action( 'woocommerce_process_product_meta', 'woo_add_custom_general_fields_save' );
Display Custom Field Value
<?php
// Display Custom Field Value
echo get_post_meta( $post->ID, 'my-field-slug', true );
// You can also use
echo get_post_meta( get_the_ID(), 'my-field-slug', true );
?>
to know more you can visit :
http://www.remicorson.com/mastering-woocommerce-products-custom-fields/
Related
Could anyone assist in helping me get the below code to function correctly. I have taken bits of code from various other posts to create it.
I need to create a custom field (Datasheet) and be able to post a link to a PDF file. It should then appear just before the meta data on each product page.
Current code is as follows:
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">';
woocommerce_wp_text_input( array( // Text Field type
'id' => '_datasheet_url',
'label' => __( 'Datasheet', 'woocommerce' ),
'placeholder' => 'http://',
'desc_tip' => 'true',
'description' => __( 'Datasheet URL here.', 'woocommerce' )
) );
echo '</div>';
}
add_action( 'woocommerce_process_product_meta',
'woo_save_custom_general_fields' );
function woo_save_custom_general_fields( $post_id ){
$datasheet_field= $_POST['_datasheet_url'];
if( !empty( $datasheet_field ) )
update_post_meta( $post_id, '_datasheet_url', esc_attr( $datasheet_field
) );
}
add_action('woocommerce_product_meta_start',
'woo_display_custom_general_fields_values', 5);
function woo_display_custom_general_fields_values() {
global $product;
$url = get_post_meta( $post->ID, 'Datasheet', true );
echo '<img src="http://www.freemansolutions.co.uk/wp-content/uploads/pdf-
icon.png"> Datasheet';
}
The main error is $url = get_post_meta( $post->ID, 'Datasheet', true ); as $post is not defined, then $post->ID throw an error and you can get the URL custom field value.
Try the following instead:
add_action( 'woocommerce_product_options_general_product_data', 'add_datasheet_url_custom_field' );
function add_datasheet_url_custom_field() {
echo '<div class="options_group">';
woocommerce_wp_text_input( array(
'id' => '_datasheet_url',
'label' => __('Datasheet URL', 'woocommerce'),
'placeholder' => 'http://',
'desc_tip' => 'true',
'description' => __('Set the "Datasheet" URL here.', 'woocommerce'),
) );
echo '</div>';
}
add_action( 'woocommerce_process_product_meta', 'save_datasheet_url_custom_field', 12, 1 );
function save_datasheet_url_custom_field( $post_id ){
if( isset( $_POST['_datasheet_url'] ) )
update_post_meta( $post_id, '_datasheet_url', sanitize_text_field( $_POST['_datasheet_url'] ) );
}
add_action('woocommerce_product_meta_start', 'use_datasheet_url_custom_field', 5 );
function use_datasheet_url_custom_field() {
$pdf_url = get_post_meta( get_the_id(), '_datasheet_url', true );
if( ! empty( $pdf_url ) ){
$icon_pdf = home_url( '/wp-content/uploads/pdf-icon.png' );
echo '<img src="'.$icon_pdf.'" /> ' . __('Datasheet', 'woocommerce') . '';
}
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
I'm trying to add checkbox to settings tab in WooCommerce (in admin panel) and use this code:
add_action( 'woocommerce_product_options_general_product_data', 'wc_custom_add_custom_fields' );
function wc_custom_add_custom_fields() {
global $post;
woocommerce_wp_checkbox(array(
'id' => 'is_gift',
'label' => __('Gift', 'woocommerce' ),
'description' => __( 'Add gift label', 'woocommerce' ),
'value' => get_post_meta($post->ID, 'is_gift', true)
));
}
add_action( 'woocommerce_process_product_meta', 'wc_custom_save_custom_fields' );
function wc_custom_save_custom_fields() {
global $post;
if (!empty($_POST['is_gift'])) {
update_post_meta( $post->ID, 'is_gift', esc_attr( $_POST['is_gift'] ) );
}
}
This code showing checkbox, but not saving changes. It works only for one product. I guess something wrong with $post->ID?
Updated … Try this instead:
add_action( 'woocommerce_product_options_general_product_data', 'wc_custom_add_custom_fields' );
function wc_custom_add_custom_fields() {
global $post;
$input_checkbox = get_post_meta( $post->ID, 'is_gift', true );
if( empty( $input_checkbox ) ) $input_checkbox = '';
woocommerce_wp_checkbox(array(
'id' => 'is_gift',
'label' => __('Gift', 'woocommerce' ),
'description' => __( 'Add gift label', 'woocommerce' ),
'value' => $input_checkbox,
));
}
add_action( 'woocommerce_process_product_meta', 'wc_custom_save_custom_fields' );
function wc_custom_save_custom_fields($post_id) {
$_custom_text_option = isset( $_POST['is_gift'] ) ? 'yes' : '';
update_post_meta( $post_id, 'is_gift', $_custom_text_option );
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
try this
add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_general_fields' );
function woo_add_custom_general_fields() {
global $woocommerce, $post;
$checkbox_value = get_post_meta( $post->ID, 'is_gift', true );
if( empty( $checkbox_value ) ){
$checkbox_value = '';
}
woocommerce_wp_checkbox(
array(
'id' => 'is_gift',
'label' => __('Gift', 'woocommerce' ),
'description' => __( 'Add gift label', 'woocommerce' ),
'value' => $checkbox_value,
)
);
}
// Save Fields
add_action( 'woocommerce_process_product_meta', 'woo_add_custom_general_fields_save' );
function woo_add_custom_general_fields_save( $post_id ){
// Checkbox
$_checkbox = $_POST['is_gift'];
if (isset( $_checkbox )){
update_post_meta( $post_id, '_is_gift', $_checkbox );
}
}
i've tried many methods to make a custom fields
in woocommerce 3.1 but this code didnt work for me.
can any one help me to figure out how to add a custom fields like this on the link below
http://www.remicorson.com/mastering-woocommerce-products-custom-fields/
Best regards
Add Custom fields in Product General tab used woocommerce_product_options_general_product_data action hook
add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_general_fields' );
function woo_add_custom_general_fields() {
global $woocommerce, $post;
woocommerce_wp_text_input(
array(
'id' => '_text_field',
'label' => __( 'My Text Field', 'woocommerce' ),
'placeholder' => 'http://',
'desc_tip' => 'true',
'description' => __( 'Enter the custom value here.', 'woocommerce' )
)
);
}
Now For Saving this fields to data based using woocommerce_process_product_meta
add_action( 'woocommerce_process_product_meta', 'woo_add_custom_general_fields_save' );
function woo_add_custom_general_fields_save( $post_id ){
$woocommerce_text_field = $_POST['_text_field'];
if( !empty( $woocommerce_text_field ) )
update_post_meta( $post_id, '_text_field', esc_attr( $woocommerce_text_field ) );
}
i hop now you understand. it working with WooCommerce 3.1
I'm trying to create custom field in woo-commerce (not interested in plugins) in single product and variable product ( custom field price should change according to selected variable option) as that client should be able to enter price as show in 1st picture and customer could be able check the option.
My Requirement
// Display Fields
add_action( 'woocommerce_product_options_general_product_data', 'woocom_general_product_data_custom_field' );
function woocom_general_product_data_custom_field() {
// Create a custom text field
// Text Field
woocommerce_wp_text_input(
array(
'id' => '_text_field',
'label' => __( 'Enter your choose', 'woocommerce' ),
'placeholder' => 'Custom text field',
'desc_tip' => 'true',
'description' => __( 'Enter the custom value here.', 'woocommerce' )
)
);
// Number Field
woocommerce_wp_text_input(
array(
'id' => '_number_field',
'label' => __( 'Enter your number', 'woocommerce' ),
'placeholder' => '',
'description' => __( 'Enter the custom value here.', 'woocommerce' ),
'type' => 'number',
'custom_attributes' => array(
'step' => 'any',
'min' => '15'
)
)
);
// Checkbox
woocommerce_wp_checkbox(
array(
'id' => '_checkbox',
'label' => __('Select', 'woocommerce' ),
'description' => __( 'Check me!', 'woocommerce' )
)
);
// Select
woocommerce_wp_select(
array(
'id' => '_select',
'label' => __( 'option', 'woocommerce' ),
'options' => array(
'1' => __( 'Custom Option 1', 'woocommerce' ),
'2' => __( 'Custom Option 2', 'woocommerce' ),
'3' => __( 'Custom Option 3', 'woocommerce' )
)
)
);
// Textarea
woocommerce_wp_textarea_input(
array(
'id' => '_textarea',
'label' => __( 'Description', 'woocommerce' ),
'placeholder' => '',
'description' => __( 'Enter the custom value here.', 'woocommerce' )
)
);
}
// Hook to save the data value from the custom fields
add_action( 'woocommerce_process_product_meta', 'woocom_save_general_proddata_custom_field' );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_top_category_desc', 1 );
function woocommerce_template_top_category_desc (){
$terms = get_the_terms( $post->ID, 'wc-attibute-class' );
if ( !empty($terms)) {
$term = array_pop($terms);
$text= get_field('txt-field', $term);
if (!empty($text)) {
echo $text;
}
}
}
/** Hook callback function to save custom fields information */
function woocom_save_general_proddata_custom_field( $post_id ) {
// Save Text Field
$text_field = $_POST['_text_field'];
if( ! empty( $text_field ) ) {
update_post_meta( $post_id, '_text_field', esc_attr( $text_field ) );
}
// Save Number Field
$number_field = $_POST['_number_field'];
if( ! empty( $number_field ) ) {
update_post_meta( $post_id, '_number_field', esc_attr( $number_field ) );
}
// Save Textarea
$textarea = $_POST['_textarea'];
if( ! empty( $textarea ) ) {
update_post_meta( $post_id, '_textarea', esc_html( $textarea ) );
}
// Save Select
$select = $_POST['_select'];
if( ! empty( $select ) ) {
update_post_meta( $post_id, '_select', esc_attr( $select ) );
}
// Save Checkbox
$checkbox = isset( $_POST['_checkbox'] ) ? 'yes' : 'no';
update_post_meta( $post_id, '_checkbox', $checkbox );
// Save Hidden field
$hidden = $_POST['_hidden_field'];
if( ! empty( $hidden ) ) {
update_post_meta( $post_id, '_hidden_field', esc_attr( $hidden ) );
}
}
I have tried some woocommerce custom plugin but it didn't solve my requirement as I have 25 above custom filed to be created and plugin seems to be very lengthy process for my work
My output is in picture 2 which I got from coding for not as my requirement
My output
I know you are not interested in plugins, but I highly recommend ACF plugin for custom fields. Check it out, it will save you a lot of time.
QUESTION UPDATED AS PEOPLE SEEMED TO MISUNDERSTAND IT:
Using the WooCommerce plugin for WordPress, I'd like to display the product variation names in the Additional Information tab in the same way as weight and dimesions are displayed.
For instance, I have a product that comes in two sizes, 2 litres and 10 litres, therefore it's a variable product with the two product variations '2 litres' and '10 litres'. If I check the box 'display on product page', size is displayed in the Additional Information tab like this: 'Size: 2 litres, 10 litres'.
I want it to work like the weight and dimensions, so when the product variation '2 litres' is selected, the Additional Information tab will display 'Size: 2 litres', and when the product variation '10 litres' is selected, the Additional Information tab will display 'Size: 10 litres'.
Can this be done?
Here is the full code to add all types of custom input fields for Product Variations:
<?php
// Add Variation Settings
add_action( 'woocommerce_product_after_variable_attributes','variation_settings_fields', 10, 3 );
// Save Variation Settings
add_action( 'woocommerce_save_product_variation', 'save_variation_settings_fields', 10, 2 );
/**
* Create new fields for variations
*
*/
function variation_settings_fields( $loop, $variation_data, $variation ) {
// Text Field
woocommerce_wp_text_input(
array(
'id' => '_text_field[' . $variation->ID . ']',
'label' => __( 'My Text Field', 'woocommerce' ),
'placeholder' => 'http://',
'desc_tip' => 'true',
'description' => __( 'Enter the custom value here.', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, '_text_field', true )
)
);
// Number Field
woocommerce_wp_text_input(
array(
'id' => '_number_field[' . $variation->ID . ']',
'label' => __( 'My Number Field', 'woocommerce' ),
'desc_tip' => 'true',
'description' => __( 'Enter the custom number here.', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, '_number_field', true ),
'custom_attributes' => array(
'step' => 'any',
'min' => '0'
)
)
);
// Textarea
woocommerce_wp_textarea_input(
array(
'id' => '_textarea[' . $variation->ID . ']',
'label' => __( 'My Textarea', 'woocommerce' ),
'placeholder' => '',
'description' => __( 'Enter the custom value here.', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, '_textarea', true ),
)
);
// Select
woocommerce_wp_select(
array(
'id' => '_select[' . $variation->ID . ']',
'label' => __( 'My Select Field', 'woocommerce' ),
'description' => __( 'Choose a value.', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, '_select', true ),
'options' => array(
'one' => __( 'Option 1', 'woocommerce' ),
'two' => __( 'Option 2', 'woocommerce' ),
'three' => __( 'Option 3', 'woocommerce' )
)
)
);
// Checkbox
woocommerce_wp_checkbox(
array(
'id' => '_checkbox[' . $variation->ID . ']',
'label' => __('My Checkbox Field', 'woocommerce' ),
'description' => __( 'Check me!', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, '_checkbox', true ),
)
);
// Hidden field
woocommerce_wp_hidden_input(
array(
'id' => '_hidden_field[' . $variation->ID . ']',
'value' => 'hidden_value'
)
);
}
/**
* Save new fields for variations
*
*/
function save_variation_settings_fields( $post_id ) {
// Text Field
$text_field = $_POST['_text_field'][ $post_id ];
if( ! empty( $text_field ) ) {
update_post_meta( $post_id, '_text_field', esc_attr( $text_field ) );
}
// Number Field
$number_field = $_POST['_number_field'][ $post_id ];
if( ! empty( $number_field ) ) {
update_post_meta( $post_id, '_number_field', esc_attr( $number_field ) );
}
// Textarea
$textarea = $_POST['_textarea'][ $post_id ];
if( ! empty( $textarea ) ) {
update_post_meta( $post_id, '_textarea', esc_attr( $textarea ) );
}
// Select
$select = $_POST['_select'][ $post_id ];
if( ! empty( $select ) ) {
update_post_meta( $post_id, '_select', esc_attr( $select ) );
}
// Checkbox
$checkbox = isset( $_POST['_checkbox'][ $post_id ] ) ? 'yes' : 'no';
update_post_meta( $post_id, '_checkbox', $checkbox );
// Hidden field
$hidden = $_POST['_hidden_field'][ $post_id ];
if( ! empty( $hidden ) ) {
update_post_meta( $post_id, '_hidden_field', esc_attr( $hidden ) );
}
}
?>
To get those values on the frontend we just need to use the popular get_post_meta() function.
Reference article at here:
http://www.remicorson.com/woocommerce-custom-fields-for-variations/
Here's a first attempt. There's not a lot to go on in the attributes table, but when an attribute dropdown is changed, it will find the attribute in the additional information tab (where it is listed in default WooCommerce) and change the text to match the label in the dropdown. A problem occurs when the customer switches back to the empty "choose" option, so you'd need to expand this to somehow account for that.
jQuery( document ).ready(function($) {
$( ".variations_form" ).on( 'change', '.variations select', function() {
id = $(this).attr('id');
attribute = toTitleCase( $(this).attr('id').replace("pa_", "") );
selected = $(this).find('option:selected').text();
$('#tab-additional_information').find('.shop_attributes th:contains('+attribute+')').next('td').text(selected);
});
function toTitleCase(str){
return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
}
});
Save the above as somescript.js in your theme's folder. Then add the following to functions.php to properly enqueue the script.
/**
* Proper way to enqueue scripts and styles
*/
function theme_name_scripts() {
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/somescript.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );