Configuration of WooCommerce Tips and Donations
Allowing Tipping & Donation on Cart & Checkout
Go to WooCommerce > Settings > Tipping at Cart and Checkout. Here, you can accept tipping and donations on your store and configure their placement on the cart and checkout pages.
Enable Tipping Extension: Checkmark this option to activate tipping options on your store.
Configuring Tipping Display Settings
Show Tipping Options As: Choose where to display the tipping box on your store:
- Both Cart and Checkout
- Cart Only
- Checkout Only
Tipping Box Position On Cart Page: Specify the placement of tipping box on the cart page:
- Before Cart Table
- After Cart Table
- After Cart
Tipping Box Position On Checkout Page: Specify the placement of 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
Customizing the Tipping Section
Tipping Section Heading: Add a custom heading to describe the tipping box, such as “Support Our Team” or “Add a Tip.”
Tipping Section Description: Provide a detailed description to encourage customers to tip, e.g., “Your tips help us provide excellent service!”
Tipping Button Text: Define the text displayed on the tipping button, such as “Add Tip” or “Donate Now.”
Tipping Amount Options
Tipping Type: Choose how customers can input tipping amounts:
- Fixed:
- Tipping Fix Amount Options: Set specific amounts for tipping (e.g., $5, $10, $20).
- Percentage:
- Tipping Percentage Options: Define percentage-based tipping options (e.g., 5%, 10%, 15%). Exclude 0% to ensure a minimum tip.
Styling the Tipping Box
Tipping Templates: Select the layout for displaying tipping or donation fields:
- Select Box
- Buttons
- Radio Buttons
- Popups
Title for Tipping Fee in Cart: Define the label displayed for tipping fees in the cart and checkout totals, such as “Your Tip.”
Make Tipping Taxable: Enable this option to make tipping amounts taxable, based on your store’s tax configuration.
Custom Amount Button Title: Personalize the button text for entering a custom tipping amount, e.g., “Enter Your Tip.”
Custom Amount Input Field Placeholder: Provide a placeholder for the custom amount input field, such as “Enter an amount.”
Tipping Success Message: Craft a success message to display after a tip is applied. Use the {price} variable to dynamically show the tipping amount, e.g., “Thank you for your contribution of {price}!”
Select User Roles: Choose specific user roles (e.g., Members, Subscribers) to display the tipping section. Leave empty to show it to all customers.
Using Shortcodes
Enable Shortcode: Enable shortcodes to place the tipping section anywhere on your site:
- Add this shortcode where you want the tipping section to appear: [adf_tip_and_donation]
Tipping Section Heading: Add a custom heading for the shortcode-based tipping section.
Tipping Section Description: Provide a description for the shortcode-based tipping box.
Restricting Tipping/Donations on Your Store
Go to WooCommerce > Settings > Tipping at Cart and Checkout > Restrictions.
Products: Specify which products trigger tipping or donation application when added to the cart.
Categories: Define specific product categories that will activate tipping or donation options when items from these categories are added to the cart.
Shipping Methods: Choose shipping methods that, when selected during checkout, trigger the availability of tipping or donation options.
- Flat Rate
- Local Pickup
Adjusting the Style of Tipping/Donation on Cart & Checkout Pages
Go to WooCommerce > Settings > Tipping at Cart and Checkout > Style to customize the style of tipping or donation elements on both the cart and checkout pages.
Styling the Tipping Box:
Enable Tipping Box Style: Check the Enable Tipping Box Style option to apply styling to the tipping box.
- Tipping Box Text Color: Choose a text color for the content within the tipping box.
- Tipping Box Background Color: Set a background color for the tipping box.
- Tipping Box Border: Add a border around the tipping box.
- Tipping Box Border Color: Choose a color for the border to complement the tipping box design.
Styling the “Add Tip” Button:
Enable Add Tip Button Style: Check the Enable Add Tip Button Style option to customize the “Add Tip” button.
- Add Tip Button Text Color: Select a text color for the button to ensure clarity and contrast.
- Add Tip Button Background Color: Define the background color for the “Add Tip” button.
- Add Tip Button Border Color: Set a border color for the button to provide additional style and emphasis.
- Add Tip Button Text Hover Color: Choose the color for the button text when hovered over.
- Add Tip Button Background on Hover Color: Define the background color of the button when hovered over.
- Add Tip Button Border Size: Set the border thickness in pixels (e.g., 2px).
- Add Tip Button Border Radius: Add rounded corners to the button by specifying a border radius in pixels (e.g., 5px).
Styling the Options:
Option Text Color: Choose a color for the text of tipping options
Option Text Hover Color: Set a hover color for option text to provide a dynamic and interactive effect.
Custom CSS: Add your own CSS rules to customize the tipping section beyond the available settings.
Accessing the Tipping/Donation Stats in a Log
Go to WooCommerce > Settings > Tipping at Cart and Checkout > Report.
Viewing the Log
The log provides a comprehensive list of total tipping or donation amounts received against each order ID, along with corresponding dates and order statuses. You can easily track and monitor tipping or donation activity over time.
