We can Add WhatsApp on single product pages at these positions:
- After Product Summary
- After Product Summary
- Before Main Content
- Before Product
- Before Product Summary
- Product Summary
- Before Add to Cart Form
- Before Cart Button
- After Add to Cart Form
- After Product
- After Cart Button – Displays after Add to Cart button, this is highly specific to the theme. “After Add to Cart Form” is recommended for better visualization.
Navigate to ‘Click to Chat’ -> ’WooCommerce’ – Add WhatsApp – Single Product Pages
![](https://cdn.holithemes.com/plugins/click-to-chat/wp-content/uploads/2023/02/Woocommerce.webp)
![](https://cdn.holithemes.com/plugins/click-to-chat/wp-content/uploads/2023/03/addwhatsapp.webp)
For example,
![](https://cdn.holithemes.com/plugins/click-to-chat/wp-content/uploads/2023/03/singleproduct-1024x538.webp)
Here, WhatsApp with the Call to Action “Buy Now” is designed with style-8 and placed at the position of the product summary.
Pre-filled: The Pre-filled message appears when we click on the WhatsApp button on the single product pages.
Call to Action: The Call to Action is displayed along with the WhatsApp button on the single product pages.
![](https://cdn.holithemes.com/plugins/click-to-chat/wp-content/uploads/2023/03/displaytype.webp)
The WhatsApp position appears based on how the Theme is developed. We can adjust this position by adding spaces.
Button layout:
Select the Button layout to match the dimensions of the WhatsApp button (styles-1, style-8) with add to cart button.
![](https://cdn.holithemes.com/plugins/click-to-chat/wp-content/uploads/2023/03/buttonlayout.webp)
if we are adding WhatsApp ‘After add to cart’ position, this option is useful.
![](https://cdn.holithemes.com/plugins/click-to-chat/wp-content/uploads/2023/03/productsummary.webp)
Display Center: If checked, displays the WhatsApp Icon/Button at the center within the available space. If the ‘Display Center’ option is checked, set the ‘Display Block Type’ to ‘Block’ for better visualization.
![](https://cdn.holithemes.com/plugins/click-to-chat/wp-content/uploads/2023/03/blocktype.webp)
Display Block Type: This option is useful to change the layout.
Block: Displays WhatsApp icon/button on a new line, taking up the full-width space.
(If the ‘Display Center’ option is checked, this option works better)
Inline: The WhatsApp icon/button is displayed on a single line. They do not force the text after them to a new line.
Inline-block: This property is used to display the WhatsApp icon/button as an inline-level block container. The element itself is formatted as an inline element,
( About Block types at W3School )
Spacing(Margin): Add space between the elements. Top, Bottom, Left, and Right. Add values with any CSS units.
![](https://cdn.holithemes.com/plugins/click-to-chat/wp-content/uploads/2023/03/spacing.webp)
E.g. Adding 10px at the top will add 10px space above the WhatsApp icon/button, and adding left 50% will leave 50 percent left side space i.e. WhatsApp appears at the center.