Tips and cases of use for a successful WordPress website with calculated forms.
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 Calculated Fields Form becomes a must.
Updated on September 9th, 2020
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 these services, using only the WooCommerce's attributes and variations, becomes impossible. However, the booking price in the example can be estimated by implementing a form with the "Calculated Fields Form" plugin and its operations.
Honestly, the necessity is mutual. The "Calculated Fields Form" plugin supports multiple payment gateways, sends notification emails, allows managing the information collected by the forms, etc. However, it does not include a shopping cart, orders, products' stocks, a specific module for shipping tracking, or some of the other modules required by the stores, features in which WooCommerce has done an EXCELLENT JOB.
To create the relationship between both plugins and take advantage of their benefits, 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" plugin, allows integrating the forms within the WooCommerce products in an organic way to calculate the products' prices at runtime based on the information entered by buyers.
Integrating forms into WooCommerce products.
The form should be created as usual, inserting the required controls, implementing the equations associated with the calculated fields to calculate the price, etc.
However, if the product's price is calculated by the form, you must select the field with for the price through the Request Cost attribute in the form's settings.
Note: if the form is associated with a WooCommerce product, once the form is submitted, the product is added to the cart, WooCommerce takes control of the rest of the process. The payment gateways to use are those supported by WooCommerce, and the same goes for the discount coupons, taxes, etc.
The add-ons are listed on the settings page of the plugin. The add-ons list is longer in the Platinum version of the plugin (the complete list of add-ons and features is available HERE). Both versions of the plugin, the Developer and Platinum, include the CFF - WooCommerce add-on.
For enabling the add on:
There are two possible alternatives: associate a form with all the products at once, from the plugin settings page. Or you can integrate the form within the product, through the product's settings.
After enabling the add-on, the plugin activates a new section in its settings page, that allows integrating a form with all the store's products at once:
The integration should be configured as follows:
WooCommerce allows us to define shipping alternatives, whose costs depend on different factors, like weight and/or dimension of the product. If your form includes fields to collect this information (weight, length, height, or width), you must enter their names, through the attributes listed below to ensure will be used by WooCommerce to determine the shipping cost:
On products that are not sold individually (this property is controlled through the "Inventory" tab in the product's settings), WooCommerce includes an input box for quantity beside the "Add to Cart" button on the product's page. To use the quantity with the form, you should insert a number field in the form, and enter its name into the attribute:
WooCommerce allows us to add products to the cart from different sections of the website, the products' pages, the shop pages, categories, from the related products, etc. However, the form will be displayed only in the products' pages. So, if the product is added to the cart from other sections, like the shop pages, it would be added with the default price (the price entered into the products' settings). If you want the products to be added to the cart only from the products' pages, tick the checkbox: Replace the "Add to Cart" button by "View Product" in the shop and archive pages. Now, in the shop pages, the "Add to Cart" buttons are replaced by links to the corresponding products' pages.
The "CFF - WooCommerce" add-on includes a summary of the information collected by the form into the shopping cart and orders. To edit this summary, for example, to exclude some fields, or modify its appearance, the add-on includes the summary section.
Note: the fields' tags to include in the summary are the same supported by the thank you pages and notification emails. Special Tags
The previous section describes the way to integrate a form with all products at once. This section describes the way to associate the web form with a specific product.
The attributes in the product's settings are similar to the attributes in the settings page of the plugin. However, they affect only the integration with the current product.
For this reason, I'll describe only the differences.
Please, keep in mind the integration configured through the product's settings have precedence over the form integration from the settings page of the plugin.
The difference between both sections is the "Exclude global form from this product" checkbox. Tick it if you have associated a form with all products, but you want to exclude the current product from the global integration (the product's page does not include any form)
For those products whose prices are calculated by the forms, the add-on updates the price's tag on the product's page. For this, the add-on tries to identify the price tag with the common selectors. However, if the theme active on your WordPress assigns to the prices' tags custom class names (Ex. custom-price-tag), you should insert an "HTML Content" field in the form with a block of code similar to the following one:
<script> woocommerce_price_selector = '.custom-price-tag'; </script>
The "woocommercepriceselector" variable tells the plugin the selector of the tag to replace.
The add-on generates two global variables:
woocommerce_cpcff_product for the id of the current product.
woocommerce_cpcff_product_price for the regular price of the current product.
For example, to duplicate the regular price of the product, insert a calculated field in the form with the following code as its equation:
woocommerce_cpcff_product_price*2
WooCommerce allows to define different products' type, the Variable product is one of them. Access to the variations prices from the equations to calculate the final product's price requires some additional code:
First, insert a hidden field in the form (I'll call it fieldname123) with 0 as the default value, using this field in the equation as usual. In the next step, I'll assign to this field the price of the variation selected by the user.
Second, insert an "HTML Content" field in the form, and enter as its content the following piece of code (it assigns the variation's price to the fieldname123 field in the previous step):
<script>
jQuery(document).on( 'found_variation', function( event, variation ) {
jQuery('[id*="fieldname123_"]').val(variation.display_price).change();
});
</script>
More information in the following links: