Displaying Cross-Sells products when adding a product to the cart

Modified on Fri, 11 Sep 2020 at 01:44 PM

The Fancy Product Designer Cross-Sells products allow you to sell several products using the same design your customers have made.

The Cross-Sells products of FPD work a little bit different than the Cross-Sells of WooCommerce which simply suggests different products to buy. 

Our Cross-Sells show different products using the customized design by the customers and are displayed when a product is added to cart. 

A few key points before you start:

- The canvas size of each of your cross-sell products should be the same as one another.

- The Woocommerce Product Image for each of your cross-sell product should be the same as one another.

Correct: Product Image size: 600x600px, FPD Canvas Size: 1000x1000px

Wrong:   Product Image size: 600x600px, FPD Canvas Size:  600x1000px 

- Only the first view will be used 

- Only elements that are not checked with „Exclude in Export“ option are transmitted to the linked Cross-Sell products. You can set this option either in the product builder or in the design options. Elements added by the customer will automatically be included in the export.

1) Go to your Woocommerce product and add the other Woocommerce Products to be cross-sells

2) Decide where you're going to show the cross-sells once the customer has designed their product and pressed add to cart. 

Depending on your WooCommerce "Add to cart behaviour" settings (WooCommerce -> Settings -> Products -> General -> Add to cart behaviour) you can choose several areas to place the Cross-Sells. If the WooCommerce settings redirect to the cart page after successful addition, please select an option for the cart in the „Cross-Sells Display“ (Fancy Product Designer -> Settings -> WooCommerce -> Cross-Sells -> Cross-Sells Display). If not, please choose a selection for Single Products.2) 

You can also enable an overlay image of the customer’s design. This overlay image will be layered on top of the product image in the Cross-Sells display.

In order to use this option correctly you need to ensure that the linked Cross-Sells products have the same product image aspect ratio and an equal design area (printing box) as the base product. The canvas of the FPD product also needs to have the same aspect ratio as the product image.

Every Theme can be built by using its own HTML structure so there's no common structure. Thats why Fancy Product Designer uses its own Cross-Sells Display.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article