Fancy Product Designer WooCommerce: Auto Add Customized Products to Cart (Code Snippets)

If you run a WooCommerce store that sells personalised products, you already know that offering a live product customisation experience is a major competitive advantage. Customers love seeing their custom design come to life before buying, and store owners benefit from higher conversion rates and fewer order issues.

One of the best tools for this is Fancy Product Designer, available from KBizSoft Store, which turns WooCommerce product pages into a full product designer tool. It allows users to customize products like t-shirts, mugs, phone cases, and more — all from the front end.

However, there is one common issue that many store owners face:

After customers finish customising, they still have to manually click “Add to Cart.”

That extra step may seem minor, but it can cause friction — especially on mobile devices or when the store is set up as a single-product funnel. A better user experience is to automatically add the customised product to the cart, immediately after the customer completes the design.

In this guide, we’ll share real code snippets and best practices to achieve this with Fancy Product Designer WooCommerce. This is specifically designed for the version sold on KBizSoft Store, so you can implement it safely without breaking the plugin’s functionality.

Why Auto Add to Cart Matters for WooCommerce Stores

When a customer customizes a product, they are already highly engaged. They have invested time, chosen colors, added text, and arranged images. At this moment, forcing them to take an extra action to add the product to the cart can create hesitation.

Benefits of Auto Add to Cart:

• Better user experience

• Higher conversion rates

• Faster checkout

• Reduced cart abandonment

• Improved mobile usability

• Smooth one-product funnels

In many cases, automatic add-to-cart behaviour is not only helpful — it’s essential for a streamlined customer journey.

How Fancy Product Designer Integrates With WooCommerce

Before we add any code, it’s important to understand how Fancy Product Designer works.

Fancy Product Designer does not replace Woo Commerce cart system. Instead, it enhances it by capturing the custom design data and passing it to WooCommerce as cart item meta. When the user clicks “Add to Cart,” the plugin sends all customisation details along with the product.

That means we can safely automate the add-to-cart process by triggering WooCommerce's normal add-to-cart mechanism after the design is completed.

Prerequisites

Before applying the code snippets, make sure you have:

• WooCommerce installed

• Fancy Product Designer plugin installed from KBizSoft Store

• A product set up for customisation

• Access to add custom JavaScript and PHP

• A staging environment for testing

Method 1: Automatically Add to Cart Using JavaScript

This is the most straightforward method. It listens for the Fancy Product Designer event that fires when the design is complete, then triggers WooCommerce’s add-to-cart button.

Step 1: Listen for Design Completion

Fancy Product Designer triggers a JavaScript event when the design is created:

jQuery(document).ready(function($) {
    $(document).on('fpd:productCreate', function() {
        console.log('Design created');
    });
});

Step 2: Trigger WooCommerce Add to Cart

Add this code to automatically trigger the add-to-cart button:

jQuery(document).ready(function($) {

    $(document).on('fpd:productCreate', function() {

        var addToCartButton = $('form.cart button[type="submit"]');

        if (addToCartButton.length) {
            addToCartButton.trigger('click');
        }

    });

});

This is the cleanest solution because:

• It uses WooCommerce’s default cart logic

• It does not interfere with Fancy Product Designer’s data

• It works with most themes and setups

Method 2: Use a Custom “Finish Design” Button

Sometimes automatic behavior can feel too aggressive. A better approach is to add a custom “Finish Design” button that customers click when they are done. This is especially useful if you have a step-by-step customization flow.

Step 1: Add the Button

Add this HTML to your product page or template:

<button id="fpd-finish-design" class="button alt">
    Finish Design & Add to Cart
</button>

Step 2: Trigger Add to Cart After Saving the Design

jQuery(document).ready(function($) {

    $('#fpd-finish-design').on('click', function(e) {
        e.preventDefault();

        if (typeof fancyProductDesigner !== 'undefined') {

            fancyProductDesigner.getProductData(function(data) {
                $('form.cart button[type="submit"]').trigger('click');
            });

        }

    });

});

This method ensures the design data is properly generated before adding the product to the cart.

Method 3: Redirect to Cart After Adding the Customized Product

After adding a customized product, it may be helpful to redirect customers directly to the cart page.

Add this PHP snippet to your theme’s functions.php:

add_filter('woocommerce_add_to_cart_redirect', 'kbizsoft_fpd_redirect_to_cart');

function kbizsoft_fpd_redirect_to_cart($url) {
    return wc_get_cart_url();
}

This makes the checkout process faster and reduces confusion.

Ensuring Custom Design Data is Saved Correctly

Fancy Product Designer stores customization data in WooCommerce cart item meta. But if you want to make sure the data is always passed correctly, you can use this filter:

add_filter('woocommerce_add_cart_item_data', 'kbizsoft_fpd_cart_item_data', 10, 2);

function kbizsoft_fpd_cart_item_data($cart_item_data, $product_id) {

    if (isset($_POST['fpd_product'])) {
        $cart_item_data['fpd_product'] = $_POST['fpd_product'];
    }

    return $cart_item_data;
}

This ensures that the design data is saved and passed through the cart and checkout.

Display Customization Data in Cart and Checkout

Customers should be able to see their customization details in the cart to confirm everything is correct.

add_filter('woocommerce_get_item_data', 'kbizsoft_fpd_display_cart_data', 10, 2);

function kbizsoft_fpd_display_cart_data($item_data, $cart_item) {

    if (isset($cart_item['fpd_product'])) {
        $item_data[] = array(
            'name'  => 'Customization',
            'value' => 'Custom design included'
        );
    }

    return $item_data;
}

This builds trust and reduces order errors.

UX Best Practices for Auto Add to Cart

When implementing auto add-to-cart, keep these best practices in mind:

Prevent multiple clicks

If the button triggers multiple times, it can add duplicate products to the cart.

Add a loading spinner or disable the button once clicked.

Validate design data

Make sure the design is complete before adding to cart.

Test on mobile

Customization flows often behave differently on mobile devices.

Avoid conflicts with theme or other plugins

Test with a default WooCommerce theme to ensure compatibility.

Why KBizSoft Fancy Product Designer is a Strong Choice

Fancy Product Designer from KBizSoft Store is one of the most flexible and powerful WooCommerce product customization plugins available. It offers:

• Live product design interface

• Text and image customization

• Multiple design layers

• Responsive UI for mobile

• Integration with WooCommerce products and variations

By combining this plugin with the auto add-to-cart code snippets, you can create a highly polished and conversion-optimized shopping experience.

Common Issues and Troubleshooting

Issue 1: Product is not added to cart

• Make sure the add-to-cart button exists

• Check if the product is purchasable

• Look for JavaScript errors in console

Issue 2: Custom design data is missing

• Ensure fpd_product is posted correctly

• Confirm that the plugin is storing customization data

Issue 3: Duplicate products added

• Add a check to prevent multiple submissions

• Disable the add-to-cart button after click

Final Thoughts

Automatically adding customized products to the cart improves user experience and increases conversions for WooCommerce stores using Fancy Product Designer from KBizSoft Store.

These code snippets are designed to be safe, practical, and compatible with WooCommerce’s core functionality. Whether you’re running a print-on-demand store or a personalized gift shop, this automation will streamline the buying process and reduce friction.

If you want to build a more advanced customization workflow, you can also:

• Save designs automatically

• Generate custom preview images

• Send design data to production

• Integrate with print fulfillment systems

If you want more information about PrestaShop or pulgins Read Below Blog

Everything You Should Know About PrestaShop One Page Checkout