4. Checkout Page

The Checkout Page WhatsApp Button allows customers to send their order details directly to WhatsApp from the checkout page before placing the order.

This is ideal for:

• WhatsApp-based checkout workflows
• Manual order confirmation stores
• Cash on delivery businesses
• Stores that negotiate pricing before final confirmation

When enabled, the button appears near the Place Order button and generates a structured message including full cart details.

Frontend Output #

A WhatsApp button appears near the Place Order button. When clicked, it opens WhatsApp with a pre-filled order summary including:

• Product name
• Quantity
• Price
• Product URL
• Subtotal
• Tax
• Total

⚙ Checkout Page Settings Explained #

1. WhatsApp Button on the Checkout Page (Show / Hide) – Show or Hide the WhatsApp button on the Checkout page.
   • Show → The button appears based on selected position and settings.
   • Hide → No WhatsApp button is shown on checkout.
2. WhatsApp Type – Choose how users will connect:
   • Number → Start a direct chat with a WhatsApp phone number
   • Group → Redirect to a WhatsApp group invite link.
3. WhatsApp Number / Group Link
   • If Number is selected, enter your WhatsApp phone number in international format e.g., +10123456789.
   • If Group is selected, paste the full WhatsApp group invite URL
     A test link is shown below the field to verify correctness.
4. Button Position – This determines whether the WhatsApp button appears above or below the default WooCommerce “Place Order” button. Choose where the WhatsApp button appears on the Checkout page. Available options may include:
   • Before Place Order Button
   • After Place Order Button
5. Pre-filled Message – Define the message that will automatically be inserted into WhatsApp when the customer clicks the button.
   • Customize the message that will be auto-filled when a customer clicks the button.
   • WooCommerce Cart Variable:
     • {cartInfo}
     • Global vars: {siteTitle}, {siteEmail}, {currentURL}, {date}, {ip}
     • Example: Hello, I want to purchase the item(s) below: {cartInfo}
6. Include With Cart Info: This ensures customers send complete order details. Select what to include in the generated WhatsApp message:
   • Product URL → Adds clickable product links.
   • Tax Amount → Includes tax information.
7. WooCommerce Button Style: Select how the button appears:
   • Icon Only
   • Simple Button
   • Advanced Button
8. Button Main Label: Set the text displayed on the button.
   • Example – Order via WhatsApp, Chat Now, Buy on WhatsApp, How may we help you? 
9. Icon for Button: Choose icon style:
   • Native WhatsApp icon, Custom icon, No icon
10. Button Size: Choose the size of the button:
    • XS, S, M, L, XL, XXL (Custom size option available)
11. Icon Color: Set the icon color for:
    • Normal state
    • Hover state
12. Icon Background
    • Enabled → Adds background behind the icon.
    • Disabled → Icon appears without background.
13. Icon Background Color – Set background color for:
    • Normal state
    • Hover state
14. Button Background – Set the button background color for:
    • Normal state
    • Hover state
15. Button Label Color – Set the text color for:
    • Normal state
    • Hover state
16. Button Border – Customize:
    • Border width
    • Border style
    • Border color
    • Hover border color
    • Border radius
17. Button Padding – Control internal spacing of the button:
    • Top / Right / Bottom / Left
18. Button Margin – Control outer spacing around the button.
19. Button Visibility – Control where the button appears:
    • Everywhere / Desktop Only / Tablet Only / Mobile Only