> ## Documentation Index
> Fetch the complete documentation index at: https://docs.trybeans.com/llms.txt
> Use this file to discover all available pages before exploring further.

# WooCommerce

> Integrate Beans with your WooCommerce store.

<Frame>
  <img src="https://mintcdn.com/beans/J6xHJ5GscqG49ltu/assets/images/integrations/woocommerce/hero.webp?fit=max&auto=format&n=J6xHJ5GscqG49ltu&q=85&s=124ef2f1591e6f9772b7be01f2bf66df" alt="WooCommerce" style={{ borderRadius: '0.5rem' }} width="1576" height="832" data-path="assets/images/integrations/woocommerce/hero.webp" />
</Frame>

WooCommerce is an open-source e-commerce platform designed to provide merchants
with the tools they need to sell products online effectively.
[Integrating Beans with WooCommerce](https://www.trybeans.com/integrations/radix:woocommerce)
enhances this experience by enabling merchants
to boost customer loyalty through a rewards system. With Beans for WooCommerce,
you can reward customers for their purchases,
encouraging repeat business and fostering a loyal customer base.

## Setup

To begin, install the [Beans plugin for WooCommerce](https://wordpress.org/plugins/beans-woocommerce-loyalty-rewards/)
from the WordPress plugin repository. Follow the
[WordPress guideline](https://wordpress.org/documentation/article/manage-plugins/) for plugin installation.
After installation, activate the plugin and connect Beans to your shop using the setup instructions.

To manually connect Beans to your WooCommerce store, follow these steps:

<Frame>
  <img src="https://mintcdn.com/beans/J6xHJ5GscqG49ltu/assets/images/integrations/woocommerce/install-manual.gif?s=1a0f00a2df83572ee47c4239d19a15e0" alt="Manual install" style={{ borderRadius: '0.5rem' }} width="1920" height="1084" data-path="assets/images/integrations/woocommerce/install-manual.gif" />
</Frame>

1. Navigate to the plugins management page in your WordPress admin.
2. Find **Beans** and select **settings**.
3. On the Beans admin page within WordPress, follow the prompts and click **Connect**.
4. Select your Beans account or create a new one. If you already have one, log in.
5. Once on the connect page, choose **Connect manually**.
6. Provide WooCommerce API keys as instructed.
7. In WordPress admin, go to **WooCommerce > Settings > Advanced > REST API**.
8. Select **Add key** to create a new key for Beans.
9. Fill out the form: name the key, choose the primary admin as the user, and set permissions to **Read/Write**.
10. Generate and copy the API Key.
11. Paste the keys into the Beans interface form field.
12. Click **Connect** to complete the process.

## Rewards page

The Beans plugin for WooCommerce automatically adds a rewards page to your shop.
By default, you can access the page at `https://myshop.com/rewards-program`, assuming
your website's full URL is `https://myshop.com`.

To display the rewards program page, Beans uses the shortcode `[beans_page]`.
This makes it very easy to edit the page if necessary.

It is recommended to add the link to your rewards program in the main menu to make it easy for your customers to access.
Here is how to do it: [How to Add Navigation Menu in WordPress](https://www.wpbeginner.com/beginners-guide/how-to-add-navigation-menu-in-wordpress-beginners-guide/)

<Tip>
  Learn more about customizing your rewards page in the [Storefront
  display](/integrations/woocommerce#storefront-display) section.
</Tip>

## Redemption

<Frame>
  <img src="https://mintcdn.com/beans/J6xHJ5GscqG49ltu/assets/images/integrations/woocommerce/redemption.webp?fit=max&auto=format&n=J6xHJ5GscqG49ltu&q=85&s=b88680ce39a81cb13b134b0b7d517730" alt="Redemption" style={{ borderRadius: '0.5rem' }} width="1148" height="624" data-path="assets/images/integrations/woocommerce/redemption.webp" />
</Frame>

### Minimum points required for redemption

Sets a minimum points threshold that customers must reach before redeeming rewards. By default,
customers need to accumulate at least 100 points before being eligible for redemption. You can
adjust this threshold higher to ensure meaningful program engagement and prevent inefficient redemptions.
For example, if you set the minimum to 500 points, customers would need to earn at least 500 points before
they can start redeeming rewards.

**How it works:**

1. From the WooCommerce integration dashboard, navigate to **Preferences**.
2. Locate the **Redemption** section and enter your desired minimum points threshold in the
   **Minimum Points Required** field.
3. Click **Save** to apply changes.

<Tip>
  Choose a minimum threshold that balances customer satisfaction with your business goals. Too high may discourage
  participation, while too low could reduce program effectiveness.
</Tip>

### Maximum discount per redemption

Sets a limit on how much of the total purchase price can be discounted through points.
This ensures that the discounts provided through redemptions remain within acceptable
limits for your business. For example, if a customer wants to buy a product priced at \$10 and
has 1000 points (equal to \$10), but the maximum discount is set to 50%, they can only use 500
points, giving them a \$5 discount.

**How it works:**

1. From the WooCommerce integration dashboard, navigate to **Preferences**.
2. Locate the **Redemption** section and use the **Maximum Discount Per Redemption** slider to set
   your desired maximum discount percentage.
3. Click **Save** to apply changes.

<Tip>
  Setting a reasonable maximum discount percentage helps maintain a balance between rewarding customers and protecting
  your profit margins.
</Tip>

### Eligible collections

Enable point redemption for specific product collections in your store. Customers can then redeem
points only for products in the selected collections. When no collections are selected, all products
are eligible for redemption.

**How it works:**

1. From the WooCommerce integrations home page, navigate to **Preferences**.
2. Locate the **Eligible Collections** section and click on **Select collections**.
3. Choose the collections you want to make eligible for point redemption.
4. Click **Save** to confirm.

## Auto registration

Automatically enrolls new customers into your rewards program when they create an account
or make a purchase. This ensures seamless participation and maximum program engagement.

**How it works:**

1. From the WooCommerce integration dashboard, navigate to **Preferences**.
2. Locate the **Advance** section and switch the **Auto registration** toggle to **On**.
3. Click **Save** to confirm.

## Storefront display

### Widget

The widget appears as a floating button in the corner of your storefront that displays notifications
to help customers access their rewards program features, including joining the program, redeeming
points, and checking their balance.

**How it works:**

1. From the WooCommerce integration dashboard, navigate to **Storefront display**.
2. Locate and click on **Widget**.
3. In the Widget settings page, toggle "Enable widget" to on.
4. Adjust the widget's position and appearance to match your brand's style.
5. Click **Save** to apply changes.

<Frame>
  <img src="https://mintcdn.com/beans/J6xHJ5GscqG49ltu/assets/images/integrations/woocommerce/woo-widget-setup.gif?s=505816251d3a2fcf2ffd7cf4733d152f" alt="woo-widget-setup" style={{ borderRadius: '0.5rem' }} width="1132" height="590" data-path="assets/images/integrations/woocommerce/woo-widget-setup.gif" />
</Frame>

### Rewards page

The rewards page is a dedicated section on your storefront that displays your rewards program details.
It allows customers to view their points balance, redeem rewards, and learn more about your program.

<Frame>
  <img src="https://mintcdn.com/beans/J6xHJ5GscqG49ltu/assets/images/integrations/woocommerce/woo-reward-page-settings.webp?fit=max&auto=format&n=J6xHJ5GscqG49ltu&q=85&s=81f141293d8c1e80b7372eec67bc5d67" alt="woo-reward-page-settings" style={{ borderRadius: '0.5rem' }} width="1164" height="620" data-path="assets/images/integrations/woocommerce/woo-reward-page-settings.webp" />
</Frame>

**How it works:**

1. From the WooCommerce integration dashboard, navigate to **Storefront display**.
2. Locate and click on **Rewards page**.
3. Customize the template and settings as needed.
4. Click **Save** to apply changes.

**Customization settings:**

* **Headline Text**: The main title displayed at the top of the rewards page to attract customer attention.
* **About Text**: A small block of text that explains your rewards program purpose and welcomes customers.
* **Help Text**: A FAQ-style text that explains your rewards program, including common questions like
  "What is this?", "How does it work?", "How to redeem points?", and important terms and conditions.
* **Primary Color**: The main color used throughout the rewards page to maintain consistent branding with your store's theme.
* **Shop Now Link**: A direct link to the shopping page. It will be used as a call-to-action for customers to
  start earning points.
* **Contrast Color**: A color that contrasts with your primary color, typically black or white, to ensure text readability.

### Referral page

The referral page is a dedicated section on your storefront that displays your referral program details.
It allows customers to view and share their referral link with friends.

<Frame>
  <img src="https://mintcdn.com/beans/J6xHJ5GscqG49ltu/assets/images/integrations/woocommerce/woo-referral-page-settings.webp?fit=max&auto=format&n=J6xHJ5GscqG49ltu&q=85&s=917565bb81840b922193debff91c8157" alt="woo-referral-page-settings" style={{ borderRadius: '0.5rem' }} width="1164" height="654" data-path="assets/images/integrations/woocommerce/woo-referral-page-settings.webp" />
</Frame>

**How it works:**

1. From the WooCommerce integration dashboard, navigate to **Storefront display**.
2. Locate the **Referral page** section.
3. Customize the template and settings as needed.
4. Click **Save** to apply changes.

**Customization settings:**

* **Headline Text**: The main title displayed at the top of the referral page to attract customer attention.
* **About Text**: A small block of text that explains your referral program purpose and welcomes customers.
* **Twitter Message**: The default text that appears when customers share their referral link on Twitter.
* **Primary Color**: The main color used throughout the referral page to maintain consistent branding with your store's theme.
* **Contrast Color**: A color that contrasts with your primary color, typically black or white, to ensure text readability.

### Redemption button

The redemption button allows customers to redeem their rewards directly from the cart or checkout page.
By default, it is placed near the checkout call-to-action (CTA), allowing customers to apply their
rewards before completing a purchase.

<Frame>
  <img src="https://mintcdn.com/beans/J6xHJ5GscqG49ltu/assets/images/integrations/woocommerce/woo-redemption-button.webp?fit=max&auto=format&n=J6xHJ5GscqG49ltu&q=85&s=61f36d0df3110952f01c2b4c251f6df5" alt="woo-redemption-button" style={{ borderRadius: '0.5rem' }} width="1132" height="624" data-path="assets/images/integrations/woocommerce/woo-redemption-button.webp" />
</Frame>

**How it works:**

1. From the WooCommerce integration dashboard, navigate to **Storefront display**.
2. Locate the **Redemption Button** section.
3. Customize the template and settings as needed.
4. Click **Save** to apply changes.

**Customization settings:**

* **Primary Color**: The button background color.
* **Contrast Color**: The button text color. It should contrast with your primary color. It is
  recommended to use black or white to ensure text readability.

### Referral invitation popup

The referral invitation popup appears when someone visits a referral link, encouraging them to
join your rewards program using their unique link.

<Frame>
  <img src="https://mintcdn.com/beans/J6xHJ5GscqG49ltu/assets/images/integrations/woocommerce/referral-invitation-popup.webp?fit=max&auto=format&n=J6xHJ5GscqG49ltu&q=85&s=14b2d2b5076f9788ea88f95da25839f8" alt="referral-invitation-popup" style={{ borderRadius: '0.5rem' }} width="1132" height="624" data-path="assets/images/integrations/woocommerce/referral-invitation-popup.webp" />
</Frame>

**How it works:**

1. From the WooCommerce integration dashboard, navigate to **Storefront display**.
2. Locate and click on **Referral Invitation Popup**.
3. Customize the template and settings as needed.
4. Click **Save** to apply changes.

**Customization settings:**

* **Message**: A message informing customers that they are being referred and inviting them
  to sign up in order to get a reward.
* **Call-to-Action Text**: The text of the button to encourage customers to sign up.
* **Primary Color**: The popup's main color. It should match your brand colors.

### Referral reward popup

The referral reward popup notifies customers of successful referrals and encourages them to use their
rewards. This confirmation popup helps maintain engagement with your referral program.

<Frame>
  <img src="https://mintcdn.com/beans/J6xHJ5GscqG49ltu/assets/images/integrations/woocommerce/referral-reward-popup.webp?fit=max&auto=format&n=J6xHJ5GscqG49ltu&q=85&s=694037c8b2399d9f98e08806c8cfa153" alt="referral-reward-popup" style={{ borderRadius: '0.5rem' }} width="1132" height="624" data-path="assets/images/integrations/woocommerce/referral-reward-popup.webp" />
</Frame>

**How it works:**

1. From the WooCommerce integration dashboard, navigate to **Storefront display**.
2. Locate the **Referral Reward Popup** section.
3. Customize the template and settings as needed.
4. Click **Save** to apply changes.

**Customization settings:**

* **Message**: A confirmation message informing customers that their referral was successful.
* **Call-to-Action Text**: The text of the button to encourage customers to redeem their reward.
* **Primary Color**: The popup's main color. It should match your brand colors.

## Reinstall

If you suspect the Beans plugin isn't properly installed on your WordPress site,
Beans provides a straightforward solution to address this without any negative side effects.

<Frame>
  <img src="https://mintcdn.com/beans/J6xHJ5GscqG49ltu/assets/images/integrations/woocommerce/actions-reinstall.gif?s=14984169b58e54d1032e7de837cad2d7" alt="Reinstall" style={{ borderRadius: '0.5rem' }} width="1920" height="1084" data-path="assets/images/integrations/woocommerce/actions-reinstall.gif" />
</Frame>

1. From the Beans admin dashboard, navigate to the WooCommerce integration home page.
2. Select **Status** in the integration navigation menu.
3. From the **Actions** dropdown on the top right, select **Reinstall Beans**.

## Troubleshooting

### Issues with connecting Beans

Beans uses the WooCommerce API to access your store data. Here are the most common reasons why you might experience
issues with connecting Beans to your store.

* **Password-protected store**: To connect Beans to your store,
  you might need to temporarily disable password protection for your store.
* **"coming soon" or "site under construction" plugin that restricts public access**:
  This will block API access, which is essential for our application.
  To resolve this, temporarily disable the plugin to allow connection, then reactivate it afterward.
* **Incorrect API keys**: Please double-check your API keys to ensure they are correct.
* **Invalid SSL certificate**: Beans use SSL to securely connect to your store.
  If your SSL certificate is invalid, you might need to renew it.
* **Cache plugin**: If you have a cache management plugin that strips the "Authorization" header,
  try disabling the plugin to see if it resolves the issue.
* **Incorrect permalinks**: Ensure that your
  [WordPress permalinks](https://wordpress.org/documentation/article/customize-permalinks/#pretty-permalinks)
  are set to a pretty permalink structure. The recommended setting is `/%postname%/`.
* **Outdated WordPress or WooCommerce version**: Update your WordPress and WooCommerce to the latest versions.
* **Localhost**: If you're using localhost, you need to install Beans on a live server
  or use a localtunnel URL such as [ngrok](https://ngrok.com/) to connect to your store.
* **Invalid WordPress site location**: WordPress must be installed at the root level of your domain or subdomain.
  For example, if you're developing a store at `www.example.com/dev/`, our server will attempt to connect
  to `www.example.com`. To avoid this issue, install the development store on a subdomain like the `dev.example.com`
