With WooCommerce Checkout Integration in Essential Addons for Contact Form 7, you can add custom fields to the WooCommerce checkout process. This lets you collect extra information, like special requests or delivery notes, during checkout. The data is saved with the order, making it easier to process and manage.
This guide will help you understand and implement the WooCommerce Checkout in Contact Form 7.
Make sure you have installed both Contact Form 7 & Essential Addons Contact Form 7 plugins inside your WordPress.
Enable WooCommerce Checkout & WooCommerce Product Dropdown
You must enable the WooCommerce Checkout before implementing the customized WooCommerce Checkout in Contact Form 7. To do that, follow the below steps:
- Navigate to the Contact Form 7 menu.
- Essential Addons.
- From the Features tab enable the WooCommerce Checkout.
- From the Fields tab enable the WooCommerce Product Dropdown.
Add WooCommerce Product Dropdown
To implement the WooCommerce Checkout in your contact form follow the below steps:
- Navigate to any existing form or create a new one.
- Add the WooCommerce Product Dropdown tag where you want to display them 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.
Configure WooCommerce Checkout Additional Settings
To configure & customize additional settings for WooCommerce Checkout follow the below guidelines:
- Enable Woo Checkout: Enable/ disable the Woo Checkout on Contact Form 7.
- Redirect To: Select whether you want to redirect to the cart page or the checkout page.
Embed the Shortcode
- Copy & Paste the shortcode inside your page or post to display the form.
