I have set a custom field for each variation product in woocommerce. I want to display the custom field in place of the product title or other areas of the page. So want to display custom field of the variation child product if variation selected otherwise display custom field of the parent product. The custom field should change based on attribute selected.
Currently i am able to display the custom field of parent product but child product custom field not changing based on variation selected.
How can I set the custom field?
I tried setting the custom field in the product page template using the visual composer. But does not work in case of child product. I found the below code which can be used in function.php and seems it could meet my needs with some modification
add_action( 'woocommerce_variation_options_pricing', 'add_custom_field_to_variations', 10, 3 );
function add_custom_field_to_variations( $loop, $variation_data, $variation ) {
woocommerce_wp_text_input( array(
'id' => 'custom_field[' . $loop . ']',
'class' => 'short',
'label' => __( 'Custom Field', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, 'custom_field', true )
)
);
}
// 2. Save custom field on product variation save
add_action( 'woocommerce_save_product_variation', 'save_custom_field_variations', 10, 2 );
function save_custom_field_variations( $variation_id, $i ) {
$custom_field = $_POST['custom_field'][$i];
if ( isset( $custom_field ) ) update_post_meta( $variation_id,'custom_field', esc_attr( $custom_field ) );
}
// 3. Store custom field value into variation data
add_filter( 'woocommerce_available_variation', 'add_custom_field_variation_data' );
function add_custom_field_variation_data( $variations ) {
$variations['custom_field'] = '<div class="woocommerce_custom_field">Custom Field: <span>' . get_post_meta( $variations[ 'variation_id' ], 'custom_field', true ) . '</span></div>';
return $variations;
}
Added below code to variation.php
<script type="text/template" id="tmpl-variation-template">
<div class="woocommerce-variation-description">
{{{ data.variation.variation_description }}}
</div>
<div class="woocommerce-variation-price">
{{{ data.variation.price_html }}}
</div>
<div class="woocommerce-variation-custom_field">
{{{ data.variation.custom_field}}}
</div>
<div class="woocommerce-variation-availability">
{{{ data.variation.availability_html }}}
</div>
</script>1) The custom field shows next to price on selecting the variation. But i am unable to show the field in other areas of product page. I did add the custom field via shortcode but it does not display on selecting the variation.
2) i am also looking to use in the link which contains shortcode with custom field (eg http://www.websitename.com/[product_meta name=custom_field]. The custom field for parent product shows fine but for variation product it does not show or update on variation selection.
Referred from
