How to Add WooCommerce Dynamic Products List in Dropdown in Elementor Form WordPress | Product Name

Описание: In this wordpress tutorial for beginners you will learn how to add woocommerce product name list in elementor form dropdown using custom php and javascript code in elementor pro website page builder plugin. So we are going to display all products in drop down in elementor form and when user submit the form then in email we will receive product name also. And if you will add new product in woocommerce then that new product name will also show in Products Dynamic Dropdown List because our product dropdown list is dynamic so new data will populated automatically in Elementor Form WordPress website.

Step 1: First Add PHP Custom Code in website using plugin or you can add directly using elementor widget.

Step 2: Then Add dropdown shortcode in elementor form html widget [wc_product_dropdown]

Step 3: Then Add Hidden Field in elementor form and add ID " product_dropdown_hidden "

Step 4: Add Custom JavaScript Code.

---------------------------------

** Find Custom PHP Code in Top Pinned Comment Section.

--------------------------------

*** Below You Find JavaScript Code:

document.addEventListener('DOMContentLoaded', function() {
const productDropdown = document.getElementById('product_dropdown'); // This is the ID of your product dropdown
const hiddenField = document.getElementById('form-field-product_dropdown_hidden'); // Updated to match your hidden field ID

if (productDropdown && hiddenField) { // Check if both elements exist
productDropdown.addEventListener('change', function() {
hiddenField.value = this.value; // Set the hidden field value to the selected product ID
});
} else {
console.error('Dropdown or hidden field not found');
}
});

---------------------------------

** If you want to add some styling to dropdown list you can use ID and then add CSS:

#product_dropdown {

}

#dropdown #products #form #elementorform #product #list #dynamic #field #woocommerce #elementor #elementorpro #wordpress