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
For example,
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.
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.
if we are adding WhatsApp ‘After add to cart’ position, this option is useful.
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.
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.
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.