Tipping at Cart and Checkout

Setup and Configuration

↑ Back to top

General Settings:

↑ Back to top

Enable tipping extension: Check this option to start collecting tipping at the cart and checkout.

Show tipping options: Choose to show the tipping box on the following: 

  • Cart only
  • Checkout only
  • Both Cart and Checkout 

Tipping box position on the cart page: Choose the appropriate position for the tipping box on the cart page:

  • Before cart table
  • After Cart table
  • After Cart

Tipping box position on the checkout page: Choose an appropriate position for the tipping box on the checkout page:

  • Before checkout customer details
  • Before checkout billing form
  • After checkout billing form
  • Before order notes
  • After order notes
  • After checkout form

Tipping section heading: Add a heading for the tipping box. E.g., “Add Tip”. 

Tipping section description: Add a description for the tipping box. E.g., “Would you like to tip us?”

Tipping button text: Change the “Add Tip” button text as you like. 

Tipping type: Choose to collect tipping in fixed amounts or a percentage of the cart amount.

  • Fixed: Show a list of fixed numbers for users to choose from
  • Percentage: Show a list of percentage amounts for the user to choose from 

Tipping fix amount/percentage options: Add multiple tipping amount options separated by a comma (,).

  • Tipping templates: Choose an appropriate template for the tipping section:
    • Select Box
    • Buttons
    • Radio Button
    • Popup

Title for tipping fee in cart: Choose an appropriate title that will appear on the cart and checkout pages.  E.g., “Tips & Donation”. 

Make tipping taxable: Select this checkbox to make the tipping amount taxable.

Custom amount button title: Personalize button title used for adding custom tipping amount.

Custom amount input field placeholder for tipping: Add a custom placeholder for the custom amount input field.

Tipping success message: Display a custom success message when tipping is successfully applied to an order. You can use the variable {price} to show the added amount in the success message.

Select user roles: Show the tipping section to selected user roles only. Leave empty to display for all customers.

Enable shortcode: [adf_tip_and_donation] Check to enable shortcode. Add this shortcode anywhere to display the tipping section for your customers.

  • Tipping section heading: Add a custom heading for the shortcode-based tipping section.
  • Tipping section description: Add a description for the shortcode-based tipping section.

 

Restrict tipping and donation by products and shipping methods

↑ Back to top

Go to WooCommerce > Settings > Tipping at Cart and Checkout > Restrictions. From here, you can enable restrictions on tipping through the following options: 

  • Products: Show the tip and donation section only when the cart contains any of the selected products. Leave it empty to show for all products.
  • Categories: Show tip and donation section only when the cart contains a product from any of the selected categories. Leave empty to show for all.
  • Shipping methods: Select methods to show the tipping section only when any of the selected methods are chosen.

Customize Tipping Style Settings 

Go to WooCommerce > Settings > Tipping at Cart and Checkout > Style and customize the following options to show an appealing tipping feature to your customers. From here, you can customize the following style settings: 

Tipping Box Style

  • Tipping box text color: Choose a text color for the tipping box.
  • Tipping box background color: Choose a background color for the tipping box.
  • Tipping box border color: Choose a border color for the tipping box

“Add Tip” Button Style

  • Add tip button text color: Choose the appropriate color for the add tip button text.
  • Add tip button background color: Choose the appropriate color for add tip button background.
  • Add tip button border color: Choose the appropriate color for add tip button border.
  • Add tip button text hover color: Choose the appropriate color for add tip button text on hover.
  • Add tip button background on hover color: Choose the appropriate color for add tip button background on hover.
  • Add tip button border size: Add “add tip button” border in px.
  • Add tip button border-radius: Add “add tip button” radius in px.

Options Styles

  • Option text color: Choose the appropriate color for the option text.
  • Option background color: Choose the appropriate color for the option.
  • Option border color: Choose the appropriate color for the option border.
  • Option text hover color: Choose the appropriate color for option text on hover.
  • Option background on hover color: Choose the appropriate color for the option background on hover.
  • Option border-size: Add option border in px.
  • Option border-radius: Add option radius in px.

Custom CSS: Add custom CSS to style tipping section as you like.