WooCommerce as a quotation request tool? Yes!

Our group provides development and marketing assistance to companies in both the domestic and international markets. Recently, we have developed a quotation request system for a Danish biotechnology company to assist it in selling its products. After specifying the project details, we thought it best, to build it on the logic of a WordPress-based WooCommerce web store system (that will also allow for online shopping in the future).

The project required the development of a completely unique, user-friendly WordPress template, that fits our client’s brand image elements. The individual components of the system are also designed to create or modify each page and content item with as few administrative tasks as possible. For this template we also developed a new, modern, integrated easy-to-use Drag & Drop Page Builder that allows you to easily edit and create pages. We have added custom fields to the basic WordPress / WooCommerce system to suit the specific needs of our client.

We used the benefits of the WooCommerce system’s checkout, (i.e. checkout logic) for quotation purposes. During the project development, – contrary to the basic approach of web store systems, – we simply removed the delivery and the payment method system from the “purchase” phase from the request for quotation process.

Turning off the shipping methods wasn’t even a problem for the WooCommerce webshop system, as it is a basic functionality, however, skipping the complete payment logic was not that simple. Of course, there is a way to do this, but it does require actual programming knowledge. The technical details of this will also be revealed in the rest of our article.

In addition to the request for quotation form, the specification included two other main functions as well: two contact forms and a document repository.

We also chose a unique solution for the former to allow for a more dynamic field filling mode. (From the product datasheet, the user can automatically fill in the product name input field by simply clicking on the page containing the contact form.) This feature has been partially redesigned since the website was handed over. Our client later requested that in addition to the selected product, other products could also be added to the “list” on the forms. To do this, we used a spectacular, easy-to-use, opensource JavaScript library. The form contains a list of countries that are retrieved from an external file (JSON).

To make the document repository easily manageable on the administration page, we’ve expanded the WooCommerce product datasheet with another unique group of fields allowing for an unlimited number of document uploads. This gave us in the end a very user-friendly and well-structured system. It is displayed as a newly created tab on the product page, from where we can easily access the products’ own documents as well. In addition, we also developed a dynamic landing page that lists all available uploaded files by product.

How to turn WooCommerce into a plain order form?

Are you ready for the tough part? Let’s see the technical details:

Knowing the basics of WordPress template development won’t be a difficult task. For transparency, create a new “woocommerce_offer.php” file and then include it in the “functions.php” file.

As mentioned above, turning off the modes of transport is no big deal. To turn off the payment part however, we implement the following filter:
add_filter( 'woocommerce_cart_needs_payment', '__return_false' );

Rewrite the text of the button to keep the context:
function bbloomer_rename_place_order_button() {
return __('Submit', 'lang');
}
add_filter( 'woocommerce_order_button_text', 'bbloomer_rename_place_order_button' );

Then turn off the price display on the store and product page:
function hide_price($price) {
return '';
}
add_filter( 'woocommerce_get_price_html','hide_price' );

Turning off the display of prices on the checkout:
add_filter( 'woocommerce_cart_item_subtotal', '__return_false' );
add_filter( 'woocommerce_cart_subtotal', '__return_false' );
add_filter( 'woocommerce_cart_total', '__return_false' );

Rewriting the text “Add to cart”:
function custom_add_to_cart_text() {
global $product;
return 'Get an offer';
}
add_filter( 'woocommerce_product_add_to_cart_text', 'custom_add_to_cart_text' );
add_filter( 'woocommerce_product_single_add_to_cart_text', 'custom_add_to_cart_text' );

Redirecting the user from the product page directly to the “checkout” page:
function redirect_to_shop() {
global $woocommerce;
// Remove the default `Added to cart` message
wc_clear_notices();
return $woocommerce->cart->get_checkout_url();
}
add_filter( 'add_to_cart_redirect', 'redirect_to_shop' );

Redirect the user to the store page after deleting all products from the “cart”:
function redirect_to_checkout_if_cart() {
if ( !is_cart() ) return;
global $woocommerce;
// Redirect to custom URL
wp_redirect( get_permalink( woocommerce_get_page_id( 'shop' ) ), '301' );
exit;
}
add_action( 'template_redirect', 'redirect_to_checkout_if_cart' );

Add the option to delete the product on the “checkout” page:
function custom_filter_wc_cart_item_remove_link($product_name, $cart_item, $cart_item_key) {
if (is_checkout()) {
$product_name .= apply_filters('woocommerce_cart_item_remove_link',     sprintf(
'<a href="%s" rel="nofollow" class="remove" style="float:left;">&times;</a>',
esc_url(WC_Cart::get_remove_url($cart_item_key)),
__('Remove this item', 'woocommerce'),
esc_attr($cart_item['product_id']),
esc_attr($cart_item['data']->get_sku())
), $cart_item_key);
return $product_name;
}
}
add_filter( 'woocommerce_cart_item_name', 'custom_filter_wc_cart_item_remove_link', 10, 3 );

We allowed placing 0 HUF products in the “basket”:
function set_product_purchasable_without_price( $purchasable, $product ) {
if( $product->get_price() >= 0 || $product->get_price() == '' ) {
$purchasable = true;
return $purchasable;
}
}
add_filter( 'woocommerce_is_purchasable', 'set_product_purchasable_without_price', 10, 2 );

When all the above is done, simply save the changes to the file.

That is all! 🙂

With the steps above, you can now easily create order forms using WooCommerce, however, if you don’t feel like a web guru, contact us and ask us for a unique, personalized quotation!