WooCommerce

WooCommerce integration

Download the Plugin contribe-woocommerce-plugin.zip
Prepare the plugin in Wordpress

Go to wordpress and click on "Add New Plugin"

Click on "Upload Plugin" and upload the zip file in the box

Once completed, click on activate plugin

Now navigate to the new "Contribe.io" section within the Wordpress UI

And enter the information provided, by the Contribe team
- Plugin ID - unique identifier for the plugin
- Secret Key - a unique key used to sync order information.
If you haven't received the required information from Contribe or aren't sure how to get started, don't worry — Contribe Support is here to help!

To get assistance, simply click the chat icon in the bottom right corner of this page to chat with our support team. They'll guide you through the setup process and answer any questions you may have.
Add and style the plugin

With the plugin installed and your Plugin ID entered, the remaining steps are the same for every setup: adding the plugin snippet to your site and styling it to match your design.

Head to Adding & styling the plugin for the snippet and the full styling guide. You can skip the cart tracking section — on WooCommerce, order data is synced automatically using your Secret Key.
Add the Contribe badge to your product pages

The badge is a small banner that tells shoppers part of their purchase supports a cause. It is optional, and it uses the same Plugin ID as the cart plugin.
The WordPress plugin already loads the Contribe script, which includes the badge, so you do not need to add any extra script. Add the badge element in one of two ways.
Option A: add a snippet to functions.php
Add this to the functions.php file of your theme (or a child theme). It places the badge right after the Add to cart button. Replace XXXXXXXX with your own Plugin ID.
```
add_action('woocommerce_after_add_to_cart_form', function () {
    echo '<contribe-badge pluginId="XXXXXXXX" locale="en" subtitle="cart" logo="true"></contribe-badge>';
});
```
Option B: use a Custom HTML block
In the WordPress Site Editor, open the Single Product template, add a Custom HTML block where you want the badge, and paste in this element. Replace XXXXXXXX with your own Plugin ID.
```
<contribe-badge pluginId="XXXXXXXX" locale="en" subtitle="cart" logo="true"></contribe-badge>
```
Badge attributes
- pluginId: your Plugin ID.
- locale: the language of the badge texts, as a language code such as en, da or sv. Use an explicit code; inherit only works on Shopify.
- subtitle: cart shows "You choose where in the cart", checkout shows "You choose where at checkout", false hides the subtitle. Leave it out to show the default text, "Part of your purchase supports a cause".
- logo: set to true to show the Contribe logo below the badge. The default is false.
- customTitle and customSubtitle: replace the title and subtitle with your own text. These texts are not translated for you.
Styling the badge
Style the badge with CSS variables, for example in Appearance → Customize → Additional CSS. These are the default values; change any of them to match your design.
```
contribe-badge {
    display: block;
    max-width: 100%;
    margin: 5px 0;

    --contribe-badge-padding: 7px;
    --contribe-badge-background-color: transparent;
    --contribe-badge-border: 1px solid #000;
    --contribe-badge-border-radius: 3px;

    --contribe-badge-icon-color: #000;
    --contribe-badge-icon-bg-color: transparent;
    --contribe-badge-icon-size: 28px;
    --contribe-badge-info-gap: 12px;

    --contribe-badge-title-color: #000;
    --contribe-badge-title-size: 13px;
    --contribe-badge-subtitle-color: #000;
    --contribe-badge-subtitle-size: 12px;
}
```
Want us to place it for you?
Contribe Support can place the badge on your product pages for you. Use the chat icon in the bottom right corner of this page to ask.

Need Help? Contact Contribe Support

To get assistance, simply click the chat icon in the bottom right corner of this page to chat with our support team. They'll guide you through the setup process and answer any questions you may have.