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?
Jese Leos
September 18, 2024
Verified user
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($) { // Initialize constants and variables const fieldSel = '#acf-field_66e994151813'; // <== Set the correct ACF field selector var selectedVal = $(fieldSel).val(); // Generic function that fill-in the desired textarea fields function populateProductTextArea( value, type ) { const targetSelector = 'textarea#'+type; // Switch WYSIWYG editor to "text" edit mode (Mandatory) $('button#'+type+'-html').trigger('click'); // For Description 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 { // Default value (optional) $(targetSelector).val('<p>This is a default product description for new products.</p>'); } // For Short Description } 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 { // Default value (optional) $(targetSelector).val('<p>This is a default product short description for new products.</p>'); } } // Switch back editor to "visual" edit mode (optional) $('button#'+type+'-tmce').trigger('click'); } // On Start populateProductTextArea( selectedVal, 'content' ); // Fill-in Description populateProductTextArea( selectedVal, 'excerpt' ); // Fill-in Short Description console.log( selectedVal ); // Just for testing (to remove) // On ACF dropdown selected value change $( fieldSel ).on( 'change', function() { selectedVal = $(this).val(); populateProductTextArea( selectedVal, 'content' ); // Fill-in Description populateProductTextArea( selectedVal, 'excerpt' ); // Fill-in Short Description console.log( selectedVal ); // Just for testing (to remove) }); }); </script> <?php endif; } It should work now as you expect.
Jese Leos
September 18, 2024
Verified user
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'); Run code snippetExpand snippet