Home › Forums › Backend Issues (wp-admin) › Add ACF input to woocommerce admin panel
Hi,
I’d like to use ACF to hook into the WooCommerce API to display custom fields on the product edit page, in the general tab of the WooCommerce admin. From what I understand from this blog it’s quite easy to display the custom fields, but I don’t know how to show ACF fields there.
I know how to show ACF groups on the page (location: posttype = product), but I’d like them to be in the same panel as the other options.
Is this even possible?
Thanks!
Hi @ardblok,
Thanks for the post.
You should be able to inject some custom CSS to the admin page by hooking the acf/input/admin_head action.
The usage of this action is described here: https://www.advancedcustomfields.com/resources/acfinputadmin_head/
Any chance there is any demo code for this? I have been searching high and low and have not found anything yet.
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)
The topic ‘Add ACF input to woocommerce admin panel’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.