Order Tip for WooCommerce

Order Tip for WooCommerce is a plugin that allows customers to add a tip or donation to a WooCommerce order. The tip is added under the form of a WooCommerce fee.

It allows the tip to be a percentage of the order total or a fixed custom amount. Cash tip is also available which marks the tip as 0 in value, but you should expect a tip on the delivery of your products or on the pickup of the order by the customer.

There is also an option for adding a custom tip which brings up a text field where the customer is able to type in a custom amount and which is subsequently added as a fixed amount to the order.

The tip can also be set to be taxed or not as per your current Tax options set in WooCommerce. It features 6 standard tip rates (5, 10, 15, 20, 25, 30) that can be extended through a filter – see below under the Developers section.

It features various configuration options in the WooCommerce Settings panel under the tab Order Tip.

The plugin’s backend is translated in German, Swiss German, Spanish, French, Italian, Romanian.

Dutch language support was added, thanks to Roel Mehlkopf (@mhlkpf).

Check out a demo here:

Live Preview

Check out a video on installing and using the plugin

Important Notes

The plugin works out of the box, with no coding skills required on basically any theme. However, it uses JavaScript for adding the tip to the order. If for some reason it doesn’t work as expected, please check your browser’s console for any JS errors or drop a line here in the Support tab providing a link to your website.

Websites using the Astra or Neve theme should avoid using the “After customer details position” to display the tip form. It may break the layout causing the order review sidebar to fall under the customer details one.

Developers

There are a couple of filters you can hook into should you need to extend or edit the core functionality:

• wc_order_tip_title – takes in 1 string variable which holds the title of the form which appears before the form;
• wc_order_tip_rates – takes in 1 array variable which holds the values of the predefined standard tip rates. You should return a simple array containing the values you wish to add. Eg: array( 10, 15, 30 );

And a few other filters for changing various strings dynamically, from a different plugin or the active theme:

• wc_order_tip_title – changes the tip form title;
• wc_order_tip_cash_label – changes the Cash tip button label;
• wc_order_tip_custom_label – changes the Custom tip button label;
• wc_order_tip_custom_enter_tip_placeholder – changes the Custom tip field placeholder;
• wc_order_tip_display_form – prevents the tip form from being displayed on the page.

And one filter for the backend:

• wc_order_tip_reports_date_time_format – allows changing the date format of the reports order created date/time. The format needs to comply with the PHP date format. See more here

CSS classes and IDs that allow customization:

• #wooot_order_tip_form – main form container
• #wooot_order_tip_form button.woo_order_tip – regular tip buttons
• #wooot_order_tip_form button#woo_order_tip_cash – cash tip button
• #wooot_order_tip_form button#woo_order_tip_custom – custom tip button
• #wooot_order_tip_form p.woo_order_tip_custom_text_field – row for the custom tip input box
• #wooot_order_tip_form input.woo_order_tip_custom_text – custom tip input box
• #wooot_order_tip_form button.woo_order_tip_apply – tip apply button
• #wooot_order_tip_form button.woo_order_tip_remove – tip remove button