The WooCommerce Product Dropdown displays your WooCommerce products in a simple dropdown menu inside Contact Form 7. Users can easily select products directly from the form, making the shopping experience faster and smoother.
This guide will help you understand and implement the Mask Input in Contact Form 7.
Make sure you have installed both Contact Form 7 & Essential Addons Contact Form 7 plugins inside your WordPress.
Enable WooCommerce Product Dropdown
You must enable the WooCommerce Product Dropdown before implementing the customized drop-down product selection for Woo in Contact Form 7. To do that, follow the below steps:
- Navigate to the Contact Form 7 menu.
- Essential Addons.
- From the Fields tab enable the WooCommerce Product Dropdown.
Add WooCommerce Product Dropdown Field
To implement the WooCommerce Product Dropdown in your contact form follow the below steps:
- Navigate to any existing form or create a new one.
- Add the “Woo Product Dropdown” tag where you want to display it in your form.
Configure WooCommerce Product Dropdown
After clicking the WooCommerce Product Dropdown tag a new popup window will appear. Here you can configure & customize the WooCommerce Product Dropdown settings.
- Field Type: Tick or untick whether you want to mark it as required or not.
- Field Name: Usually the name field is auto-generated. You can add custom value if required.
- Show Product By: Display Woo products by their ID, category, or tag.
- Product Order By: Specify product order by Ascending or Descending.
- Layout: Select the layout whether you want to show the products as a dropdown or Grid.
- Class Attribute: Enter custom class attribute if needed.
Click the Insert Tag button once the configuration is done.
- The customized tag will be added to your form editing panel.
- Save Changes.
Embed the Shortcode
- Copy & Paste the shortcode inside your page or post to display the form.
