The Black Friday & Cyber Monday 2021 is here !!! Grab Exclusive Deals - Shop More, Pay Less Get Now

How to Add Floating WhatsApp Button in Astra Theme?

In this tutorial, we are going to add floating WhatsApp button in Astra Theme without any plugin.

Also, we are also going to add some other buttons like Messenger as a bonus so that you can later add any button you love to use in your blog/website.

You are also going to learn to

  • Add Messenger, Viber, WeChat, Email, etc. buttons
  • Use SVG Icons in the Astra WP Theme.
  • Style Buttons using CSS code.
  • So On …

Steps to Add Floating WhatsApp Button in Astra Theme

Before proceeding, you need to know that we are using SVG Inline code in this tutorial from iconmonstr. If you love to add more buttons to this tutorial then you can simply visit the website and use it.

Also, we are going to implement WhatsApp and Messenger buttons in this tutorial so, if you want to change the buttons style then you can change the inline code via the above website.

How to Add Floating WhatsApp Button in Astra Theme

Also Read: Add Social Sharing Buttons in Astra Theme without Plugin

1. Install Astra Pro Addons

In order to use this method, you need to use Custom Layouts Module and this module is only available on Astra Pro Theme.

If you haven’t already tested the Pro version then I recommend you to test it.

Ways to install Astra Pro Addons.

  • Download the plugin.
  • Go to Plugins > Add New.
  • Click on Upload Plugin.
  • Choose File and Click on Install Now.
  • Finally, Activate the plugin.

Now go to Appearance > Astra Optons > Custom Layouts > Activate the option.

Activating Custom Layouts Module in Astra Theme

2. Add Custom Layouts WhatsApp Hook

  • First, Go to Appearance > Astra Options > Custom Layouts.
  • Click on Add New button to add custom layouts.
  • Now, Enable Code Editor Option that is located at the top of the box.
  • Here, Add the Title for the WhatsApp/Messenger floating button.
  • Under Layout Option, choose the Hooks option.
  • Now, you will be able to see more Hooks options.
WPLogout Floating WhatsApp Buttons

Copy and Paste the following code in the snippet box.

<div class="wplogout-social-link">
<a href="https://m.me/<YourPageUsername>" title="Chat with Us in Messenger" target="_blank" rel="nofollow" class="wplogout-float-messenger-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 4.975-12 11.111 0 3.497 1.745 6.616 4.472 8.652v4.237l4.086-2.242c1.09.301 2.246.464 3.442.464 6.627 0 12-4.974 12-11.111 0-6.136-5.373-11.111-12-11.111zm1.193 14.963l-3.056-3.259-5.963 3.259 6.559-6.963 3.13 3.259 5.889-3.259-6.559 6.963z"/></svg>
</a>
<a href="https://wa.me/<number>" title="Chat with Us in WhatsApp" target="_blank" rel="nofollow" class="wplogout-float-whatsapp-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 24 24"><path d="M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.582 2.128 2.182-.573c.978.58 1.911.928 3.145.929 3.178 0 5.767-2.587 5.768-5.766.001-3.187-2.575-5.77-5.764-5.771zm3.392 8.244c-.144.405-.837.774-1.17.824-.299.045-.677.063-1.092-.069-.252-.08-.575-.187-.988-.365-1.739-.751-2.874-2.502-2.961-2.617-.087-.116-.708-.94-.708-1.793s.448-1.273.607-1.446c.159-.173.346-.217.462-.217l.332.006c.106.005.249-.04.39.298.144.347.491 1.2.534 1.287.043.087.072.188.014.304-.058.116-.087.188-.173.289l-.26.304c-.087.086-.177.18-.076.354.101.174.449.741.964 1.201.662.591 1.221.774 1.394.86s.274.072.376-.043c.101-.116.433-.506.549-.68.116-.173.231-.145.39-.087s1.011.477 1.184.564.289.13.332.202c.045.072.045.419-.1.824zm-3.423-14.416c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm.029 18.88c-1.161 0-2.305-.292-3.318-.844l-3.677.964.984-3.595c-.607-1.052-.927-2.246-.926-3.468.001-3.825 3.113-6.937 6.937-6.937 1.856.001 3.598.723 4.907 2.034 1.31 1.311 2.031 3.054 2.03 4.908-.001 3.825-3.113 6.938-6.937 6.938z"/></svg>
</a>
</div>

Note: In the above code replace the Messenger URL with your FB’s Messenger URL. In WhatsApp section, replace the <number> with your WhatsApp number. Follow the steps below to get correct URLs for respective button.

For WhatsApp, you need a link in this format.

https://wa.me/<number>

The number should be in an international format like https://wa.me/9771234567890

Here 977 is a country code and the rest is your number.

For Facebook, You need a URL like this

https://m.me/<YourPageUsername>

This is a direct messenger chat URL. You can find your Messenger chat URL in the below section of your Facebook Page:

Visit Your Page > About > Contact Info

Facebook Messenger Chat URL
WhatsApp Floating Code in WP Astra Theme

3. Custom Layouts Settings for Sticky WhatsApp Button

Now, it’s time to manage some settings for Custom Layouts Hooks. Use the below configuration as listed below.

WhatsApp Floating Custom Layouts Settings in WP Astra
  • Under Action, Select wp_footer.
  • Leave Priority as it is.
  • Under Spacing leave as it is.
  • Select Entire Website under Display On Option.
  • Under Responsive Visibility leave as it is.
  • For other settings leave blank.
  • Finally Hit Publish Button.

4. Style Floating WhatsApp Button

Now, it’s time to use CSS code to Style WhatsApp and Messenger buttons.

If you don’t want Messenger buttons then you can remove the messenger-related code.

Note, you can tweak the CSS code as necessary.

.wplogout-float-whatsapp-wrapper {
	position: fixed;
	top: 85%;
	right: 1.5em;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 9999;
	fill: rgba(37, 211, 102, 1);
}

.wplogout-float-whatsapp-wrapper:hover path {
	fill: rgba(37, 211, 102, .6);
	transition: fill .4s ease;
}

.wplogout-float-messenger-wrapper {
	position: fixed;
	top: 75%;
	right: 1.5em;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 9999;
	fill: rgba(0, 132, 255, 1);
}

.wplogout-float-messenger-wrapper:hover path {
	fill: rgba(0, 132, 255, .6);
	transition: fill .8s ease;
}

5. Result

It’s time to see the actual result. Here you can see WhatsApp & Messenger buttons in Astra WP THeme along with the Back To Top Icon.

Floating WhatsApp and Messenger Buttons in Astra WordPress Theme

At the End

This is the step-by-step process to add floating WhatsApp button in Astra Theme. Not only you can add a WhatsApp button but also you can float any kind of icon, text in the Astra WordPress Theme.

I hope you loved this simple tutorial related to WPAstra, if you have any queries then feel free to comment below.

Share:

I am obsessed with WordPress and write articles about WordPress Speed Optimization, SEO, Blogging. I mostly publish tutorials on GeneratePress and GenerateBlocks.

Leave a Comment