phpjquerywordpresswoocommerceadvanced-custom-fields

How to Pre-fill WooCommerce Product Descriptions Based on ACF Field Selection?

I'm trying to dynamically pre-fill the product description and short description in WooCommerce based on a custom ACF (Advanced Custom Fields) select field. The field allows the user to choose between two options: "Truck" and "Construction Machine." Depending on the selection, I want to populate the product descriptions with specific content.

ACF Field Setup

I created a select field in ACF named machine_type with the following options:

  1. Truck
  2. Construction Machine

Showing ACF field group

Current Code

I've successfully pre-filled the product descriptions for new products using this code:

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');

Desired Functionality

I want to modify the post_content and post_excerpt based on the selected machine_type when a new product is created. Here's my attempted code:

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');

Issue

The description is not being pre-filled based on the selected ACF field. It seems like the script may not be properly retrieving the value from the dropdown or executing at the right time.

Question

How can I ensure that the selected value from the ACF field is properly used to pre-fill the product descriptions?

Solution

  • Key Adjustments I Made

    1. Removed the ACF Dependency:

    I originally wanted to use the ACF dropdown to populate the WYSIWYG fields, but instead, I opted to remove the ACF dependency entirely. I replaced it with a simple popup that appears when the user clicks "Add New Product." This popup prompts the user to enter whether they are adding a truck or construction_machine and then auto-populates the fields based on the selection.

    Original ACF-based code:

    const fieldSel  = '#acf-field_66e994151813'; // ACF field selector

    Changes I Made

    1. Implemented a Popup Instead of ACF:
      I introduced a popup that asks for the machine type and uses this input to fill the product description and tick the appropriate categories.

    Here’s the modified code that worked for me:

    add_action('admin_footer', 'machine_type_popup');

function machine_type_popup() {
    global $pagenow, $typenow;

    // Only run the script on the new product page
    if ($pagenow == 'post-new.php' && $typenow == 'product') {
        ?>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                // Show a prompt when the Add New Product page loads
                var machineType = prompt("What type of machine will you be uploading? Enter 'truck' or 'construction_machine'.");

                if (machineType == 'truck') {
                    // Set the description for trucks
                    $('#content').val('<p><strong>Truck Description Template</strong></p><table>...</table>');

                    // Automatically tick the Truck category
                    $('#in-product_cat-22').prop('checked', true);

                } else if (machineType == 'construction_machine') {
                    // Set the description for construction machines
                    $('#content').val('<p><strong>Construction Machine Description Template</strong></p><table>...</table>');

                    // Automatically tick the Construction Machine category
                    $('#in-product_cat-21').prop('checked', true);
                } else {
                    // Default template if an unknown type is entered
                    $('#content').val('<p>This is a default product description for new products.</p>');
                }
            });
        </script>
        <?php
    }
}
    1. Category Auto-Selection:
      The categories Truck and Construction Machine get automatically selected based on the user's input in the popup. I made sure to link the category IDs (#in-product_cat-22 for Truck and #in-product_cat-21 for Construction Machine) directly to the script.

    Final Outcome:

    With this implementation: