{"id":2019,"date":"2021-09-07T06:53:46","date_gmt":"2021-09-07T01:23:46","guid":{"rendered":"http:\/\/holithemes.com\/plugins\/click-to-chat\/?p=2019"},"modified":"2026-10-23T16:53:30","modified_gmt":"2026-10-23T11:23:30","slug":"add-whatsapp-in-woocommerce-single-product-pages","status":"publish","type":"post","link":"https:\/\/holithemes.com\/plugins\/click-to-chat\/add-whatsapp-in-woocommerce-single-product-pages\/","title":{"rendered":"Add WhatsApp In WooCommerce Single Product Pages"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">We can display a WhatsApp button on single product pages in various positions. These positions provide flexibility and can be tailored based on how the theme is developed.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Available Positions<\/strong>:<\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0\"><strong>After Product Summary<\/strong><\/li>\n\n\n\n<li style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0\"><strong>Before Main Content<\/strong><\/li>\n\n\n\n<li style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0\"><strong>Before Product<\/strong><\/li>\n\n\n\n<li style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0\"><strong>Before Product Summary<\/strong><\/li>\n\n\n\n<li style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0\"><strong>Product Summary<\/strong><\/li>\n\n\n\n<li style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0\"><strong>Before Add to Cart Form<\/strong><\/li>\n\n\n\n<li style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0\"><strong>Before Cart Button<\/strong><\/li>\n\n\n\n<li style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0\"><strong>After Add to Cart Form<\/strong><\/li>\n\n\n\n<li style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0\"><strong>After Product<\/strong><\/li>\n\n\n\n<li style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0\"><strong>After Cart Button<\/strong>&nbsp;<em>(Note: The exact placement of the button may vary depending on your WordPress theme. In this case, using the &#8216;<strong>After Add to Cart Form<\/strong>&#8216; position is recommended for better visibility.<\/em>)<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>How to Configure<\/strong><\/h5>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Select the Desired Position<\/strong>: Choose the appropriate position from the options listed above.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Navigate to\u00a0<strong>Click to Chat \u2192 WooCommerce \u2192 Add WhatsApp \u2192 Single Product Pages.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"181\" height=\"300\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/09\/woocommerce-navigation-1.webp\" alt=\"Add WhatsApp In WooCommerce Single Product Pages: woocommerce navigation\" class=\"wp-image-7601\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img decoding=\"async\" width=\"749\" height=\"888\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/09\/addwa-single-pro-page.webp\" alt=\"Add WhatsApp In WooCommerce Single Product Pages: addwa single pro page\" class=\"wp-image-7607\" style=\"width:452px;height:auto\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/09\/addwa-single-pro-page.webp 749w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/09\/addwa-single-pro-page-253x300.webp 253w\" sizes=\"(max-width: 749px) 100vw, 749px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2023\/03\/singleproduct-1024x538.webp\" alt=\"Style 8 with the Buy Now call to action in the Product Summary position.\" class=\"wp-image-4194\" style=\"width:567px;height:auto\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2023\/03\/singleproduct-1024x538.webp 1024w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2023\/03\/singleproduct-300x158.webp 300w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2023\/03\/singleproduct-768x404.webp 768w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2023\/03\/singleproduct.webp 1113w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><strong>Style 8<\/strong> with the <strong>Buy Now<\/strong> call to action in the <strong>Product Summary<\/strong> position.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Customization Options<\/strong><\/h5>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Pre-filled Message and Call to Action:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Under <strong>Click to Chat \u2192 WooCommerce \u2192 Overwrite settings \u2192 Single Product<\/strong>, customize the <strong>Pre-filled Message<\/strong> that opens in WhatsApp and the <strong>Call to Action<\/strong> shown with the widget. These values apply to both the added widget and the main floating widget on Single Product pages.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Leave the override <strong>Pre-filled Message<\/strong> and <strong>Call to Action<\/strong> fields blank to use those set in <strong>Click to Chat \u2192 General<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Product page-level settings take priority over WooCommerce Single Product settings, which take priority over the main settings.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img decoding=\"async\" width=\"503\" height=\"877\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/09\/addwa-single-pro-page-display-type.webp\" alt=\"Add WhatsApp In WooCommerce Single Product Pages: addwa single pro page display type\" class=\"wp-image-7608\" style=\"width:487px;height:auto\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/09\/addwa-single-pro-page-display-type.webp 503w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/09\/addwa-single-pro-page-display-type-172x300.webp 172w\" sizes=\"(max-width: 503px) 100vw, 503px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Button layout:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Select the button layout to match the dimensions of the WhatsApp button (styles-1, style-8) with add to cart button.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"513\" height=\"79\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/09\/button-layout-addwa-single-pro-page.webp\" alt=\"Add WhatsApp In WooCommerce Single Product Pages: button layout addwa single pro page\" class=\"wp-image-7609\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/09\/button-layout-addwa-single-pro-page.webp 513w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/09\/button-layout-addwa-single-pro-page-300x46.webp 300w\" sizes=\"(max-width: 513px) 100vw, 513px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">If we are adding WhatsApp \u2018<strong>After add to cart<\/strong>\u2019 position, this option is useful.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"533\" height=\"304\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2023\/03\/productsummary.webp\" alt=\"if we are adding WhatsApp \u2018After add to cart\u2019 position, this option is useful.\" class=\"wp-image-4197\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2023\/03\/productsummary.webp 533w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2023\/03\/productsummary-300x171.webp 300w\" sizes=\"(max-width: 533px) 100vw, 533px\" \/><figcaption class=\"wp-element-caption\">if we are adding WhatsApp \u2018After add to cart\u2019 position, this option is useful.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Display Center:<\/strong> If checked, displays the WhatsApp icon\/button at the center within the available space. If the \u2018Display Center\u2019 option is checked, set the \u2018Display Block Type\u2019 to<strong> \u2018Block\u2019<\/strong> for better visualization.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"488\" height=\"278\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/09\/block-type-addwa-single-pro-page.webp\" alt=\"Add WhatsApp In WooCommerce Single Product Pages: block type addwa single pro page\" class=\"wp-image-7610\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/09\/block-type-addwa-single-pro-page.webp 488w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/09\/block-type-addwa-single-pro-page-300x171.webp 300w\" sizes=\"(max-width: 488px) 100vw, 488px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Display Block Type<\/strong>: This option is useful to change the layout.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Block:<\/strong> Displays WhatsApp icon\/button on a new line, taking up the full-width space.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">(If the \u2018Display Center\u2019 option is checked, this option works better)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Inline:<\/strong> The WhatsApp icon\/button is displayed on a single line. They do not force the text after them to a new line.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Inline-block:<\/strong> This property is&nbsp;used to display the WhatsApp icon\/button as an inline-level block container. The element itself is formatted as an inline element.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><sub>( About Block types at <a href=\"https:\/\/www.w3schools.com\/cssref\/pr_class_display.asp\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">W3School<\/a> )<\/sub><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Spacing (Margin)<\/strong><\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">We can add spacing around the WhatsApp button using any CSS units (e.g.,&nbsp;<code>px<\/code>,&nbsp;<code>%<\/code>,&nbsp;<code>em<\/code>).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Note:<\/strong> The WhatsApp position appears based on how the theme is developed. We can adjust this position by adding spaces.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Example:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Adding&nbsp;<code>10px<\/code>&nbsp;to the top margin will create space above the button.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Adding&nbsp;<code>50%<\/code>&nbsp;to the left margin will center the button horizontally.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"498\" height=\"692\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/09\/addwa-single-pro-page-margin-example.webp\" alt=\"Add WhatsApp In WooCommerce Single Product Pages: addwa single pro page margin example\" class=\"wp-image-7611\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/09\/addwa-single-pro-page-margin-example.webp 498w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/09\/addwa-single-pro-page-margin-example-216x300.webp 216w\" sizes=\"(max-width: 498px) 100vw, 498px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Override WooCommerce settings in Single Product Pages<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">We can override the content for WooCommerce single product pages when adding the WhatsApp widget. This includes customizing the pre-filled message, call-to-action, and other settings specific to WooCommerce products. By doing so, you can tailor the messaging to display product-specific details, such as price, SKU, and product name, directly within the WhatsApp chat. This feature ensures that customers have all the necessary information when reaching out.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/woocommerce-single-product-pages\/\" data-type=\"link\" data-id=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/woocommerce-single-product-pages\/\">Override WooCommerce Settings<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>We can display a WhatsApp button on single product pages in various positions. These positions provide flexibility and can be tailored based on how the theme is developed. Available Positions: How to Configure Select the Desired Position: Choose the appropriate position from the options listed above. Navigate to\u00a0Click to Chat \u2192 WooCommerce \u2192 Add WhatsApp [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"default","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":"","_htd2_assets":[]},"categories":[47],"tags":[],"class_list":["post-2019","post","type-post","status-publish","format-standard","hentry","category-woocommerce"],"_links":{"self":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts\/2019","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/comments?post=2019"}],"version-history":[{"count":2,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts\/2019\/revisions"}],"predecessor-version":[{"id":7856,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts\/2019\/revisions\/7856"}],"wp:attachment":[{"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/media?parent=2019"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/categories?post=2019"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/tags?post=2019"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}