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

AlperSonmez
September 18, 2024
161 views
0 votes
2 Answers

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:

Truck
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?

Any help would be greatly appreciated!

Answers

You should check the value of the custom field when you open the edit page and when the value of the field changes
Try this 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($) {
                
         
                setDescription();
                // Listen for the change in the machine type dropdown
                $('#acf-field_66e994151813').on('change', function() {
                    setDescription();
                });

                function setDescription(){
                    var machineType = $('#acf-field_66e994151813').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');

There are some mistakes and missing things in your code as you are trying to change the values on WordPress WYSIWYG fields (Visual editor) for Product "Content" (description) and "Excerpt" (short description).

To change the WordPress WYSIWYG fields values based on the ACF selected value, it requires to switch first those fields to "text" mode, then afterward we switch them back to "visual" mode.

The following will prefill those WYSIWYG fields (product description and short description) based on ACF selected value on admin new product pages:

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

    // Only on admin new product pages
    if ( 'product' === $typenow && 'post-new.php' === $pagenow ) :
    ?>
    <script type="text/javascript">
        jQuery( function($) {
            const fieldSel  = '#acf-field_66e994151813'; // <== Set the correct ACF field selector
            var selectedVal = $(fieldSel).val(); 

            function populateProductTextArea( value, type ) {
                const targetSelector = 'textarea#'+type;

                $('button#'+type+'-html').trigger('click'); // switch to "text" edit mode (Mandatory)

                if ( type === 'content' ) {
                    if ( value === 'Truck' ) {
                        $(targetSelector).val('<p><strong>Truck Description Template</strong></p><table><tr><td> AAA </td></tr></table>');
                    } else if ( value === 'Construction Machine' ) {
                        $(targetSelector).val('<p><strong>Construction Machine Description Template</strong></p><table><tr><td> BBB </td></tr></table>');
                    } else if ( $(targetSelector).val() === '' ) {
                        $(targetSelector).val('<p><?php esc_html_e('This is a default product description for new products.'); ?></p>');
                    }
                } else if ( type === 'excerpt' ) {
                    if ( value === 'Truck' ) {
                        $(targetSelector).val('<p><strong>Truck Short Description Template</strong></p>');
                    } else if ( value === 'Construction Machine' ) {
                        $(targetSelector).val('<p><strong>Construction Machine Short Description Template</strong></p>');
                    } else if ( $(targetSelector).val() === '' ) {
                        $(targetSelector).val('<p><?php esc_html_e('This is a default product short description for new products.'); ?></p>');
                    }
                }

                $('button#'+type+'-tmce').trigger('click'); // switch back yo to "visual" edit mode (optional)
            }

            // On Start
            populateProductTextArea( selectedVal, 'content' ); // Description
            populateProductTextArea( selectedVal, 'excerpt' ); // Short Description
            console.log( selectedVal ); // Just for testing
            
            // On ACF dropdown selected value change
            $( fieldSel ).on( 'change', function() {
                selectedVal = $(this).val();
                populateProductTextArea( $(this).val(), 'content' ); // Description
                populateProductTextArea( $(this).val(), 'excerpt' ); // Short Description
                console.log( selectedVal ); // Just for testing
            });
        });
    </script>
    <?php endif;
}

It should work now as you expect.

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers