How do I add a ACF fieldgroup within my WooCommerce product data custom tab area

Question

I've created a custom tab in my Product Data area of the WooCommerce product edit screen:

add_filter( 'woocommerce_product_data_tabs', array( $this, 'cg_narrowfar_custom_product_tabs' ) );

public function cg_narrowfar_custom_product_tabs( $tab ) {
    $tab['narrowfar_product_data'] = array(
        'label'  => __( 'Narrowfar Data', 'narrowfar-integration-for-woocommerce' ),
        'target' => 'narrowfar_product_fields',
        'class'  => array( 'show_if_simple' ),
    );
    return $tab;
}

Although I can add fields into here programatically, I eventually need image inputs and that's much more difficult with custom approach. So, inserting an ACF custom fieldgroup here with all my ACF fields instead would be much easier.

I suspect it's using the ACF Custom location rules but I've yet to see any clear method how to use it specifically here in this custom tab area.

Using custom location rules, it will eventually give me the option to add the location to this dropdown.

Answer 1

It's not really possible to set as location, for an ACF field group, an admin WooCommerce product tab.

First, in ACF Field Groups view, click on "Screen options" tab (up right) and enable the "Key" checkbox. Now The key for each field group is displayed:

We will need to define that field group key in the last function below.

The following code uses JavaScript (jQuery), to change the location of the ACF field group fields to our "Narrowfar Data" custom product tab content:

add_filter( 'woocommerce_product_data_tabs',  'add_custom_admin_product_tab' );
function add_custom_admin_product_tab( $tab ) {
    $tab['narrowfar-data'] = array(
        'label'  => __( 'Narrowfar Data', 'narrowfar-integration-for-woocommerce' ),
        'target' => 'narrowfar_product_data',
        'class'  => array( 'show_if_simple' ),
    );
    return $tab;
}

add_action( 'woocommerce_product_data_panels', 'display_custom_admin_product_tab_content' );
function display_custom_admin_product_tab_content() {
    global $product_object;

    echo '<div id="narrowfar_product_data" class="panel woocommerce_options_panel">
    <div class="options_group narrowfar-content"></div></div>';
}

add_action('admin_footer', 'custom_admin_product_tab_content_js');
function custom_admin_product_tab_content_js() {
    global $typenow, $pagenow;

    if( in_array($pagenow, ['post.php', 'post-new.php']) && 'product' === $typenow ) : 
    
    $field_group_key = 'group_648f2aaf3f1a0'; // <== HERE define the ACF field group key
    ?>
    <script>
    jQuery(function($){
        const fieldGroup = '<?php echo $field_group_key; ?>', 
              fieldGroupID = '#acf-'+fieldGroup,
              fieldGroupHtml = $(fieldGroupID+' .acf-fields').html();
        $(fieldGroupID).remove();
        $('div.narrowfar-content').css('padding', '0 20px').html(fieldGroupHtml);
    });
    </script>
    <?php endif;
}

Code goes in functions.php file of your child theme (or in a plugin). Tested and works.

---

Before:

After: