Support

Account

Home Forums Backend Issues (wp-admin) Add ACF input to woocommerce admin panel

Solving

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)

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.