Created
October 30, 2019 00:51
-
-
Save helgatheviking/a118992def8cd93c2c64775ecc1fd041 to your computer and use it in GitHub Desktop.
Example of how to add custom fields to WooCommmerce variations admin and display on front end.
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
<?php | |
/** | |
* Plugin Name: Add sample field to variations | |
* Plugin URI: https://kathyisawesome.com/ | |
* Description: Example of how to add custom fields to variations admin and display on front end. | |
* Version: 0.1.0 | |
* Author: helgatheviking | |
* Author URI: https://kathyisawesome.com | |
* Text Domain: extra-variation-data | |
* | |
* @package Doc Validation | |
*/ | |
defined( 'ABSPATH' ) || exit; | |
/** | |
* Add custom fields to product variation settings | |
* | |
* @param string $loop | |
* @param array $variation_data | |
* @param WP_Post $variation | |
* @return array | |
*/ | |
function kia_add_variation_options_other_dimensions( $loop, $variation_data, $variation ){ | |
$variation_obj = wc_get_product( $variation->ID ); | |
woocommerce_wp_text_input( array( | |
'id' => 'extra_data[' . $loop . ']', | |
'class' => 'short', | |
'label' => __( 'Test Data', 'extra-variation-data' ), | |
'desc_tip' => 'true', | |
'description' => __( 'Some data to display for this variation.', 'extra-variation-data' ), | |
'value' => $variation_obj->get_meta( '_extra_data', true ), | |
) ); | |
} | |
add_action( 'woocommerce_product_after_variable_attributes','kia_add_variation_options_other_dimensions', 10, 3 ); | |
/** | |
* Save product variation custom fields values | |
* | |
* @param obj $variation_id | |
* @param int $i | |
*/ | |
function kia_save_variation_options_other_dimensions( $variation, $i ) { | |
$variation_obj = wc_get_product( $variation_id ); | |
if ( isset( $_POST['extra_data'][$i] ) ) { | |
$variation_obj->update_meta_data( '_extra_data', wc_clean( $_POST['extra_data'][$i] ) ); | |
} | |
$variation_obj->save(); | |
} | |
add_action( 'woocommerce_admin_process_variation_object','kia_save_variation_options_other_dimensions', 10, 2 ); | |
/** | |
* Add data to json encoded variation form. | |
* | |
* @param array $data - this is the variation's json data | |
* @param object $product | |
* @param object $variation | |
* @return array | |
*/ | |
function kia_available_variation( $data, $product, $variation ){ | |
$extra_data = $variation->get_meta( 'extra_data', true ); | |
$new_data['extra_data'] = $extra_data ? sprintf( esc_html__( 'Test data: %s', 'extra-variation-data' ), $extra_data ) : ''; | |
return array_merge( $data, $new_data ); | |
} | |
add_filter( 'woocommerce_available_variation', 'kia_available_variation', 10, 3 ); | |
/** | |
* holder for display link | |
*/ | |
function kia_custom_variation_data() { | |
echo '<div class="woocommerce-variation-extra-data"></div>'; | |
} | |
add_action( 'woocommerce_single_variation', 'kia_custom_variation_data', 5 ); | |
/** | |
* Add scripts to variable products. | |
*/ | |
function kia_on_found_template_for_variable_add_to_cart() { | |
add_action( 'wp_print_footer_scripts', 'kia_variable_footer_scripts', 99 ); | |
} | |
add_action( 'woocommerce_variable_add_to_cart', 'kia_on_found_template_for_variable_add_to_cart', 30 ); | |
function kia_variable_footer_scripts() { ?> | |
<script type="text/template" id="tmpl-variation-template-extra-data"> | |
<div class="woocommerce-variation-extra_data">{{{ data.variation.extra_data }}}</div> | |
</script> | |
<script type="text/javascript"> | |
jQuery( document ).ready(function($) { | |
$('form.cart') | |
.on('found_variation', function( event, variation ) { | |
template = wp.template( 'variation-template-extra-data' ); | |
$template_html = template( { | |
variation: variation | |
} ); | |
$(this).find('.woocommerce-variation-extra-data').html( $template_html ).slideDown(); | |
}) | |
.on( 'reset_data', function( event, variation ) { | |
$(this).find('.woocommerce-variation-extra-data').slideUp( 200 ); | |
}); | |
}); | |
</script> | |
<?php | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Just what I needed, thanks! 🙏