{"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":"2025-05-19T09:55:28","modified_gmt":"2025-05-19T04:25:28","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>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><strong>Select the Desired Position<\/strong>: Choose the appropriate position from the options listed above.<\/p>\n\n\n\n<p><strong>Navigate to<\/strong>:<strong>&nbsp;&#8221;<code>Click to Chat\"<\/code>&nbsp;-&gt;&nbsp;&#8221;<code>WooCommerce<\/code>&#8221;&nbsp;-&gt;&nbsp;&#8221;<code>Add WhatsApp<\/code>&#8221;&nbsp;-&gt;&nbsp;&#8221;<code>Single Product Pages''<\/code>.<\/strong><\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"158\" height=\"180\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/09\/woo-nav.webp\" alt=\"\" class=\"wp-image-6323\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img decoding=\"async\" width=\"626\" height=\"418\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2023\/03\/addwhatsapp.webp\" alt=\"Add WhatsApp In WooCommerce Single Product Pages\" class=\"wp-image-4193\" style=\"width:452px;height:auto\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2023\/03\/addwhatsapp.webp 626w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2023\/03\/addwhatsapp-300x200.webp 300w\" sizes=\"(max-width: 626px) 100vw, 626px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/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=\"\" 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\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Customization Options<\/strong><\/h5>\n\n\n\n<p>Here, WhatsApp with the Call to Action <strong>\u201cBuy Now\u201d<\/strong> is designed with style-8 and placed at the position of the <strong>product summary<\/strong>.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Pre-filled Messages<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The&nbsp;<strong>pre-filled message<\/strong>&nbsp;appears when users click the WhatsApp button on the single product page.<\/li>\n\n\n\n<li>We can customize this message to suit the product or store requirements.<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Call to Action (CTA)<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The CTA text is displayed alongside the WhatsApp button to prompt action (e.g., \u201cBuy Now,\u201d \u201cChat with Us\u201d).<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img decoding=\"async\" width=\"595\" height=\"463\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2023\/03\/displaytype.webp\" alt=\"\" class=\"wp-image-4195\" style=\"width:487px;height:auto\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2023\/03\/displaytype.webp 595w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2023\/03\/displaytype-300x233.webp 300w\" sizes=\"(max-width: 595px) 100vw, 595px\" \/><\/figure>\n\n\n\n<p>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><\/p>\n\n\n\n<p><strong>Button layout:<\/strong><\/p>\n\n\n\n<p>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=\"579\" height=\"81\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2023\/03\/buttonlayout.webp\" alt=\"\" class=\"wp-image-4196\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2023\/03\/buttonlayout.webp 579w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2023\/03\/buttonlayout-300x42.webp 300w\" sizes=\"(max-width: 579px) 100vw, 579px\" \/><\/figure>\n\n\n\n<p>If we are adding WhatsApp \u2018<strong>After add to cart<\/strong>\u2019 position, this option is useful.<\/p>\n\n\n\n<p><\/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=\"\" 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><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><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"610\" height=\"165\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2023\/03\/blocktype.webp\" alt=\"\" class=\"wp-image-4198\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2023\/03\/blocktype.webp 610w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2023\/03\/blocktype-300x81.webp 300w\" sizes=\"(max-width: 610px) 100vw, 610px\" \/><\/figure>\n\n\n\n<p><strong>Display Block Type<\/strong>: This option is useful to change the layout.<\/p>\n\n\n\n<p><strong>Block:<\/strong> Displays WhatsApp icon\/button on a new line, taking up the full-width space.<\/p>\n\n\n\n<p>(If the \u2018Display Center\u2019 option is checked, this option works better)<\/p>\n\n\n\n<p><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><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><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><\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Spacing (Margin)<\/strong><\/h5>\n\n\n\n<p>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><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><\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1019\" height=\"97\" src=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/09\/Margin_Woo_buton.webp\" alt=\"\" class=\"wp-image-4873\" srcset=\"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/09\/Margin_Woo_buton.webp 1019w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/09\/Margin_Woo_buton-300x29.webp 300w, https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-content\/uploads\/2021\/09\/Margin_Woo_buton-768x73.webp 768w\" sizes=\"(max-width: 1019px) 100vw, 1019px\" \/><\/figure>\n\n\n\n<p>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><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Override WooCommerce settings in Single Product Pages<\/h3>\n\n\n\n<p>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><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:&nbsp;&#8221;Click to Chat&#8221;&nbsp;-&gt;&nbsp;&#8221;WooCommerce&#8221;&nbsp;-&gt;&nbsp;&#8221;Add WhatsApp&#8221;&nbsp;-&gt;&nbsp;&#8221;Single Product Pages&#8221;. Customization Options [&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":0,"href":"https:\/\/holithemes.com\/plugins\/click-to-chat\/wp-json\/wp\/v2\/posts\/2019\/revisions"}],"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}]}}