Home › Forums › WoodMart support forum › Adding *only* sticky WhatsApp button

Adding *only* sticky WhatsApp button

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • March 12, 2025 at 12:15 pm #645155

    wildguitars
    Participant

    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

    March 13, 2025 at 9:58 am #645419

    Aizaz Imtiaz Awan
    Keymaster

    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,

    March 13, 2025 at 6:23 pm #645689

    wildguitars
    Participant

    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.

    March 13, 2025 at 6:33 pm #645694

    wildguitars
    Participant

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

    Tom

    March 14, 2025 at 11:26 am #645835

    Aizaz Imtiaz Awan
    Keymaster

    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,

    March 17, 2025 at 3:26 pm #646461

    wildguitars
    Participant

    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?

    March 18, 2025 at 8:18 am #646612

    Aizaz Imtiaz Awan
    Keymaster

    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,

    March 18, 2025 at 11:17 am #646686

    wildguitars
    Participant

    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

    March 18, 2025 at 3:11 pm #646794

    Aizaz Imtiaz Awan
    Keymaster

    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,

    March 18, 2025 at 11:32 pm #646973

    wildguitars
    Participant

    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

    March 19, 2025 at 2:08 pm #647197

    Aizaz Imtiaz Awan
    Keymaster

    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,

    March 19, 2025 at 2:12 pm #647200

    wildguitars
    Participant

    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

    March 20, 2025 at 9:01 am #647436

    Aizaz Imtiaz Awan
    Keymaster

    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
Viewing 13 posts - 1 through 13 (of 13 total)