‘Complete the Look’ or ‘Shop the Look’ is a really effective way to upsell from your WooCommerce store. In this article, I’ll show how you how to create a ‘Complete the Look’ product using WooCommerce and the ‘Products’ field in the Product Extras plugin.
What is ‘Complete the Look’?
You will very commonly see ‘Complete the Look’ pages on clothing and apparel websites. ‘Complete the Look’ allows your customers to purchase all the items for an outfit from one page – they can buy a complete wardrobe, consisting of multiple items, from a single product page.
So, for example, if your customer is on the product page for a pair of jeans and the product image shows the model also wearing a shirt, shoes and jewellery from your product range, you can offer these additional products direct to the customer for them to add to their cart without them needing to visit another product page.
By making purchasing additional products so convenient for your customers, you’re increasing your sales and profit.
Other examples of where to use ‘Complete the Look’ style pages
But it’s not just clothing sites that can benefit from this technique. This works well for any product that has accessories and other related products. The most popular and profitable online store in the world, Amazon, uses this on every page for every product with its ‘Frequently bought together’ feature.
Amazon encourages its customers to spend more by presenting them with additional products that complement the product they’re viewing.
More effective than cross-selling or upselling
WooCommerce allows you to cross-sell and upsell by linking products together. However, the difference is that your customer still has to click from one product page to another in order to make the purchase. By creating a ‘Complete the Look’ with Product Extras, your customer can buy everything they want with one click.
The Product Extras child products field allows you to select products to associate with each product (just like the upsells feature) but allows the customer to add multiple products to the cart with one click.
Better than automatically created recommendations
WooCommerce will automatically generate recommended products based on product categories. There are also some plugins out there that will use purchase history data to make intelligent choices about recommended products.
But with Product Extras, because you know your products best, you choose the products to offer – so you’re not relying on WooCommerce trying to match products by category or tag. You’re selecting the exact products that are going to convert best.
How to create a Complete the Look page
In our example, we’re going to create a product page for a woman’s top but which allows the customer to buy jeans, shoes and jewellery as well.
You can see a working example of this page here.
Install Product Extras
I’m assuming that you already have your WordPress and WooCommerce site up and running so the first step is to purchase and install Product Extras for WooCommerce. Please note that to use the ‘child products’ field you’ll need the Pro version.
When you’ve purchased Product Extras, you’ll get an email with a link to download the zip file. Download it then go to Plugins > Add New > Upload Plugin in your dashboard and upload the zip.
Activate the plugin then go to WooCommerce > Settings > Product Extras and enter your licence key (you’ll find this in the email with the download link). Enter your key and save the page.
You’re ready to start.
Edit a product
Go to a product where you’d like to add your ‘Complete the Look’ section. In the WooCommerce Product Data section, click on the Product Extras tab.
Click Add Group to create a new group of extra fields. You can give the group a title and description if you like.
Click Add Field to create your first field. Give the field a title like ‘Complete the Look’ or ‘Would you like to add’ and choose ‘Products’ for the field type. The Products field type allows you to add child products as addons to your main product (find out more here).
In the ‘Child Products’ field, select which products you’d like to promote.
Note that you have some additional choices here:
Choose ‘Column’ to create a single-column layout. The advantage of using ‘Column’ here is that you can add variable products as child products and Product Extras will deal with the variations.
Alternatively, you could choose:
- ‘Checkboxes’ to allow your customer to select multiple products. Products will be displayed with their featured image as a thumbnail.
- ‘Radio’ to only allow the customer to select one product from the field.
- Or ‘Select’ to display the child products in a dropdown field.
Choose ‘Independent’ to allow the customer to select different quantities for each product. For instance, they could choose to purchase one of the main product, two pairs of shoes, and three pairs of jeans.
Alternatively, you can set this field to ‘Linked’ which means that the purchasable quantity of the child products will always be the same as the purchased quantity of the main product. Or you can choose ‘One only’ which means the customer can only purchase one of each child product.
If you choose ‘Checkboxes’ in the ‘Products Layout’ field, you can select a number between one and four in the ‘Number Columns’ field to determine the column layout for your child products.
When you’ve completed all the fields, save the product. Your customers will now be able to add multiple products to their cart with a single click.
It’s as simple as that. Click the banner below to find out more about Product Extras.