如何基于ACF字段选择预填充WooCommerce商品描述？

我尝试通过自定义ACF（Advanced Custom Fields）选择字段，动态预填充WooCommerce商品的描述和短描述。该字段包含「Truck」和「Construction Machine」两个选项，希望根据选中值自动填充对应内容。

ACF字段设置 #

在ACF中创建了名为machine_type的选择字段，选项如下：

• Truck
• Construction Machine

现有代码 #

已通过以下代码成功为新建商品预填充默认描述：

function prefill_product_description_new() {
    global $post;

    // Only add pre-filled content for new products
    if ($post->post_type == 'product' && $post->post_status == 'auto-draft') {
        ?>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                // Check if the product description is empty and pre-fill it
                if ($('#content').val() === '') {
                    $('#content').val('<p>This is a default product description for new products.</p>');
                }
                // Check if the short description is empty and pre-fill it
                if ($('#excerpt').val() === '') {
                    $('#excerpt').val('This is a default short product description.');
                }
            });
        </script>
        <?php
    }
}
add_action('woocommerce_product_options_general_product_data', 'prefill_product_description_new');

期望功能 #

希望创建新商品时，根据选中的machine_type字段值修改post_content和post_excerpt，尝试的代码如下：

function prefill_product_description_script() {
    global $post;

    // Make sure this only runs on the product editor screen
    if ( $post->post_type == 'product' ) {
        ?>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                // Set default content if the description is empty
                if ($('#content').val() === '') {
                    $('#content').val('<p>This is a default product description for new products.</p>');
                }

                // Listen for the change in the machine type dropdown
                $('#acf-field_66e994151813').on('change', function() {
                    var machineType = $(this).val(); // Get the selected machine type

                    // Check if machine type value is logged correctly
                    if (machineType === 'Truck') {
                        $('#content').val('<p><strong>Truck Description Template</strong></p><table>...</table>');
                    } else if (machineType === 'Construction Machine') {
                        $('#content').val('<p><strong>Construction Machine Description Template</strong></p><table>...</table>');
                    }
                });
            });
        </script>
        <?php
    }
}
add_action('admin_footer', 'prefill_product_description_script');

问题 #

描述并未根据选中的ACF字段预填充，推测脚本未正确获取下拉框值或执行时机有误。

解决方法 #

1. 修正ACF字段选择器 #

不要硬编码字段ID（如#acf-field_66e994151813），改用更可靠的字段键定位方式，避免ID变化导致失效：

// 替换为你的ACF字段键（在字段编辑页可查看）
var machineField = $('.acf-field[data-key="field_66e994151813"] select');

2. 适配ACF动态加载时机 #

ACF字段可能动态渲染，jQuery(document).ready()执行过早，改用ACF官方提供的ready事件：

acf.add_action('ready', function($) {
    // 你的逻辑代码写在这里
});

3. 限制仅在新建商品页执行 #

保留auto-draft状态判断，避免影响已发布商品的编辑：

if ($post->post_type == 'product' && $post->post_status == 'auto-draft') {

4. 完整修正代码 #

function prefill_product_description_dynamic() {
    global $post;

    // 仅在新建商品编辑页执行
    if ($post->post_type == 'product' && $post->post_status == 'auto-draft') {
        ?>
        <script type="text/javascript">
            acf.add_action('ready', function($) {
                // 设置默认内容（如果为空）
                if ($('#content').val() === '') {
                    $('#content').val('<p>This is a default product description for new products.</p>');
                }
                if ($('#excerpt').val() === '') {
                    $('#excerpt').val('This is a default short product description.');
                }

                // 监听machine_type字段变化
                var machineField = $('.acf-field[data-key="field_66e994151813"] select');
                machineField.on('change', function() {
                    var selectedType = $(this).val();
                    let descContent = '';
                    let shortDesc = '';

                    switch(selectedType) {
                        case 'Truck':
                            descContent = '<p><strong>Truck Description Template</strong></p><table><tr><td>Load Capacity</td><td>10 Ton</td></tr></table>';
                            shortDesc = 'Heavy-duty truck for all transportation needs';
                            break;
                        case 'Construction Machine':
                            descContent = '<p><strong>Construction Machine Description Template</strong></p><table><tr><td>Power</td><td>200 HP</td></tr></table>';
                            shortDesc = 'Reliable construction equipment for your projects';
                            break;
                        default:
                            descContent = '<p>This is a default product description for new products.</p>';
                            shortDesc = 'This is a default short product description.';
                    }

                    // 更新描述和短描述
                    $('#content').val(descContent);
                    $('#excerpt').val(shortDesc);
                });
            });
        </script>
        <?php
    }
}
add_action('admin_footer', 'prefill_product_description_dynamic');

注意事项 #

• 替换代码中的field_66e994151813为你实际的ACF字段键
• 若使用Gutenberg编辑器，需调整#content和#excerpt的选择器，或切换到经典编辑器测试
• 测试前清空浏览器缓存，确保新脚本生效

内容的提问来源于stack exchange，提问作者Alper Sonmez