Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
WooCommerce variations custom field
//Display Fields
add_action( 'woocommerce_product_after_variable_attributes', 'variable_fields', 10, 2 );
//JS to add fields for new variations
add_action( 'woocommerce_product_after_variable_attributes_js', 'variable_fields_js' );
//Save variation fields
add_action( 'woocommerce_process_product_meta_variable', 'variable_fields_process', 10, 1 );
function variable_fields( $loop, $variation_data ) {
?>
<tr>
<td>
<div>
<label><?php _e( 'My Custom Field', 'woocommerce' ); ?></label>
<input type="text" size="5" name="my_custom_field[<?php echo $loop; ?>]" value="<?php echo $variation_data['_my_custom_field'][0]; ?>"/>
</div>
</td>
</tr>
<?php
}
function variable_fields_js() {
?>
<tr>\
<td>\
<div>\
<label><?php _e( 'My Custom Field', 'woocommerce' ); ?></label>\
<input type="text" size="5" name="my_custom_field[' + loop + ']" />\
</div>\
</td>\
</tr>\
<?php
}
function variable_fields_process( $post_id ) {
if (isset( $_POST['variable_sku'] ) ) :
$variable_sku = $_POST['variable_sku'];
$variable_post_id = $_POST['variable_post_id'];
$variable_custom_field = $_POST['my_custom_field'];
for ( $i = 0; $i < sizeof( $variable_sku ); $i++ ) :
$variation_id = (int) $variable_post_id[$i];
if ( isset( $variable_custom_field[$i] ) ) {
update_post_meta( $variation_id, '_my_custom_field', stripslashes( $variable_custom_field[$i] ) );
}
endfor;
endif;
}
@sonofabear

This comment has been minimized.

Show comment Hide comment
@sonofabear

sonofabear May 6, 2013

Hello. This is JUST what I was looking for. Thank you so much. Do you have any code fore displaying the field on the front end, and changing based on the variation selection being changed? That would be amazing. Thanks!

Hello. This is JUST what I was looking for. Thank you so much. Do you have any code fore displaying the field on the front end, and changing based on the variation selection being changed? That would be amazing. Thanks!

@bizard

This comment has been minimized.

Show comment Hide comment
@bizard

bizard May 20, 2013

Hello. Where I insert this into woocommerce?

bizard commented May 20, 2013

Hello. Where I insert this into woocommerce?

@gangesh

This comment has been minimized.

Show comment Hide comment
@gangesh

gangesh Jun 24, 2013

Thanks @kloon. Very useful. :)

@bizard, you can insert code into your active theme's function file.

gangesh commented Jun 24, 2013

Thanks @kloon. Very useful. :)

@bizard, you can insert code into your active theme's function file.

@invamped

This comment has been minimized.

Show comment Hide comment
@invamped

invamped Jul 5, 2013

This is awesome, Is there away to show this with the other variation fields under additional info on front-end?

invamped commented Jul 5, 2013

This is awesome, Is there away to show this with the other variation fields under additional info on front-end?

@harassant

This comment has been minimized.

Show comment Hide comment
@harassant

harassant Jul 20, 2013

That's what I needed, thanks, and it works.
but.. how to show the field on front-end too?
I think the right file is variable.php, but how to write the code in order to add the "my_custom_field"? I cannot manage.
Any help, please??
thanks
harassant

That's what I needed, thanks, and it works.
but.. how to show the field on front-end too?
I think the right file is variable.php, but how to write the code in order to add the "my_custom_field"? I cannot manage.
Any help, please??
thanks
harassant

@tmconnect

This comment has been minimized.

Show comment Hide comment
@tmconnect

tmconnect Jul 31, 2013

That's exactly what I am looking for. Because I'm new to WooCommerce I don't know how to show the content of "my_custom_fields" on the frontpage. Hopefully anybody can post some example. Thanks!

That's exactly what I am looking for. Because I'm new to WooCommerce I don't know how to show the content of "my_custom_fields" on the frontpage. Hopefully anybody can post some example. Thanks!

@harassant

This comment has been minimized.

Show comment Hide comment
@harassant

harassant Aug 2, 2013

so i'm not alone!
hi tmconnect
I made some progress, but could not yet obtain a solution.
I've been working on this file:
woocommerce\templates\single-product\meta.php
and on this piece of code:
span class="sku">get_sku();?>/span
and on the table "wp_postmeta" in db, where "my_custom_field" values are stored.
The variable $product->get_sku(); by itself refers to the parent sku, but the class "sku" makes it show the variations sku, exactly the value I need in order to get the "my_custom_field" post_id and consequently it's meta_value
(meta_key being "_my_custom_field").

It would be easy to retrieve dinamically each single variation my_custom_field value through some queries like these:
$alfa = $wpdb->get_var( "SELECT post_id FROM wp_postmeta WHERE meta_key = '_sku' AND meta_value = single variation sku' ", 0, 0 );
and
$my_custom_field_value = $wpdb->get_var( "SELECT meta_value FROM wp_postmeta WHERE meta_key = '_my_custom_field' AND post_id = '$alfa' ", 0, 0 );.

The problem is that I'm not able to convert the markup span class="sku">get_sku(); ?>/span (that renders on frontend the variation sku I need) into a string usable in the first query as 'single variation sku'.

This stupid problem solved, THE PROBLEM solved.

Any idea??
bye
ruggero

so i'm not alone!
hi tmconnect
I made some progress, but could not yet obtain a solution.
I've been working on this file:
woocommerce\templates\single-product\meta.php
and on this piece of code:
span class="sku">get_sku();?>/span
and on the table "wp_postmeta" in db, where "my_custom_field" values are stored.
The variable $product->get_sku(); by itself refers to the parent sku, but the class "sku" makes it show the variations sku, exactly the value I need in order to get the "my_custom_field" post_id and consequently it's meta_value
(meta_key being "_my_custom_field").

It would be easy to retrieve dinamically each single variation my_custom_field value through some queries like these:
$alfa = $wpdb->get_var( "SELECT post_id FROM wp_postmeta WHERE meta_key = '_sku' AND meta_value = single variation sku' ", 0, 0 );
and
$my_custom_field_value = $wpdb->get_var( "SELECT meta_value FROM wp_postmeta WHERE meta_key = '_my_custom_field' AND post_id = '$alfa' ", 0, 0 );.

The problem is that I'm not able to convert the markup span class="sku">get_sku(); ?>/span (that renders on frontend the variation sku I need) into a string usable in the first query as 'single variation sku'.

This stupid problem solved, THE PROBLEM solved.

Any idea??
bye
ruggero

@whitsend79

This comment has been minimized.

Show comment Hide comment
@whitsend79

whitsend79 Dec 12, 2013

I cant for the life of me figure out how to get the custom fields to display on the product descriptions or which file to edit to get it to do so. Has anyone figured this out? Please help. This problem is causing a lot of stress. Thanks in advance.

I cant for the life of me figure out how to get the custom fields to display on the product descriptions or which file to edit to get it to do so. Has anyone figured this out? Please help. This problem is causing a lot of stress. Thanks in advance.

@whitsend79

This comment has been minimized.

Show comment Hide comment
@whitsend79

whitsend79 Dec 13, 2013

Hey man. i cant get the product fields to save??? I just copied and pasted what you have here. The fields shows, but the value doesn't save

Hey man. i cant get the product fields to save??? I just copied and pasted what you have here. The fields shows, but the value doesn't save

@nilssanders

This comment has been minimized.

Show comment Hide comment
@nilssanders

nilssanders Jan 28, 2014

Any news here?

The function is exactly what I need. But I also have problems to show the custom field content in the front end.

I put the above code in my function.php and in the backend everything is fine. I guess to show the custom field content in the front end I need to something like <?php echo... in meta.php

Please help!!!

Any news here?

The function is exactly what I need. But I also have problems to show the custom field content in the front end.

I put the above code in my function.php and in the backend everything is fine. I guess to show the custom field content in the front end I need to something like <?php echo... in meta.php

Please help!!!

@DesignByOnyx

This comment has been minimized.

Show comment Hide comment
@DesignByOnyx

DesignByOnyx Feb 13, 2014

Something like this should help get you started on your variable product template:

<?php 
global $product; 
$available_variations = $product->get_available_variations();
?>

<?php 
foreach ($available_variations as $prod_variation) :
    $post_id = $prod_variation['variation_id'];
    $post_object = get_post($post_id);
    $my_custom_field = get_post_meta( $post_object->ID, '_my_custom_field', true);
end foreach;
?>

Something like this should help get you started on your variable product template:

<?php 
global $product; 
$available_variations = $product->get_available_variations();
?>

<?php 
foreach ($available_variations as $prod_variation) :
    $post_id = $prod_variation['variation_id'];
    $post_object = get_post($post_id);
    $my_custom_field = get_post_meta( $post_object->ID, '_my_custom_field', true);
end foreach;
?>
@DesignByOnyx

This comment has been minimized.

Show comment Hide comment
@DesignByOnyx

DesignByOnyx Feb 21, 2014

So here is some code which will work with the default Variable Product template which ships with WooCommerce. This is a little more difficult than it should be, so here is the step-by-step.

  1. Copy this file:
    /wp-content/plugins/woocommerce/templates/single-product/add-to-cart/variable.php
    to your theme's folder:
    /wp-content/themes/YOUR_THEME/woocommerce/single-product/add-to-cart/variable.php

  2. Open the file you just copied and add a new DIV just inside the <form> tag:

    <form class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="<?php echo $post->ID; ?>" data-product_variations="<?php echo esc_attr( json_encode( $available_variations ) ) ?>">
        <?php if ( ! empty( $available_variations ) ) : ?>
            <div class="selected-variation-custom-field"><!-- Holds the value for the variation custom field --></div>
    
  3. Next, add the following PHP right after the DIV above. This builds a list of our variation IDs and the custom field values. We will json_encode this information to use in the next step:

    <?php
    $custom_data = array();
    foreach ($available_variations as $prod_variation) :
        // get some vars to work with
        $variation_id = $prod_variation['variation_id'];
        $variation_object = get_post($variation_id);
        $custom_field = get_post_meta( $variation_object->ID, '_my_custom_field', true);
    
        $custom_data[$variation_id] = array(
            "custom_field_value" => $custom_field
        );
    endforeach;
    ?>
    
  4. Next, past this javascript after the PHP from the last step:

    <script>
    jQuery(function($) {
        var variation_custom_fields = <?php echo json_encode($custom_data); ?>,
            variations_data = JSON.parse( $('form.variations_form').first().attr( 'data-product_variations' ) ),
            $selected_variation_custom_field = $('.selected-variation-custom-field'); // see DIV above
    
        $('table.variations').on('change', 'select', function() {
            var $select = $(this),
                attribute_name = $select.attr('name'),
                selected_value = $select.val(),
                custom_field_value = "";
    
            // Loop over the variations_data until we find a matching attribute value
            // We then use the variation_id to get the value from variation_custom_fields
            $.each(variations_data, function() {
                if( this.attributes[ attribute_name ] &&  this.attributes[ attribute_name ] === selected_value ) {
                    custom_field_value = variation_custom_fields[ this.variation_id ].custom_field_value;
                    return false; // break
                }
            });
    
            // doing this outside the loop above ensures that the DIV gets emptied out when it should
            $selected_variation_custom_field.text( custom_field_value );
        });
    });
    </script>
    
  5. Use the following CSS to style the information:

    .selected-variation-custom-field {
        /* styles here */
    }
    
  6. Post back here and let everybody know how it works. Cheers.

So here is some code which will work with the default Variable Product template which ships with WooCommerce. This is a little more difficult than it should be, so here is the step-by-step.

  1. Copy this file:
    /wp-content/plugins/woocommerce/templates/single-product/add-to-cart/variable.php
    to your theme's folder:
    /wp-content/themes/YOUR_THEME/woocommerce/single-product/add-to-cart/variable.php

  2. Open the file you just copied and add a new DIV just inside the <form> tag:

    <form class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="<?php echo $post->ID; ?>" data-product_variations="<?php echo esc_attr( json_encode( $available_variations ) ) ?>">
        <?php if ( ! empty( $available_variations ) ) : ?>
            <div class="selected-variation-custom-field"><!-- Holds the value for the variation custom field --></div>
    
  3. Next, add the following PHP right after the DIV above. This builds a list of our variation IDs and the custom field values. We will json_encode this information to use in the next step:

    <?php
    $custom_data = array();
    foreach ($available_variations as $prod_variation) :
        // get some vars to work with
        $variation_id = $prod_variation['variation_id'];
        $variation_object = get_post($variation_id);
        $custom_field = get_post_meta( $variation_object->ID, '_my_custom_field', true);
    
        $custom_data[$variation_id] = array(
            "custom_field_value" => $custom_field
        );
    endforeach;
    ?>
    
  4. Next, past this javascript after the PHP from the last step:

    <script>
    jQuery(function($) {
        var variation_custom_fields = <?php echo json_encode($custom_data); ?>,
            variations_data = JSON.parse( $('form.variations_form').first().attr( 'data-product_variations' ) ),
            $selected_variation_custom_field = $('.selected-variation-custom-field'); // see DIV above
    
        $('table.variations').on('change', 'select', function() {
            var $select = $(this),
                attribute_name = $select.attr('name'),
                selected_value = $select.val(),
                custom_field_value = "";
    
            // Loop over the variations_data until we find a matching attribute value
            // We then use the variation_id to get the value from variation_custom_fields
            $.each(variations_data, function() {
                if( this.attributes[ attribute_name ] &&  this.attributes[ attribute_name ] === selected_value ) {
                    custom_field_value = variation_custom_fields[ this.variation_id ].custom_field_value;
                    return false; // break
                }
            });
    
            // doing this outside the loop above ensures that the DIV gets emptied out when it should
            $selected_variation_custom_field.text( custom_field_value );
        });
    });
    </script>
    
  5. Use the following CSS to style the information:

    .selected-variation-custom-field {
        /* styles here */
    }
    
  6. Post back here and let everybody know how it works. Cheers.

@moorewebx

This comment has been minimized.

Show comment Hide comment
@moorewebx

moorewebx Feb 25, 2014

Dude... you nailed it. Thanks so much for this, much appreciated!

Dude... you nailed it. Thanks so much for this, much appreciated!

@moorewebx

This comment has been minimized.

Show comment Hide comment
@moorewebx

moorewebx Feb 25, 2014

So I got this working and it works just like I want. thank you. I have two follow up questions:

  1. How would I add a label that shows up in front only when the custom field value shows up
  2. How would I implement multiple custom fields without having to re-do all of that same code each time? (I assume there is an easy way)
    thanks again!!!

So I got this working and it works just like I want. thank you. I have two follow up questions:

  1. How would I add a label that shows up in front only when the custom field value shows up
  2. How would I implement multiple custom fields without having to re-do all of that same code each time? (I assume there is an easy way)
    thanks again!!!
@jjdualan

This comment has been minimized.

Show comment Hide comment
@jjdualan

jjdualan Mar 11, 2014

Thanks so much for the code. I was wondering if this info will automatically be shown on invoices. If not, could you point me in a general direction?

Thanks again

Thanks so much for the code. I was wondering if this info will automatically be shown on invoices. If not, could you point me in a general direction?

Thanks again

@DesignByOnyx

This comment has been minimized.

Show comment Hide comment
@DesignByOnyx

DesignByOnyx Mar 27, 2014

@moorewebx

  1. I am not sure what you are asking. The custom field is tied to a variation (eg. shoe size). When the end user selects a shoe size which is using the custom field, you should see it show up. For example, here is a product using the custom field, and here is a product which is not using the custom field. The custom field only appears when there is actually a value in there.

  2. Implementing multiple custom fields would look something like this:

  • functions.php - take note of every instance of the word "another"
<?php
//Display Fields
add_action( 'woocommerce_product_after_variable_attributes', 'variable_fields', 10, 2 );
//JS to add fields for new variations
add_action( 'woocommerce_product_after_variable_attributes_js', 'variable_fields_js' );
//Save variation fields
add_action( 'woocommerce_process_product_meta_variable', 'variable_fields_process', 10, 1 );

function variable_fields( $loop, $variation_data ) {
?>  
    <tr>
        <td>
            <div>
                    <label><?php _e( 'My Custom Field', 'woocommerce' ); ?></label>
                    <input type="text" size="5" name="my_custom_field[<?php echo $loop; ?>]" value="<?php echo $variation_data['_my_custom_field'][0]; ?>"/>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div>
                    <label><?php _e( 'Another Field', 'woocommerce' ); ?></label>
                    <input type="text" size="5" name="another_field[<?php echo $loop; ?>]" value="<?php echo $variation_data['_another_field'][0]; ?>"/>
            </div>
        </td>
    </tr>
<?php
}

function variable_fields_js() {
?>
    <tr>\
        <td>\
            <div>\
                    <label><?php _e( 'My Custom Field', 'woocommerce' ); ?></label>\
                    <input type="text" size="5" name="my_custom_field[' + loop + ']" />\
            </div>\
        </td>\
    </tr>\
    <tr>\
        <td>\
            <div>\
                    <label><?php _e( 'Another Field', 'woocommerce' ); ?></label>\
                    <input type="text" size="5" name="another_field[' + loop + ']" />\
            </div>\
        </td>\
    </tr>\
<?php
}

function variable_fields_process( $post_id ) {
    if (isset( $_POST['variable_sku'] ) ) :
        $variable_sku = $_POST['variable_sku'];
        $variable_post_id = $_POST['variable_post_id'];
        $variable_custom_field = $_POST['my_custom_field'];
        $variable_another_field = $_POST['another_field'];

        for ( $i = 0; $i < sizeof( $variable_sku ); $i++ ) :
            $variation_id = (int) $variable_post_id[$i];
            if ( isset( $variable_custom_field[$i] ) ) {
                update_post_meta( $variation_id, '_my_custom_field', stripslashes( $variable_custom_field[$i] ) );
            }
            if ( isset( $variable_another_field[$i] ) ) {
                update_post_meta( $variation_id, '_another_field', stripslashes( $variable_another_field[$i] ) );
            }
        endfor;
    endif;
}
?>
  • [theme]/woocommerce/single-product/add-to-cart/variable.php - add another DIV
<div class="selected-variation-custom-field"><!-- Holds the value for the variation custom field --></div>
<div class="selected-variation-another-field"><!-- Holds the value for the variation another field --></div>
  • Update the PHP code in the same file:
<?php
$custom_data = array();
foreach ($available_variations as $prod_variation) :
    // get some vars to work with
    $variation_id = $prod_variation['variation_id'];
    $variation_object = get_post($variation_id);
    $custom_field = get_post_meta( $variation_object->ID, '_my_custom_field', true);
    $another_field = get_post_meta( $variation_object->ID, '_another_field', true);

    $custom_data[$variation_id] = array(
        "custom_field_value" => $custom_field,
        "another_field_value" => $another_field
    );
endforeach;
?>
  • Update the javascript (same file)
<script>
jQuery(function($) {
    var variation_custom_fields = <?php echo json_encode($custom_data); ?>,
        variations_data = JSON.parse( $('form.variations_form').first().attr( 'data-product_variations' ) ),
        $selected_variation_custom_field = $('.selected-variation-custom-field'),  // see DIV above
        $selected_variation_another_field = $('.selected-variation-another-field');  // see DIV above

    $('table.variations').on('change', 'select', function() {
        var $select = $(this),
            attribute_name = $select.attr('name'),
            selected_value = $select.val(),
            custom_field_value = "",
            another_field_value = "";

        // Loop over the variations_data until we find a matching attribute value
        // We then use the variation_id to get the value from variation_custom_fields
        $.each(variations_data, function() {
            if( this.attributes[ attribute_name ] &&  this.attributes[ attribute_name ] === selected_value ) {
                custom_field_value = variation_custom_fields[ this.variation_id ].custom_field_value;
                another_field_value = variation_custom_fields[ this.variation_id ].another_field_value;
                return false; // break
            }
        });

        // doing this outside the loop above ensures that the DIV gets emptied out when it should
        $selected_variation_custom_field.text( custom_field_value );
        $selected_variation_another_field.text( another_field_value );
    });
});
</script>
  • And finally, the styles:
.selected-variation-custom-field {
    /* styles here */
}
.selected-variation-another-field {
    /* styles here */
}

If you want to add even more custom fields, take note of everywhere the word "another" appears (case insensitive), copy and paste, and change it to something unique. Hope that helps.

@moorewebx

  1. I am not sure what you are asking. The custom field is tied to a variation (eg. shoe size). When the end user selects a shoe size which is using the custom field, you should see it show up. For example, here is a product using the custom field, and here is a product which is not using the custom field. The custom field only appears when there is actually a value in there.

  2. Implementing multiple custom fields would look something like this:

  • functions.php - take note of every instance of the word "another"
<?php
//Display Fields
add_action( 'woocommerce_product_after_variable_attributes', 'variable_fields', 10, 2 );
//JS to add fields for new variations
add_action( 'woocommerce_product_after_variable_attributes_js', 'variable_fields_js' );
//Save variation fields
add_action( 'woocommerce_process_product_meta_variable', 'variable_fields_process', 10, 1 );

function variable_fields( $loop, $variation_data ) {
?>  
    <tr>
        <td>
            <div>
                    <label><?php _e( 'My Custom Field', 'woocommerce' ); ?></label>
                    <input type="text" size="5" name="my_custom_field[<?php echo $loop; ?>]" value="<?php echo $variation_data['_my_custom_field'][0]; ?>"/>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div>
                    <label><?php _e( 'Another Field', 'woocommerce' ); ?></label>
                    <input type="text" size="5" name="another_field[<?php echo $loop; ?>]" value="<?php echo $variation_data['_another_field'][0]; ?>"/>
            </div>
        </td>
    </tr>
<?php
}

function variable_fields_js() {
?>
    <tr>\
        <td>\
            <div>\
                    <label><?php _e( 'My Custom Field', 'woocommerce' ); ?></label>\
                    <input type="text" size="5" name="my_custom_field[' + loop + ']" />\
            </div>\
        </td>\
    </tr>\
    <tr>\
        <td>\
            <div>\
                    <label><?php _e( 'Another Field', 'woocommerce' ); ?></label>\
                    <input type="text" size="5" name="another_field[' + loop + ']" />\
            </div>\
        </td>\
    </tr>\
<?php
}

function variable_fields_process( $post_id ) {
    if (isset( $_POST['variable_sku'] ) ) :
        $variable_sku = $_POST['variable_sku'];
        $variable_post_id = $_POST['variable_post_id'];
        $variable_custom_field = $_POST['my_custom_field'];
        $variable_another_field = $_POST['another_field'];

        for ( $i = 0; $i < sizeof( $variable_sku ); $i++ ) :
            $variation_id = (int) $variable_post_id[$i];
            if ( isset( $variable_custom_field[$i] ) ) {
                update_post_meta( $variation_id, '_my_custom_field', stripslashes( $variable_custom_field[$i] ) );
            }
            if ( isset( $variable_another_field[$i] ) ) {
                update_post_meta( $variation_id, '_another_field', stripslashes( $variable_another_field[$i] ) );
            }
        endfor;
    endif;
}
?>
  • [theme]/woocommerce/single-product/add-to-cart/variable.php - add another DIV
<div class="selected-variation-custom-field"><!-- Holds the value for the variation custom field --></div>
<div class="selected-variation-another-field"><!-- Holds the value for the variation another field --></div>
  • Update the PHP code in the same file:
<?php
$custom_data = array();
foreach ($available_variations as $prod_variation) :
    // get some vars to work with
    $variation_id = $prod_variation['variation_id'];
    $variation_object = get_post($variation_id);
    $custom_field = get_post_meta( $variation_object->ID, '_my_custom_field', true);
    $another_field = get_post_meta( $variation_object->ID, '_another_field', true);

    $custom_data[$variation_id] = array(
        "custom_field_value" => $custom_field,
        "another_field_value" => $another_field
    );
endforeach;
?>
  • Update the javascript (same file)
<script>
jQuery(function($) {
    var variation_custom_fields = <?php echo json_encode($custom_data); ?>,
        variations_data = JSON.parse( $('form.variations_form').first().attr( 'data-product_variations' ) ),
        $selected_variation_custom_field = $('.selected-variation-custom-field'),  // see DIV above
        $selected_variation_another_field = $('.selected-variation-another-field');  // see DIV above

    $('table.variations').on('change', 'select', function() {
        var $select = $(this),
            attribute_name = $select.attr('name'),
            selected_value = $select.val(),
            custom_field_value = "",
            another_field_value = "";

        // Loop over the variations_data until we find a matching attribute value
        // We then use the variation_id to get the value from variation_custom_fields
        $.each(variations_data, function() {
            if( this.attributes[ attribute_name ] &&  this.attributes[ attribute_name ] === selected_value ) {
                custom_field_value = variation_custom_fields[ this.variation_id ].custom_field_value;
                another_field_value = variation_custom_fields[ this.variation_id ].another_field_value;
                return false; // break
            }
        });

        // doing this outside the loop above ensures that the DIV gets emptied out when it should
        $selected_variation_custom_field.text( custom_field_value );
        $selected_variation_another_field.text( another_field_value );
    });
});
</script>
  • And finally, the styles:
.selected-variation-custom-field {
    /* styles here */
}
.selected-variation-another-field {
    /* styles here */
}

If you want to add even more custom fields, take note of everywhere the word "another" appears (case insensitive), copy and paste, and change it to something unique. Hope that helps.

@vssnarayanaraju

This comment has been minimized.

Show comment Hide comment
@vssnarayanaraju

vssnarayanaraju May 29, 2014

I have used the above code but not getting field values in front end

I have used the above code but not getting field values in front end

@egmi

This comment has been minimized.

Show comment Hide comment
@egmi

egmi Jun 26, 2014

I want to display the custom fields on the cart and checkout page. How does it work?

egmi commented Jun 26, 2014

I want to display the custom fields on the cart and checkout page. How does it work?

@sarc85

This comment has been minimized.

Show comment Hide comment
@sarc85

sarc85 Jul 3, 2014

I have also used the code above and it is pulling the values but they are not printing in the div

sarc85 commented Jul 3, 2014

I have also used the code above and it is pulling the values but they are not printing in the div

@meilione

This comment has been minimized.

Show comment Hide comment
@meilione

meilione Aug 5, 2014

To add the custom variation meta data also to the fronted variations variable use the following filter (bit less code than mentioned above and the data is added directly to the already existing json output).

<?php
add_filter( 'woocommerce_available_variation', 'uniquename_available_variation', 100, 3 );

function uniquename_available_variation($variations, $variation_object, $variation) {
    $variations['yourcustomfieldname'] = implode(',',$variation->product_custom_fields['yourcustomfieldname']);
    return $variations;
}
?>

Note: the implode is optional and depends on how you want to use the data later on

meilione commented Aug 5, 2014

To add the custom variation meta data also to the fronted variations variable use the following filter (bit less code than mentioned above and the data is added directly to the already existing json output).

<?php
add_filter( 'woocommerce_available_variation', 'uniquename_available_variation', 100, 3 );

function uniquename_available_variation($variations, $variation_object, $variation) {
    $variations['yourcustomfieldname'] = implode(',',$variation->product_custom_fields['yourcustomfieldname']);
    return $variations;
}
?>

Note: the implode is optional and depends on how you want to use the data later on

@DesignByOnyx

This comment has been minimized.

Show comment Hide comment
@DesignByOnyx

DesignByOnyx Feb 9, 2015

Unfortunately I'm not in a position I can test this right now (super busy, not even working in Wordpress at the moment). If you could post a live example I might be able to look at it for you. Otherwise you might try looking at the javascript I posted and troubleshoot from there. Grab a beer, as that was not fun to write.

Unfortunately I'm not in a position I can test this right now (super busy, not even working in Wordpress at the moment). If you could post a live example I might be able to look at it for you. Otherwise you might try looking at the javascript I posted and troubleshoot from there. Grab a beer, as that was not fun to write.

@Justlikefrank

This comment has been minimized.

Show comment Hide comment
@Justlikefrank

Justlikefrank Feb 11, 2015

Thanks so much @DesignByOnyx you have done a great job.
I have got the fields into the front end which is awesome, However I can't get content to work in them? I was wondering if they needed to be defined somehow? I don't have much code experience and was just hoping anyone can take a quick look at where I am at.
The fields created are the highlighted in pink, I'm after two things,

  1. The content and editability, and
  2. is the order in which they show?
    Any suggestions will be greatly appreciated...
    http://www.staging.theflowerrun.com.au/product/flower-run-bunch/

Thanks so much @DesignByOnyx you have done a great job.
I have got the fields into the front end which is awesome, However I can't get content to work in them? I was wondering if they needed to be defined somehow? I don't have much code experience and was just hoping anyone can take a quick look at where I am at.
The fields created are the highlighted in pink, I'm after two things,

  1. The content and editability, and
  2. is the order in which they show?
    Any suggestions will be greatly appreciated...
    http://www.staging.theflowerrun.com.au/product/flower-run-bunch/
@whoaloic

This comment has been minimized.

Show comment Hide comment
@whoaloic

whoaloic Mar 25, 2015

I also used the code provided by @DesignByOnyx but can't get custom field values of single product variation.
I notice that even the comment " Holds the value for the variation custom field " disappeared when I use firebug.

I also used the code provided by @DesignByOnyx but can't get custom field values of single product variation.
I notice that even the comment " Holds the value for the variation custom field " disappeared when I use firebug.

@whoaloic

This comment has been minimized.

Show comment Hide comment
@whoaloic

whoaloic Apr 27, 2015

Hello
I did see an array of custom field values with firebug but i still can't find a way to display custom field values.
Any help would be really appreciated.
Regards.

Hello
I did see an array of custom field values with firebug but i still can't find a way to display custom field values.
Any help would be really appreciated.
Regards.

@shirg

This comment has been minimized.

Show comment Hide comment
@shirg

shirg Apr 28, 2015

If someone else is stuck, here is a code modification that solves the problem when variable data is not saved or displayed correctly. This is a short example, with just the number field. To be honest, I'm not sure if the JS part is needed at all. and please also note that I have tested it on WC 2.3.5

// Number Field woocommerce_wp_text_input( array( 'id' => '_purchase_price['.$loop.']', 'label' => __( 'Purchase Price', 'woocommerce' ), 'value' => get_post_meta($variation->ID, '_purchase_price', true), 'custom_attributes' => array( 'step' => 'any', 'min' => '0' ) ) ); ?> </td> '_purchase_price[ + loop + ]', 'label' => __( 'My Number Field', 'woocommerce' ), 'desc_tip' => 'true', 'description' => __( 'Enter the custom number here.', 'woocommerce' ), 'value' => $variation_data['_purchase_price'][0], 'custom_attributes' => array( 'step' => 'any', 'min' => '0' ) ) ); ?>

shirg commented Apr 28, 2015

If someone else is stuck, here is a code modification that solves the problem when variable data is not saved or displayed correctly. This is a short example, with just the number field. To be honest, I'm not sure if the JS part is needed at all. and please also note that I have tested it on WC 2.3.5

// Number Field woocommerce_wp_text_input( array( 'id' => '_purchase_price['.$loop.']', 'label' => __( 'Purchase Price', 'woocommerce' ), 'value' => get_post_meta($variation->ID, '_purchase_price', true), 'custom_attributes' => array( 'step' => 'any', 'min' => '0' ) ) ); ?> </td> '_purchase_price[ + loop + ]', 'label' => __( 'My Number Field', 'woocommerce' ), 'desc_tip' => 'true', 'description' => __( 'Enter the custom number here.', 'woocommerce' ), 'value' => $variation_data['_purchase_price'][0], 'custom_attributes' => array( 'step' => 'any', 'min' => '0' ) ) ); ?>
@whoaloic

This comment has been minimized.

Show comment Hide comment
@whoaloic

whoaloic May 13, 2015

Hello @shirg!
Did you succeed to display custom field value for each variation on frontend?
Cheers.

Hello @shirg!
Did you succeed to display custom field value for each variation on frontend?
Cheers.

@whoaloic

This comment has been minimized.

Show comment Hide comment
@whoaloic

whoaloic Jul 2, 2015

Actually the code provided was working (WC 2.3) !

whoaloic commented Jul 2, 2015

Actually the code provided was working (WC 2.3) !

@Bgill128

This comment has been minimized.

Show comment Hide comment
@Bgill128

Bgill128 Jul 3, 2015

Hey @whoaloic

I really cannot figure out how to get the Remicorson snippets or anything like that to show up on the FRONT of my site. I saw in his tutorial he had a tiny note about it and some other people have been figuring out but I just cannot.

Bgill128 commented Jul 3, 2015

Hey @whoaloic

I really cannot figure out how to get the Remicorson snippets or anything like that to show up on the FRONT of my site. I saw in his tutorial he had a tiny note about it and some other people have been figuring out but I just cannot.

@wylesight

This comment has been minimized.

Show comment Hide comment
@wylesight

wylesight Jul 4, 2015

Yes, displaying in the front is the issue: I can display custom meta values when there's only one variation.

When products have multiple variable attributes the meta display but it is WRONG : it only display the first value found with the selected attribute, not taking into account the full variation.

Any idea ?

Yes, displaying in the front is the issue: I can display custom meta values when there's only one variation.

When products have multiple variable attributes the meta display but it is WRONG : it only display the first value found with the selected attribute, not taking into account the full variation.

Any idea ?

@josefrosel

This comment has been minimized.

Show comment Hide comment
@josefrosel

josefrosel Jan 25, 2016

That worked for me:
Use the woocommerce_ajax_save_product_variations and change the variable_fields_process function.

//Save variation fields
add_action('woocommerce_ajax_save_product_variations', 'variable_fields_process', 10, 2);

function variable_fields_process($product_id) {
$variable_post_id = $_POST['variable_post_id'];
$variable_custom_field = $_POST['my_custom_field'];

foreach ($variable_post_id as $key => $value) {
    if (isset($_POST['my_custom_field'][$key])) {
        update_post_meta($value, 'my_custom_field', $variable_custom_field[$key]);
    }
}

}

That worked for me:
Use the woocommerce_ajax_save_product_variations and change the variable_fields_process function.

//Save variation fields
add_action('woocommerce_ajax_save_product_variations', 'variable_fields_process', 10, 2);

function variable_fields_process($product_id) {
$variable_post_id = $_POST['variable_post_id'];
$variable_custom_field = $_POST['my_custom_field'];

foreach ($variable_post_id as $key => $value) {
    if (isset($_POST['my_custom_field'][$key])) {
        update_post_meta($value, 'my_custom_field', $variable_custom_field[$key]);
    }
}

}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment