1. WooCommerce Button

The WooCommerce Button feature allows you to add a WhatsApp button directly to your WooCommerce product pages with full control over placement, style, and behavior. Perfect for allowing customers to start a chat or join a group with just one click.

1. WooCommerce Button Toggle
   • Enable / Disable the WooCommerce button.
   • When enabled, the WhatsApp button will appear based on your selected position and settings.
2. WhatsApp Type
   • Choose whether the button opens a:
     • Number – Start a direct chat with a single WhatsApp number.
     • Group – Share a group invite link (e.g., for communities, updates).
3. WhatsApp Number
   • Add the WhatsApp phone number (international format with country code, e.g., +10123456789).
   • If using Group, paste the full WhatsApp group invite link.
4. Pre-filled Message
   • Customize the message that will be auto-filled when a customer clicks the button.
   • Supports dynamic WooCommerce variables:
     • {productName}, {productSku}, {productPrice}, {productSalePrice}, {productStockStatus}
     • Conditional blocks: {PRODUCT_START}...{PRODUCT_END}
     • Global vars: {siteTitle}, {siteEmail}, {currentURL}, {date}, {ip}
   • Example: Hello! I’d like to ask about {productName} (SKU: {productSku}) on {siteTitle}. Current price: {productPrice} Stock: {productStockStatus}
   • Global variables: {siteTitle}, {siteEmail}, {currentURL}, {currentTitle}, {date}, {ip}
5. Button Position: You can choose exactly where the WhatsApp button will appear on the WooCommerce single product page. This gives you full control over user experience and visual layout. Here are the available options:

Note: Placement support may vary depending on your WooCommerce theme structure. You can test different positions to see which aligns best with your design.

6. WooCommerce Button Style
   • Select a visual style from a list of pre-made layouts (circle, rounded, text icon combos, etc.).
   • Each style is designed to maintain high UI consistency.
7. Button Label
   • Customize the text shown inside the button.
   • Example: "How may I help you?"
8. Show/Hide Icon: Toggle to show or hide an icon inside the button.
9. Icon for Button
   • Choose an icon for the button.
   • Options: WhatsApp default icon, Native icons, or Custom icons.
10. Button Padding
    • Adjust the padding (inside spacing) of the button.
    • Input values for Top, Right, Bottom, Left in pixels.
11. Button Margin
    • Set the margin (outside spacing) around the button.
    • Input values for Top, Right, Bottom, Left in pixels.
12. Button Border Radius
    • Control the corner roundness of the button.
    • Example: 0px = sharp edges, 50px = fully rounded.
13. Button Visibility: Choose where the WooCommerce button will be displayed based on device type:
    • Everywhere → Visible on all devices (desktop, tablet, and mobile).
    • Desktop Only → Button is shown only on desktop screens.
    • Tablet Only → Button is shown only on tablets.
    • Mobile Only → Button is shown only on mobile devices.

WooCommerce Button Dynamic Variables #

When configuring the Pre-filled Message for your WooCommerce Button, you can use dynamic variables to automatically insert product details, site information, and conditional content. These variables are replaced in real-time with actual data when a customer clicks the button.

🛒 WooCommerce Variables #

• {productName} → Displays the product’s name.
  Example: “Darkify Plugin”
• {productSlug} → Inserts the product’s slug (URL-friendly name).
  Example: “darkify-plugin”
• {productSku} → Displays the product’s SKU (Stock Keeping Unit).
  Example: “DP-2025”
• {productPrice} → Shows the product’s current price (formatted with currency).
  Example: “$49”
• {productRegularPrice} → Displays the regular/original price.
  Example: “$79”
• {productSalePrice} → Displays the discounted/sale price (if applicable).
  Example: “$49”
• {productStockStatus} → Displays the stock availability.
  Example: “In stock” / “Out of stock”

🌍 Global Variables #

These variables insert general site or session-related details.

• {siteTitle} → Site title from WordPress settings.
  Example: “My WordPress Store”
• {siteEmail} → Site admin email.
  Example: “[email protected]”
• {currentURL} → The URL of the product page where the user clicked the button.
  Example: “https://myshop.com/product/darkify-plugin”
• {currentTitle} → The page/post/product title.
  Example: “Darkify – WordPress Dark Mode Plugin”
• {date} → Current date of the chat initiation.
  Example: “2025-08-28”
• {ip} → Visitor’s IP address.
  Example: “192.168.1.101”

🔲 Conditional Blocks #

Conditional blocks allow you to display specific sections of the message only if certain conditions are met.

• {PRODUCT_START} … {PRODUCT_END}
  Wrap content that should only appear if a WooCommerce product context exists.
  Example: {PRODUCT_START} Product: {productName} Price: {productPrice} {PRODUCT_END}
• {LOGGEDIN_START} … {LOGGEDIN_END}
  Content only shows if the user is logged in.
• {NOT_LOGGEDIN_START} … {NOT_LOGGEDIN_END}
  Content only shows if the user is not logged in.

✅ Example Pre-filled Message Using Variables

Hello! I’d like to ask about {productName} (SKU: {productSku}) on {siteTitle}.
{PRODUCT_START}
Price: {productPrice} (Regular: {productRegularPrice}, Sale: {productSalePrice})
Stock: {productStockStatus}
{PRODUCT_END}
Page: {currentURL}
Date: {date}
IP: {ip}

Customer sees something like:

Hello! I’d like to ask about Darkify Plugin (SKU: DP-2025) on My WordPress Store.
Price: $49 (Regular: $79, Sale: $49)
Stock: In stock
Page: https://myshop.com/product/darkify-plugin
Date: 2025-08-28
IP: 192.168.1.101