1. WooCommerce Button

The WooCommerce Button feature allows you to add a WhatsApp button directly to your WooCommerce product pages. This enables customers to reach out instantly with product-specific inquiries.

1. WooCommerce Button Toggle
   • Enable / Disable the WooCommerce button.
   • When enabled, the WhatsApp button will appear on WooCommerce product pages.
2. Button Position
   • Choose where the WhatsApp button will appear on the product page.
   • Options:
     • Before Cart Button – Places the WhatsApp button above the Add to Cart button.
     • After Cart Button – Places the WhatsApp button below the Add to Cart button.
3. WhatsApp Type
   • Select whether the button should link to a Number or a Group.
   • Number → Direct chat with a single WhatsApp account.
   • Group → Opens a group invite link.
4. WhatsApp Number
   • Enter the WhatsApp number (with country code, e.g., +10123456789).
   • If using a Group, paste the WhatsApp group invite link here.
5. Pre-filled Message
   • Create a default message that auto-fills when a customer clicks the WhatsApp button.
   • Example: Hello! I’d like to ask about {productName} (SKU: {productSku}) on {siteTitle}. Current price: {productPrice} Stock: {productStockStatus}
   • You can use dynamic WooCommerce variables like:
     • {productName}, {productSku}, {productPrice}, {productSalePrice}, {productStockStatus}
     • Conditional blocks: {PRODUCT_START}...{PRODUCT_END}
     • Global vars: {siteTitle}, {siteEmail}, {currentURL}, {date}, {ip}
6. Show/Hide Icon: Toggle whether an icon appears on the button.
7. Icon for Button
   • Choose an icon for the button.
   • Options: WhatsApp default icon, Native icons, or Custom icons.
8. Button Text
   • Define the text label that appears on the button.
   • Example: “How may I help you?”
9. Button Padding
   • Adjust the padding (inside spacing) of the button.
   • Input values for Top, Right, Bottom, Left in pixels.
10. Button Margin
    • Set the margin (outside spacing) around the button.
    • Input values for Top, Right, Bottom, Left in pixels.
11. Button Border Radius
    • Control the corner roundness of the button.
    • Example: 0px = sharp edges, 50px = fully rounded.
12. 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