External/affiliate products are products which are listed in your store, but are purchased somewhere else. You can read more in the official WooCommerce Docs.
In the Add Product Widget article we covered the basics of using the widget to build a form for adding Simple Products. If you haven’t read that yet you should stop and read it through before continuing. In this guide we will build on that and show you how to make a form which can create external products.
Adding the Widget
Just like we did before, we need a page to host the form. This can be the same page and even the same widget instance as the form for creating simple products. If you would like a separate form, create a new page to host it, and add the Add Product Form widget.
Form Fields
To create an External Product there are a few fields we must use. To add the destination URL we need the External URL field, and to configure the button text we use the Button Text field. Ensure they are added to the form. Note that these fields will only be visible to the user when the Variable Product option is selected in the Product Type field.
In summary, we need three fields: External URL, Button Text, and Product Type.
Most of the other fields can be added or removed independently and will have no effect on the Variable Product aspect. You can read about them in the Add Product Widget guide.
There are certain fields which will be hidden based on the product type. For example, external products do not contain any shipping information. So when External Product is selected as the product type, any inventory fields added to the form (Stock Status, Stock Quantity, etc) would be hidden.
Note that the conditional fields are only rendered in the front end of the web page. In the Elementor preview all fields will be visible.
Field Specific Options
These fields have the general styling options that are applicable to all fields. Here we will explain the additional options specific to each field.
External URL
This is where the user will add the URL of the product from the external website.
There are no unique field options here, the only options are the regular styling choices for all fields, such as Label, Instructions, Required, Hidden, etc.
Button Text
The button Text lets the user change the standard “Add to Cart” button to something more appropriate, like “Buy on Amazon”.
This field also includes all the standard style options and no unique options.
Final Result
This is how the form looks in the Elementor preview:
And this is how the live webpage looks:
When the user clicks External/Affiliate Product then the relevant fields will be revealed:
