View Product Page

Getting started with the plugin

For the plugin to work correctly, it creates a product called “YITH Donations for WooCommerce” automatically.
This product is essential for donations, therefore, you must pay attention not to delete it.
You can allow your customers to make a donation in two ways: by adding a form to your sidebar or to your product pages.

Donations form

Donations form on product page You can find the complete list of donations in Orders -> Donations total.

Donations column on Orders page

General Settings

From the Settings tab, you can configure the plugin’s global options as follows:

General settings

  • Show in Cart: show the donation form on the cart page;
  • Donation pre-set amounts: enter pre-set amounts separated by a vertical bar ( | ). Leave the field empty, if you want to let your users enter a custom amount;
  • Style: choose the style of the pre-set amounts from a Label or Radio button;
  • Show an extra field in the donation form: by enabling this option you can add an extra field where you can enter any text to make your donations form more effective;
  • Minimum Donation Required: minimum amount requested for donation;
  • Maximum Donation Allowed: maximum amount allowed for donation;
  • Payment method: select the payment methods available to users when there is at least a donation in their cart.

Button settings

If you want to customize the style of the button “Add Donation” shown both in the widget and with the shortcode, go to Settings > Button settings”.

After entering the text for the donation button, you can choose the button style from:Button settings

  • WooCommerce Style: this allows inheriting WooCommerce’s basic features.

Button custom style

  • Custom style: this allows customizing the button as you like by setting
    • Button typography
    • Button text color
    • Button background color
    • Button text hover color
    • Button background hover color

 

Donation by product

To insert the donation form in one or more products of your shop, go to the Products & Donations tab and click on the button Add products.

Add products buttonNow, you’ll see a screen like the following where you can select the products.

Add products

All the added products will then show in the Product list table.

Products & Donations

By enabling the option Set donation as compulsory, you can choose to make a donation required to download/purchase the related product.

Required donation

Users cannot add the product to the cart unless they make a donation (in case you had set a minimum and maximum value, the donation has to have an amount belonging to that range).

Required donation on product page

N.B. If the donation has been set as compulsory, its removal from the cart also removes the associated product. In this case, in fact, product and donation are bound to each other and the order can be completed only if both have been added to the cart.

Required donation on Cart page

Labels tab

To customize the texts of the messages and shown fields, go to the Labels tab.

Labels

  • Message attached to your donation: label for the field to make a donation;
  • Thank you message: text shown to users as a thank-you message after they made a donation;
  • Text displayed when donation field is empty: text shown in the donation field when empty;
  • Text displayed when donation field is invalid: text shown in the donation field when the value inserted is not valid;
  • Text displayed when donation field value is negative: text shown in the donation field when the entered value is negative;
  • Text displayed for minimum donation required: text shown when the donation has a minimum required amount. Available placeholder: {min_donation};
  • Text displayed for maximum donation allowed: text shown when the donation has a maximum required amount. Available placeholder: {max_donation};
  • Text displayed for compulsory donation: text shown to users when adding the product to the cart if a donation is required.

You can also customize the labels that are shown in the widget “Summary”.

Customize "Summary" widget labels

Summary widget example

Emails

For each donation made, the plugin sends an email to the related user. Email settings can be configured from the Emails tab in the plugin panel.Email settings

  • Email Type: choose the email type from HTML and Plain text;
  • Email Subject: enter the subject of the email;
  • Email Content: enter the content of the email;
  • Enable/Disable: decide whether to send the email or not.

To dynamically add information to your email, you can use the following placeholders :

  • {customer_name}: customer’s name
  • {customer_email}: customer’s email
  • {order_id}: order ID
  • {order_date}: order date
  • {order_date_completed}: order completed date
  • {donation_list}: list of all donations in the order
  • {site_title}: name of the shop as set in WordPress

Email example

Email example

 

Donation Form and shortcode

You can add a donation form to any sidebar of your site using the widget “YITH Donations for WooCommerce”.

shortcode

If you want to add the form to the page content, you can use the shortcode available. Click on the dedicated button of your WordPress visual editor or enter it in textual mode: [yith_wcds_donations].

Visual editor (automatically created)

donations7

By clicking on this button, you can fill out the fields of the popup.

shortcode popup

And the according shortcode is created automatically.

Textual shortcode (manually created)

The shortcode attributes are the following:

  • donation_amount: enter pre-set amounts separated by a vertical bar ( | ). Leave empty if you want to let your users enter a custom amount.
  • donation_amount_style: choose the style of the pre-set amounts: it can be either label or radio.
  • show_extra_desc: set to “on” if you want to add an extra field to the donation form.
  • extra_desc_label: enter here the title of the extra field.

For example, if you build the shortcode like this:

[yith_wcds_donations donation_amount="10|20|30" donation_amount_style="radio" show_extra_desc="on" extra_desc_label="Tell us more about why you are donating, we are so grateful!"]

This is what it will look like on the Shop page:

shortcode on page

The plugin gives you the opportunity to enter the form also into the detail page of one or more products. Read more about this here.

If you want to customize the style of the button “Add a Donation”, please go to this page.

 

Donation widget

The plugin allows adding a widget to give your users the possibility to make a donation from any page of your website where the sidebar appears.

Enter a title and the pre-set amounts available (if you want to show any). Make sure you separate values with a vertical bar ( | ).

Donation form widget

Choose the style of the pre-set amount from Label, Select or Radio Button style.

Check the option Show an extra field in the donation form to add an extra text field. You can add here any text so that you can make your Donation widget more effective.

This is what it looks like on the frontend.

donations widget

Donations summary widget and shortcode

The widget YITH Donations for WooCommerce – Summary gives you the possibility to add a counter to your sidebar showing the total amount of donations received so far.
Add the widget from Appearance > Widgets and select the time-lapse that has to be counted as the total amount of received donations (today, this week, this month, this year, or since the plugin has been first enabled).

Summary widget settings

donation summary

You can also show this using the following shortcode:

[yith_wcds_donations_summary]

It includes the following attributes and values:

  • summary_from=”day”, “week”, “last_month”, “month”, “year”, “always”
  • include_tax=”on”, “off”

Gutenberg integration

The plugin is ready to be used with the new Gutenberg editor. When you add a new post or page, you will be able to find our YITH shortcodes and widgets. With a simple click, they will be added to your page.

Gutenberg blocks

Donation form

Read more about the widget settings here.

Donation summary

Donation summary block

Read more about the widget settings here.