Add WhatsApp Icon/Button in WooCommerce Single product pages.
These settings are available at
‘Click to Chat‘ -> ‘WooCommerce‘ – ‘WooCommerce – single Product Pages’ – section.
After product Summary – Display the selected style after product summary.
Before Main Content – Displays before the main content
Before Product – Displays before the product
Before Product Summary – Before the product summary
Product Summary – product summary
Before Add to Cart Form – Before Add to Cart Form
Before Cart Button – Before Add to Cart button
After Cart Button – Displays after Add to Cart button, this is highly specific based on the theme. If not set perfectly ‘After Add to Cart Form’ may be better.
After Add to Cart Form – Displays after add to cart form.
After Product – Displays after product. ( after related products )
Adjust display Settings
Style, Position appears based on how the theme is designed.
We can adjust the display settings by adding spaces, block types.
Display Center: If checked, display the WhatsApp Icon/Button at the center within the available space. If ‘Display Center’ option is checked, set the ‘Display Block Type’ to ‘Block’
Display Block Type: inline / inline-block / block. this option is useful to change the layout.
Block: Displays in a new line, the element block has full-width space. Style can add at the center when the display type is block. (If ‘Display Center’ option is checked, this option works better)
Inline: display with inline the content. no line breaks.
Inline-block: display with inline the content, but height, width can apply
( About Block types at W3School )
Spacing (Margin): Add space between the element. Top, Bottom, Left, Right. Add values with any CSS units.
E.g. Adding 10px at top will add 10px space from the other elements, adding left 50% will leave 50 percent space.