Order & Share on WhatsApp for WooCommerce

Allow customers to place orders or share products on WhatsApp with the Order on WhatsApp for WooCommerce plugin. Easier order placement results in higher conversions, better customer relationships, and future promotions.

Installation

↑ Revenir en haut

1. Download Order on WhatsApp for WooCommerce and have your .zip file
2. At the WordPress admin panel, go to the Plugins section, and click ‘Add New’ to upload and install the plugin you recently downloaded from WooCommerce.com.
3. Upload the .zip file to proceed with the installation.
4. Wait until the plugin installs. After successful installation, activate the plugin and move on to configuration settings.

Configurations

↑ Revenir en haut

In the admin panel, go to WooCommerce > Settings and click the Order on WhatsApp tab to configure this extension. Here you will find the following settings.

General Settings

↑ Revenir en haut

Go to WooCommerce > Settings > Order on WhatsApp > General Settings and configure the following settings in this section:

• WhatsApp Number: Enter the WhatsApp number (In international format without spaces)
• Allow For All Payment Methods: Click the checkbox to enable the WhatsApp order option for all payment methods. By default, the option is only allowed for the Cash on Delivery (COD) method.  
• Apply To All Products: Click the checkbox to enable the WhatsApp order button for all products.
• Button Text: Enter the text for the Order on WhatsApp button. (By default, it is set to “Buy On WhatsApp”)
• Use Default Icon: Check the box to use the default icon.
• Place Buttons: Choose from the dropdown where you want to place the button. You can select the button position as “Before Add to Cart” and “After Add to Cart”.
• Open WhatsApp In: Choose where to open WhatsApp, in a new or the same tab. By default, you will be redirected to the same tab. (Setting to New tab may create issues as some mobile devices don’t allow opening a link in a new tab)
• Prefilled WhatsApp Message: Set a prefilled custom message that will be displayed when the WhatsApp application opens.
• Create Order In Woocommerce: Check the box if you want to create orders in WooCommerce as well when they are placed through WhatsApp.
• Select Order Status: Select the status of the order from the dropdown:
  • Pending Payment
  • Processing
  • On Hold
  • Completed
  • Cancelled
  • Refunded
  • Failed
  • Draft
• Enable WhatsApp Button For Logged-In Users Only: Click on the checkbox if you want to enable the WhatsApp button only for logged-in users.
• Send Pay Now Link On WhatsApp: Check the box to send a “Pay Now” link on WhatsApp when the order status is pending payment.
• Add Multiple WhatsApp Numbers: Enable this option to add multiple WhatsApp contact numbers. These numbers will appear in a dropdown on the checkout page.
• Enter Label For WhatsApp Contact Number Input: Enter the label for the WhatsApp contact number input.
• Enter 1st WhatsApp Number: Enter the contact number(s) in international format. You can configure the name, contact number, and status (active or inactive) for each contact number. Click on the “Add Another” button to add as many contact numbers as you want.

Click on the “Save Changes” button to apply the settings you configured.

Settings for the Share Button

↑ Revenir en haut

In the admin panel, go to WooCommerce > Settings > Order on WhatsApp > Share Button tab to configure the settings for the share button. Here you will find the following settings.

• Enable Share Button: Select to enable or disable the share button. By default, it will be enabled.
• Share Button Text: Add custom text for the share button.
• Prefilled Share Message: Add a prefilled message for the share message.

Click on the “Save Changes” button to apply the settings you configured.

Configure Hide/Show Settings

↑ Revenir en haut

In the admin panel, go to WooCommerce > Settings > Order on WhatsApp > Hide/Show Settings tab to configure this extension. Here you will find the following settings.

• Show WhatsApp Button On Shop Page: Enable to display the WhatsApp button on the shop page.
• Show WhatsApp Button On Single Product Page: Check the box to enable the WhatsApp button on the single product page.
• Show WhatsApp Button On Cart Page: Enable to show the WhatsApp button on the cart page.
• Show Share Button On Shop Page: Click the checkbox to enable the share button on the shop page.
• Show Share Button On Single Product Page: Enable the checkbox to show the share button on the single product page.
• Show Share Button On Cart Page: Click the checkbox to display the share button on the cart page.
• Hide Cart Button On Shop Page: Click the checkbox to hide the cart button on the shop page.
• Hide Cart Button On Product Page: Select to hide the cart button on the product page.
• Hide WhatsApp Button on Desktop: Enable the checkbox to hide the WhatsApp button on desktop.

Configuring Notification Settings

↑ Revenir en haut

In the admin panel, go to WooCommerce > Settings > Order on WhatsApp > Notification Settings tab to configure the confiscation settings. Here you will find the following settings.

• Enable Notifications: Click the checkbox to enable notifications.
• Enable Notification Logs: Select the checkbox to enable notification logs. Logs will be stored for each notification sent.
• Enable WhatsApp Notification Agreement: Click the checkbox to enable the WhatsApp notification agreement. When checked, an agreement checkbox will appear on the checkout page and will ask for approval if the user wants to get notifications on WhatsApp. If not checked, a notification will be sent to every user who places an order.
• Agreement Checkbox Label: Add a label for the agreement checkbox.

Facebook/WhatsApp API Credentials

• Facebook App ID: Enter your Facebook App ID.
• Access Token: Enter your WhatsApp access token.
• Phone Number ID: Add your phone number ID.
• WhatsApp Business Account ID: Enter the ID of your WhatsApp business account.
• Message Templates: This Feature is optional because it uses WhatsApp Business Cloud API (There are charges for using this API, which will be paid by the Customer)

Display Settings

↑ Revenir en haut

In the admin panel, go to WooCommerce > Settings > Order on WhatsApp > Notification Settings tab to configure this extension. Here you will find the following settings.

• Button Padding: Set the padding for the WhatsApp button.
• Button Border Radius: Adjust the radius for the button.
• WhatsApp Button Background Color: Set the background color of the WhatsApp button.
• WhatsApp Button Text Color: Set the color for the text on the WhatsApp button.
• WhatsApp Button Border Color: Set the color for the border of the button.
• WhatsApp Button Border Width: Adjust the width of the button.
• WhatsApp Button Width (Shop): Adjust the width of the WhatsApp button on the shop page.
• WhatsApp Button Width (Product): Adjust the width of the WhatsApp button on the product page.
• WhatsApp Button Width (cart): Adjust the width of the WhatsApp button on the cart page.

WhatsApp Share Button Display Settings

↑ Revenir en haut

• Button Padding: Adjust the padding for the WhatsApp share button.
• Button Border Radius: set the border radius for the WhatsApp share button.
• Share Button Background Color: Set the background color for the WhatsApp share button.
• Share Button Text Color: Add text for the button.
• Share Button Border Color: Set teh color of teh border.
• Share Button Border Width: Adjust the width of the border.

Message Template Settings

↑ Revenir en haut

Go to WooCommerce > Settings > Order on WhatsApp > Message Template and customize the message on WhatsApp.

Redirect customers to WhatsApp with customized messages. Use built-in placeholders such as {order_id}, {order_number}, {order_total}, {order_currency}, {payment_method}, {shipping_method}, {customer_note}, and more to create custom messages. 

Configuration Meta Business

↑ Revenir en haut

To ensure the plugin functions properly, you must adjust settings within Meta Business. See the instructions below on how to configure it:

Create a Business Account

Visit https://business.facebook.com to register your company. Afterward, connect this account to your business’s social networks, including Facebook and Instagram.

To create an account, you can also check: Create a Business Account in Meta Business Manager.

Verify your Business

To utilize WhatsApp features, completing a Business verification is essential. This verification allows full utilization of WhatsApp Cloud API credentials directly. Only individuals with complete control of a business account can undergo this process.

For Business verification, refer to: Verify your Business.

Generate WhatsApp Cloud API Credentials

It’s necessary to generate a temporary WhatsApp Cloud API credentials token for testing purposes.

To generate the token, Check: Using Authorization Tokens for the WhatsApp Business Platform or Add the WhatsApp Product to Your App.

Creating a Permanent Access Token

Understanding the necessity of using an access token in the Authorization header of an HTTP request is crucial. The access token you have seen thus far is likely temporary. If you intend for your app to access the API more than 24 hours, you’ll need to generate a longer-lasting access token.

To create a system user, follow these steps:

• Navigate to Business Settings.
• Choose the business account associated with your app.
• Under Users, select System Users.
• Click on Add.
• Provide a name for the system user, select Admin as the user role, and proceed to create the system user.
• Choose the WhatsApp_business_messaging permission.
• Select Generate New Token.
• Copy and securely store your token.

Add a Real Business Number

Start developing your application using your test business number and test WhatsApp business account.

Utilize these test assets without incurring message-sending charges during the app development phase. When you’re prepared to send messages to your customers, add a real business phone number in the API Setup panel and establish a genuine WhatsApp Business Account.

• Access the Meta App configured for WhatsApp by visiting developers.facebook.com > My Apps > Choose your App.
• Navigate to the WhatsApp section using the left menu and select the API Setup panel.
• In the right pane, click on the “Add phone number” button under Step 5: Add a phone number.

If your phone number is presently registered with WhatsApp Messenger or the WhatsApp Business App, you must first remove it. It’s not possible to use the same number on both the WhatsApp Business app and other WhatsApp applications simultaneously. Your number should be exclusively utilized on the Business Platform or Business App.

Configure API Credentials in the Plugin

For configuring API credentials, go to Settings in the WooCommerce Tab. Here you can see Order on WhatsApp tab and a sub-tab(notifications) in which you can add Facebook WhatsApp API credentials, those are:

• Facebook app ID (Add your Facebook App ID)
• Access Token (Enter your WhatsApp access token)
• Phone Number ID (Add your phone number ID)
• WhatsApp Business Account ID (Enter your WhatsApp business Account ID)

Configure Message Templates In The Plugin

After adding valid credentials and saving the settings, A table is created after refreshing the page, in which you can create templates. You can add the following to the table.

• Name
• Data
• Language

You can also create, view, or delete a  template for order status update and order confirmation.

View Notification Logs

Admin can see All Customers’ WhatsApp Order status Notifications in the Notification Logs Tab Under the WooCommerce Option.