Change look of social share buttons?

Hello

Is it possible to change the look of social share buttons shown below cart from

http://prntscr.com/ohpltx

To something like this-

http://prntscr.com/ohplzy

Hello,

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

body .icons-design-default .woodmart-social-icon {
    padding: 10px 5px;
}
body.single .woodmart-social-icons i {
  display:block;
	padding:5px;
	color:white;
}
body.single .woodmart-social-icons i.fa-facebook {
background-color:blue;
}
body.single .woodmart-social-icons i.fa-twitter {
background-color:blue;
}
body.single .woodmart-social-icons i.fa-pinterest{
background-color:blue;
}
body.single .woodmart-social-icons i.fa-linkedin {
background-color:blue;
}
body.single .woodmart-social-icons i.fa-telegram {
background-color:blue;
}

Change the class of social icon fa-telegram as per your needs as well as the background colors.

Best Regards

Hello

http://prntscr.com/ohtmcp
http://prntscr.com/ohtmnq

It seems the code changes the colour everywhere and also change alignment in the footer. I was hoping to change the background only after the add to cart button area while leaving the social icons in the header and footoer (and other places if any) intact.

Something like this is also good as it is shown in footer.

http://prntscr.com/ohtnqj

Would that be possible? Regards.

Hello,

Please provide your site admin access. I have checked the code it works only on the product page. I would like to check on your site.

Best Regards

Hello

Please find login details. You are correct the code works only on the product page but it works everywhere on the product page including the header and footer. Regards.

Hello,

Please replace the provided code with this one:

body.single .entry-summary .icons-design-default .woodmart-social-icon {
    padding: 10px 5px;
}
body.single .entry-summary .woodmart-social-icons i {
  display:block;
	padding:5px;
	color:white;
}

body.single .entry-summary i.fa-facebook {
background-color:blue;
}
body.single .entry-summary i.fa-twitter {
background-color:blue;
}
body.single .entry-summary i.fa-envelope{
background-color:blue;
}
body.single .entry-summary i.fa-pinterest{
background-color:blue;
}
body.single .entry-summary i.fa-linkedin {
background-color:blue;
}

Best Regards

This works great. Thanks very much.

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts