1. Shop Page

The Shop Page WhatsApp Button feature allows you to display a WhatsApp button directly inside WooCommerce product loops — including:

• Shop page
• Category pages
• Tag pages
• Product archive pages

Instead of forcing customers to open the product page first, this feature lets them contact you instantly from the product grid.

⚙ Backend Configuration #

To configure the Shop Page button:

• Enable and customize the options as needed
• Go to WhatsApp Chat → WooCommerce
• Click on Shop Page

1. WhatsApp Button on Shop & Product Loops (Show / Hide) – Show or hide the WhatsApp button on WooCommerce shop and product loop pages.
   • Show → The button appears on shop, category, and archive pages based on your selected position and settings.
   • Hide → The button is hidden on all shop and loop pages.
2. WhatsApp Type – Choose how users will connect when clicking the button:
   • Number → Start a direct chat with a WhatsApp phone number
   • Group → Redirect users 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. Hide Add to Cart Button – This is useful for WhatsApp-only ordering stores.
   • Enabled (ON) → Hides the default WooCommerce “Add to Cart” button and replaces it with the WhatsApp button.
   • Disabled (OFF) → Keeps both Add to Cart and WhatsApp buttons visible.
5. Pre-filled Message – Define the message that is automatically inserted into WhatsApp when a customer clicks the button.
   • Customize the message that will be auto-filled when a customer clicks the button.
   • You can use dynamic WooCommerce variables to personalize messages, such as:
     • {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}
   • Example: Hello! I’d like to ask about {productName}. Current price: {productPrice}. Stock: {productStockStatus}
6. Button Position: Choose where the WhatsApp button appears in relation to the Add to Cart button.
   • Above Add to Cart Button → The WhatsApp button appears before the Add to Cart button.
   • Below Add to Cart Button → The WhatsApp button appears after the Add to Cart button.
7. WooCommerce Button Style: Select how the button is displayed:
   • Icon → Only the WhatsApp icon appears.
   • Simple Button → Button with icon and label.
   • Advanced Button → Structured layout with enhanced styling.
8. Button Main Label: Set the main text shown on the button.
   • Example – Order via WhatsApp, Chat Now, Buy on WhatsApp, How may we help you? 
9. Icon for Button: Choose which icon style to use:
   • Native WhatsApp icon, Custom icon, No icon
10. Button Native Icon: Add or remove the native icon manually.
11. Button Size: Choose the size of the button:
    • XS, S, M, L, XL, XXL (Custom size option available)
12. Icon Color: Set the icon color for:
    • Normal state
    • Hover state
13. Icon Background
    • Enabled → Adds background behind the icon.
    • Disabled → Icon appears without background.
14. Icon Background Color – Set background color for:
    • Normal state
    • Hover state
15. Button Background – Set the button background color for:
    • Normal state
    • Hover state
16. Button Label Color – Set the text color for:
    • Normal state
    • Hover state
17. Button Border – Customize:
    • Border width
    • Border style
    • Border color
    • Hover border color
    • Border radius
18. Button Padding – Control internal spacing of the button:
    • Top / Right / Bottom / Left
19. Button Margin – Control outer spacing around the button.
20. Button Visibility – Control where the button appears:
    • Everywhere / Desktop Only / Tablet Only / Mobile Only