Adding *only* sticky WhatsApp button

Greetings XTemos team!

I would like to add a sticky WhatsApp button to the left side of our site.
We have multiple social profiles configured in the Theme Settings (Facebook, Instagram, YouTube). These are displayed in the footer.
When enabling “Sticky social links”, naturally all of the social links are displayed, while we only want a big(ger) WhatsApp button.
Is there a way to display only a sticky WhatsApp button without having to install any plugins?

Thanks,
Tom

Hello,

I have checked your site, but I do not see the sticky social icons that are currently enabled. Could you please enable them so I can review the setup and provide you with a possible solution?

Best Regards,

Hi Aizaz,

Thank you for the prompt reply.
I’ve enabled the social icons on our staging site as doing so on our live site would require clearing the cache which we only do once a week or in emergencies. I have included the link in the private content.

By the way, the social icons don’t appear in mobile at all, not sure why.

Tom

Hello,

01. Please add the below Custom CSS code to Theme Settings > Custom CSS > Global CSS section:

.wd-sticky-social-left  .wd-social-icon.social-instagram {
    display: none;
}
 .wd-sticky-social-left .wd-social-icon.social-facebook {
         display: none;
}
.wd-sticky-social-left  .wd-social-icon.social-youtube {
    display: none;
}

02. Add below Custom CSS code to Theme Settings > Custom CSS > Custom CSS for mobile:

.wd-sticky-social.wd-sticky-social {
    display: block;
}

Best Regards,

Hi Aizaz,

The codes did the trick – thanks!
Is there any chance to replace the square icon with the traditional rounded WhatsApp icon, and to make it bigger?

Hello,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global CSS section:

.wd-sticky-social-left  .wd-social-icon.social-whatsapp {
   border-radius: 10px; 
}
.wd-sticky-social-left.wd-sticky-social .wd-icon {
    width: 50px; 
    font-size: 40px; 
}

Best Regards,

Hi Aizaz,

Thanks again for your prompt reply.
The result isn’t exactly what I was looking for…
This is what is currently shown after adding the code:
https://prnt.sc/pAU3tQqel_3l

And this is what I am looking for:
https://prnt.sc/CxfRobBf_tWY

Hello,

You can upload your preferred WhatsApp icon to the Media Library in WordPress. Once uploaded, copy the image URL and replace it in the following CSS code:

.social-whatsapp .wd-icon:before {
    background: url('YOUR_IMAGE_URL_HERE') no-repeat center !important;
    content: "" !important;
    background-size: contain;
    width: 40px; /* Adjust size as needed */
    height: 40px;
    border-radius: 50%;
    display: inline-block;
}

Make sure to replace YOUR_IMAGE_URL_HERE with the copied URL of your uploaded image. This will display the custom-rounded WhatsApp icon.

Best Regards,

Hi Aizaz, I did this on our staging site and now it looks like this: https://prnt.sc/tcql-DAj0SIs

As of right now, these are all the codes I added based on your instructions:
Global custom CSS:

.wd-sticky-social-left  .wd-social-icon.social-instagram {
    display: none;
}
 .wd-sticky-social-left .wd-social-icon.social-facebook {
         display: none;
}
.wd-sticky-social-left  .wd-social-icon.social-youtube {
    display: none;
}
.wd-sticky-social-left  .wd-social-icon.social-whatsapp {
   border-radius: 10px; 
}
.wd-sticky-social-left.wd-sticky-social .wd-icon {
    width: 50px; 
    font-size: 40px; 
}
.social-whatsapp .wd-icon:before {
    background: url('/wp-content/uploads/2018/08/whatsapp-logo.svg') no-repeat center !important;
    content: "" !important;
    background-size: contain;
    width: 40px; /* Adjust size as needed */
    height: 40px;
    border-radius: 50%;
    display: inline-block;
}

Custom CSS for mobile:

.wd-sticky-social.wd-sticky-social {
    display: block;
}

At the moment the green square from the first screenshot does not appear on mobile at all.
I have added the link to our staging site in the private content.

Best regards,
Tom

Hello,

Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards,

No need to apologize, Aizaz! I know our request is very specific and I appreciate you working with me to find the solution.

I think the solution is that the background needs to be completely transparent so that only the green WhatsApp icon will be visible.

I have included the login details for our staging site in the private content.

Best regards,
Tom

Hello,

I have not seen the css code where you have added to the site. Please try to remove the previous code and add the below Custom CSS code to Theme Settings > Custom CSS > Global CSS section:

.wd-sticky-social-left .social-whatsapp .wd-icon:before {
    content: "\f40c" !important;
    font-family: 'Font Awesome 5 Brands';
        color: #456745 !important;
    background-color: white !important;
    border-radius: 20px;
    font-size: 50px;
}
.wd-sticky-social-left .wd-social-icon {
        background: none !important;
}

Best Regards,

[Author]

Posts