Add WhatsApp In WooCommerce Single Product Pages

Add WhatsApp Icon/Button in WooCommerce Single product pages.

These settings are available at

Click to Chat‘ -> ‘WooCommerce‘ – ‘WooCommerce – single Product Pages’ – section.

Position

After product Summary – Display the selected style after product summary.

PRO-Version

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.