Reply To: Add ACF input to woocommerce admin panel

• UnionDesign

• August 8, 2017 at 6:10 am

I tried but there seems to be no way to make an ACF field group display inside a WooCommerce product data tab in admin. So I resorted to a jQuery hack. It’s “ugly” but it works. The short answer is:

$("#source").appendTo("#destination");

The long answer is, create a new custom product data tab as a placeholder:

// Register New Product Data Tab
add_filter( 'woocommerce_product_data_tabs', 'add_custom_product_data_tab' );
function add_custom_product_data_tab( $tabs ) {
	$tabs['my-custom-tab'] = array(
		'label' => 'Dates & Times',
		'target' => 'my_custom_product_data',
	);
	return $tabs;
}

// Create Product Data Tab Content
add_action( 'woocommerce_product_data_panels', 'add_custom_product_data_fields' );
function add_custom_product_data_fields() {
	echo '<div id="my_custom_product_data" class="panel woocommerce_options_panel"></div>';
}

Then add some JS & CSS to admin:

// Add JS & CSS to move and style ACF fields inside Product Data Tab
function admin_style() {
	wp_enqueue_script('admin-script', get_template_directory_uri() . '/js/admin.js', array( 'jquery' ) );
	wp_enqueue_style('admin-styles', get_template_directory_uri().'/css/style-admin.css');
}
add_action('admin_enqueue_scripts', 'admin_style');

My ‘admin.js’ file script looks like this:

jQuery(document).ready(function($) {
	$("#acf-group_5988b10b578ea").appendTo("#my_custom_product_data");
});

And my ‘admin-style.css’ file looks like this:

#my_custom_product_data {
	padding: 13px;
}
#my_custom_product_data .acf-label {
	margin: 0;
}
#my_custom_product_data .acf-label label {
	font-weight: 400;
	font-size: 12px;
}

All this does is move the ACF field group from one div to another using jQuery and adds some CSS to iron out some ACF and WOO style conflicts (i.e. make the ACF panel look more like the WOO-native panels)