Cart & Checkout #
After customers finish designing a product, Product Designer App automatically transfers the design information to the WooCommerce Cart and Checkout pages. This includes the design preview, selected product options, quantity, and other customization details that are required to complete the order.
Product Designer App supports both WooCommerce Classic and Block Cart & Checkout layouts. However, for the best compatibility and complete design information, we recommend using the Classic layouts.
This guide explains the supported layouts, how design information is displayed, and how to configure the recommended WooCommerce Cart and Checkout pages.
Layout Compatibility #
Product Designer App supports the following WooCommerce layouts:
| Layout | Support | Recommendation |
|---|---|---|
| Classic Cart | ✅ Fully Supported | ⭐ Recommended |
| Block Cart | ⚠ Partially Supported | Not Recommended |
| Classic Checkout | ✅ Fully Supported | ⭐ Recommended |
| Block Checkout | ✅ Supported | Supported, but Classic is recommended |
The plugin works with both layouts, but the Classic layouts provide the most complete integration and editing experience.
Why Use the Classic Layout? #
The Classic Cart and Checkout layouts provide better compatibility with Product Designer App because WooCommerce exposes the hooks required to display and manage design information.
Using the Classic layouts allows customers to:
- View all design thumbnails
- View multiple product views (Front, Back, Left, Right, etc.)
- Review selected product options
- Verify design information before ordering
- Edit the design from the Cart page (when supported)
- Complete checkout without losing design information
For most stores, this is the recommended configuration.
Cart Page #
When a customer finishes designing a product and clicks Add to Cart, Product Designer App automatically attaches the design information to the WooCommerce cart item.
The Cart page displays both the WooCommerce product information and the associated design details.
Typical information includes:
- Product name
- Design thumbnail
- Multiple design view thumbnails (Classic Cart)
- Selected product color
- Selected attributes
- Quantity
- Product options
- Design notes (if provided)
This allows customers to review their personalized product before proceeding to checkout.
Cart Layout Support #
Classic Cart #
The Classic Cart layout is fully supported.
Features include:
- Complete design information
- Multiple design thumbnails
- Product options
- Quantity updates
- Full compatibility with Product Designer App
- Design editing support from the Cart page (when enabled)
This is the recommended layout for all stores.
Block Cart #
The WooCommerce Block Cart is supported with some limitations.
Customers can still view:
- Design information
- Selected options
- Quantity
- Product details
However, WooCommerce Block Cart does not currently provide all of the hooks required to display every design thumbnail or support editing the design directly from the Cart page.
If displaying all product views or allowing customers to return to the Design Studio from the Cart is important, use the Classic Cart layout.
Change Cart to Classic Layout #
To switch your Cart page to the Classic layout:
- Go to WordPress Admin → Pages.
- Edit the Cart page.
- Select the WooCommerce Cart block.
- Switch it to the Classic Cart Shortcode.
- Save the page.
After saving, Product Designer App will display the complete design information on the Cart page.
Checkout Page #
After reviewing the Cart, customers proceed to the Checkout page.
Product Designer App automatically carries the design information to checkout together with the WooCommerce cart item.
Customers can:
- Verify purchased products
- Review quantities
- Confirm design information
- Select shipping methods
- Choose payment methods
- Complete the order
When the order is placed, the complete design data is automatically attached to the WooCommerce order for production and download.
Checkout Layout Support #
Classic Checkout #
The Classic Checkout layout provides the best compatibility with Product Designer App.
Benefits include:
- Stable WooCommerce integration
- Reliable order processing
- Complete design data transfer
- Better compatibility with WooCommerce extensions
- Consistent checkout experience
Although Block Checkout is supported, we recommend using the Classic Checkout layout whenever possible.
Block Checkout #
WooCommerce Block Checkout is supported and customers can successfully place personalized orders.
However, because WooCommerce Blocks continue to evolve, some third-party integrations may behave differently depending on your theme or installed extensions.
For the most predictable experience, Classic Checkout remains the recommended option.
Change Checkout to Classic Layout #
To switch to the Classic Checkout layout:
- Go to WordPress Admin → Pages.
- Edit the Checkout page.
- Remove the Checkout Block.
- Add the Classic Checkout Shortcode.
- Save the page.
After saving, WooCommerce will use the Classic Checkout page together with Product Designer App.
Design Information Display #
When a customer adds a customized product to the cart, Product Designer App automatically stores the design together with the WooCommerce cart item.
Depending on your configuration, customers may see information such as:
- Design preview thumbnail
- Multiple product view thumbnails
- Product color
- Selected attributes
- Printing options
- Quantity
- Customer notes
- Design reference information
This information follows the order throughout the purchasing process and is available to the store administrator after checkout.
No additional configuration is required.
Order Data #
After checkout is completed, Product Designer App automatically saves the design information with the WooCommerce order.
Store administrators can later:
- View the customer design
- Download print files
- Review selected options
- Access production information
- Process the order
This ensures that every customized order contains all information required for production.
Best Practices #
For the best compatibility and customer experience:
- Use the Classic Cart layout.
- Use the Classic Checkout layout whenever possible.
- Verify that design thumbnails appear correctly.
- Test products with multiple design views.
- Place a complete test order before publishing new products.
- Confirm that design information is available in both the Cart and WooCommerce Orders.
- Test your Cart and Checkout pages after updating WooCommerce or changing themes.
Using the Classic WooCommerce Cart and Checkout layouts provides the most reliable integration with Product Designer App, ensuring complete design information, full thumbnail support, and a smoother checkout experience for both customers and store administrators.
