如何在 WooCommerce 产品数据自定义选项卡区域中添加 ACF 字段组

Question

我在 WooCommerce 产品编辑屏幕的产品数据区域中创建了一个自定义选项卡：

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;
}

虽然我可以通过编程方式将字段添加到此处，但我最终需要图像输入，而使用自定义方法则要困难得多。因此，在此处插入 ACF 自定义字段组以及我的所有 ACF 字段会容易得多。

我怀疑它正在使用 ACF 自定义位置规则，但我还没有看到任何明确的方法如何在此自定义选项卡区域中专门使用它。

使用自定义位置规则，它最终会让我选择将位置添加到此下拉列表中。

Answer 1

首先，在 ACF 字段组视图中，单击“屏幕选项”选项卡（右上角）并启用“键”复选框。现在显示每个字段组的键：

我们需要在下面的最后一个函数中定义该字段组键。

以下代码使用 JavaScript (jQuery)，将 ACF 字段组字段的位置更改为我们的“Narrowfar Data”自定义产品选项卡内容：

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', 99999);
function custom_admin_product_tab_content_js() {
    global $typenow, $pagenow;

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

代码位于子主题的functions.php 文件中（或插件中）。已测试并有效。