Calculated Fields Form Blog

Tips and cases of use for a successful WordPress website with calculated forms.

Blog / WooCommerce and the Calculated Fields Form plugin

WooCommerce and the Calculated Fields Form plugin

There are very complex products and services where the attributes and variations in WooCommerce are not sufficient to estimate their prices at runtime, and a plugin like the Calculated Fields Form to become a must.


There are many services and products where estimate their prices can be a pain, for example, booking a hotel room. The process that seems simple, but the price is determined by many factors: the room's type, the accommodation mode (accommodation only, bed and breakfast), nights number, the year's season (the days in the accommodation period can belong to different seasons), additional services (like laundry, personal butler), and more. The implementation of this service using only the WooCommerce's attributes and variations becomes impossible. However, the booking price can be estimated easily creating a form with the "Calculated Fields Form" plugin and its operations.

But the necessity is mutual, the "Calculated Fields Form" allows to associate multiple payment gateways to the forms, send notification emails, even allows to read the information collected by the forms, however, our plugin does not include a shopping cart, orders, the management of products' stocks, the shipping tracking, or some other modules required in a store, points where WooCommerce has made an EXCELLENT JOB.

For all reasons, we have implemented the "CFF - WooCommerce" add-on. The "CFF-WooCommerce" add-on, distributed with the Developer and Platinum versions of the "Calculated Fields Form" pugin, allows to integrate the forms within the WooCommerce products in a organic way to calculate the products' prices at runtime, as the result of values entered or selected by the users.

Now, I'll describe how to integrate the forms in the WooCommerce products.

The form

The form should be created as usual, inserting the controls needed, implementing the equations assocaited to the calculated fields to get the price, etc. but if you want the products price be calculated through the form, it is required you select the field for the price through the attribute Request Cost in the form's settings.

Note that when a form is associated to a WooCommerce product, woul d be used the payment gateways configured in WooCommerce, but you need identify the field in the form that calculate the price and this occurs with the Request Cost attribute:

Form Settings

Enabling the add-on

The list of add-ons is accessible from the settings page of the plugin. Depending on the plugin's distribution, the Developer or Platinum, the add-ons list can include more or less items (the complete list of features is available HERE). The CFF - WooCommerce add-on is present in both versions of the plugin.

For accessing to the settings page of the plugin you can go to the WordPress menu option: "Settings > Calculated Fields Form" or directly to the menu option: "Calculated Fields Form". In the settings page of the plugin tick the checkbox: "CFF - WooCommerce" and then, press the button "Activate/Deactivate addons"

Activate the CFF - WooCommerce add-on

Creating the relationship between the form and the WooCommerce product

Once the add-on is enabled will appears a new section in the product's settings, included by the add-on to complete the integration:

Realtionship between WooCommerce Product and the Form

The integration should be configured as follows:

  • Select the form to integrate with the product through the attribute: "Enter the ID of the form"
  • Do you want estimate the product's price at runtime? Tick the checkbox: "Calculate the product's price through the form"
  • If the payments below some threshold, enter the minimum price accepted into the attribute: "Minimum price allowed"

WooCommerce allows to define shipping options, that might depend on different factors, like the product's weight and size, but if the users enter this information through the form's fields, it is necessary create the relationshipt between the form's fields and the product's attributes. Enter the fields' names through the attributes:

  • Field for weight
  • Field for length
  • Field for width
  • Field for height

The information collected by the form is very valuable, the add-on includes a summary of this information in the shopping cart and orders. But, what to do if you want to exclude some fields from this summary (for example, auxiliary calculated fields)?

The solution is:

  • Tick the checkbox: "Activate the summary",
  • And enter into the "Summary" attribute, a combination of HTML and the fields' tags to include in the shopping cart and orders.

Note: the fields' tags to include in the summary are the usual used in the thank you pages and notification emails. Special Tags

Tips and tricks

If the product was configured to calculate its price at runtime through the form, the add-on updates dynamically the price's tag in the product's page with the calculated price.

The add-on uses in the replacement the common selector of these tags, but unfortunatelly the final decision of page's structure is defined by the themes' developers, and sometime the default selector does not correspond to the prices' tags.

The solution requires to define a variable in the form with the selector of the tag to replace....

Defining the variable with the selector of the tag to replace with the calculated price

Assuming the selector of the tag to replace is: .summary .woocommerce-Price-amount.amount

  • Insert a "HTML Content" field in the form
  • Enter the following piece of code as its content:

    <script>
        var woocommerce_price_selector = '.summary .woocommerce-Price-amount.amount';
    </script>
    

WooCommerce allows to define different products' type, the Variable product is one of them. If you have associated a form to a variable product, how to use the variations in the equation to calculate the product's price?

The solution with the current version of the add-on requires some of additional code.

First, insert a hidden field in the form (I'll call it fieldname123) with 0 as the default value, and use this field in the equation as usual. This field will containt the price of the variation selected

Second, insert a "HTML Content" field in the form, and enter as its content the following piece of code, to assign the variation's price to the fieldname123:

<script>
jQuery(".variations_form").on("woocommerce_variation_has_changed", function (evt) {
    jQuery.each(jQuery(evt.target).data('product_variations'), function (i, e) {
        var attr = e.attributes,
        flag = true;
        for (var j in attr) {
            if (jQuery('[name="' + j + '"]').val() != attr[j])
                return;
        }
        jQuery('[id*="fieldname123_"]').val(e.display_price).change();
    });
});
</script>

More information in the following links:

https://cff.dwbooster.com/add-ons/woocommerce

https://cff.dwbooster.com/documentation#woocommerce-addon