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 button style then you can change the inline code via the above website.
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 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 Options > Custom Layouts > Activate the option.
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.
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
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.
- 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 the Astra WP theme along with the Back To Top Icon.
Also Check out: How to Add JavaScript in Astra 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, or 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.
