Total : 0.00 €

Showing calculator using Shortcode

If you want to show your calculator in a Wordpress pages, you can use the WoooCommerce shortcode [product_page id="PRODUCT_ID"] to do that.

In this example I will explain you how to show the calculator on a Wordpress "Page" (But of course you can add this shortcode where you want in your Wordpress website).

  1. In your WP-admin click on "Pages" > "Add new" (But if you have an existing page, edit it)
  2. Add the shortcode [product_page id="PRODUCT_ID"] ensuring you are using the "Text" editor as in some case the "Visual" editor can change your text and makes your shortcode not working:

    shortcode product page
  3. You can get the product ID you want to display with shortcode by clicking on WooCommerce > Products. Click on Edit button of your product and you'll see the product ID in your browser url after post=YOUR_PRODUCT_ID:

    Edit Product
Note: If the product isn’t showing, make sure it isn’t set to Hidden in the Catalog Visibility (On the right of your WooCommerce product).

How to check WooCommerce add to cart price

If you want to check the WooCommerce product price before your customer add a product to the cart, you can't use the "woocommerce_add_to_cart_validation" function. But here a really smart trick on how to do that:

This piece of code check if the price is 0. If the price is 0 an error message will be shown and the product will be removed from the cart, so the customer can't buy it.

To make this piece of code works you need to append it to your "functions.php" file, located in your "/wp-content/themes/YOUR_THEME/functions.php":

/* Price must be different from 0 to be added to the cart */
function filter_custom_wpc_add_to_cart_callback($cart_item_key, $product_id, $quantity, $variation_id, $variation, $cart_item_data){
	global $woocommerce;
	
	foreach(WC()->cart->get_cart() as $cart_item_key => $values){
		$cartItemPrice		= $values['data']->get_price();
		
		if($cartItemPrice == 0){
        
        	/* Showing the error message */
			wc_add_notice("Sorry but it's not possible to add this product to cart", "error");
            
            /* Removing the product from the cart */
			$woocommerce->cart->remove_cart_item($cart_item_key);
			
			return;
		}
	}
	
}
add_action('woocommerce_add_to_cart', 'filter_custom_wpc_add_to_cart_callback', 20, 6);

Of course you can change the error message to be more appropriated.

More validation using WooPrice Calculator & WooCommerce

If you want to do more validation before add to cart a product (For example if you want to check if "height+width" is less then a predetermined value), then this article is for you.

Using WooPrice Calculator you can set a minimum and maximum values for each field but you can't validate more complex rules.

With Wordpress, WooPrice Calculator and WooCommerce this is really simple by using filters. You can use the filter "woocommerce_add_to_cart_validation" to do that.

For example if you want check "height + width" must be less then 2000, you can append a new PHP function to your "functions.php" file, located in "/wp-content/themes/YOUR_THEME/functions.php":

function filter_custom_wpc_add_to_cart_validation($bool, $product_id, $quantity){
	if($product_id == 40){
		$width		= $_REQUEST['aws_price_calc_1'];
		$height		= $_REQUEST['aws_price_calc_2'];
		
		if(($width+$height) >= 2000){
			wc_add_notice("Width and Height are greater then 2000 mm", "error");
			
			return false;
		}
	}
	
	return true;
}
add_filter('woocommerce_add_to_cart_validation', 'filter_custom_wpc_add_to_cart_validation', 20, 3);

Where in this case:

  • 40: this is the Product ID you want to check. You would like to change it for your products.
  • aws_price_calc_N: These are the fields you want to check. You can get the fields ID from your calculator you want to validate.
  • ($width+$height) >= 2000: This is the condition you want to validate.
  • wc_add_notice: The error message you want to show.

If validation fails, your customers will not be able to add the product to the cart and a error message will be shown: product-validation

WooPrice Calculator: Changing the price and changing numeric fields format

If you see wrong formatting while you are uploading your Excel file on WooPrice Calculator, this doesn't mind, please go ahead reading because there are different ways you can change price and numeric format after you have uploaded your Excel file.

- Changing the price format

If you want to change the price format, you have to change the WooCommerce price format:

  1. From your Wordpress back-end click on "WooCommerce"
  2. Click on "Settings"
WooCommerce Price Formatting

You'll see:

  • Currency: Set the currency sign you want
  • Currency Position: The position of the currency
  • Thousand Separator: The thousand separator
  • Decimal Separator: The decimal separator
  • Number of decimals: The number of decimal you want to display

Click on "Save changes" to save settings.

- Changing the Input Numeric Fields format

Input Fields

You can change the numeric format of the input fields by setting the properties on the Numeric Fields. Let's do that:

  1. Click on "Woo Price Calculator"
  2. Click on "Fields"
  3. Create a new Input Numeric Field or Edit an existing one

From the field form you can set:

  • Number of Decimals [Default is 2]: The number of decimals
  • Decimal Separator [Default is . ]: The decimal separator (For example . or ,)
Input Fields Formatting

- Changing the Output Numeric Fields for numeric format

If you want to format the output of numeric fields and you've mapped your Output Field with an Excel cell containing only raw numbers you can:

  1. Click on "Woo Price Calculator"
  2. Click on "Fields"
  3. Create a new Output Numeric Field or Edit an existing one

Set Number of Decimals [Default is 2], Thousand Separator and Decimal Separator [Default is . ] on the Output Field Form.

Output Field Format

- Format Output Numeric Fields for price format

To format your output fields for price you could simply use Excel functions. If you have price on B8 cell, you can format in "0,00 $" using the function: "=TEXT(B8;"0,00 $")"

Output Fields

Clearing the cache

If you added or changed CSS or Javascript code and you don't see any changes in your website front-end, this means you need to clear the cache.

Q: Yes, but what cache I need to clear?

It depends on what plugins you have installed in your Wordpress website, but general speaking:

  • You need to clear the cache of the browser (What ever your website has been build on)
  • You need to clear the cache of your Wordpress cache plugins.

Q: I'm a web designer, how do I clear the cache of my browser?

For Chrome check out this video. For Firefox just hint CTRL+F5 on Windows and Linux. On Apple hint Apple+R.

You need to do this every time you change CSS or Javascript code in your website.

Q: I cleared the cache of the browser but nothing changed

As I wrote before you probabily need to clear the cache of your Wordpress cache plugins. This depends on what cache plugin you have installed (For example Super Cache).

You need to go to your cache plugins settings and click on a "Purge Cache" or "Delete Cache" button. You need to do this every time you change CSS or Javascript code in your website.

Q: I understand now, but what about my customers?

This depends on their browser settings and on their browser type (Firefox, Chrome, etc), most of the time a browser restart would be ok for them. It also depends on the expiration date of the cookies you sent to your visitor browsers.

Adding prefix/suffix to price in WooCommerce & WooPrice Calculator

If you would like to add prefix or suffix to your product price, you can use the the hook "woocommerce_get_price_html" as following:

function change_product_price_html($price){
  	
	$newPrice 	 = "Text Before Price";
  	$newPrice 	.= $price;
  	$newPrice	.= "Text After Price";
  
	return $newPrice;
}
  
add_filter('woocommerce_get_price_html', 'change_product_price_html');

Of course, You need to replace "Text Before Price" and "Text After Price" strings (leaving the quotes).

To make it works you should append the code in your "/wp-content/themes/YOUR_THEME/functions.php"

Cart

Total : 0.00 €