html font links

Hi,

My website is inducia.com. I want to have my web links the same as http://www.copyblogger.com/blog/.
I have worked out to get as close as possible but here is the pb i am having: it messes up with woocommerce products and creates a dash border at the bottom of my product cards etc…

What i want is change the fonts param for content html font only except woocommerce pages. How to do that? Thats my code before:

.content a:link {
color:#477725;
border-bottom: 1px dotted #477725 !important;
} /* unvisited link */

.content a:visited {
color:#477725;
border-bottom: 1px dotted #477725 !important;
} /* visited link */

.content a:hover {
color:#333333 !important;
border-bottom: 1px dotted #333333 !important;
text-decoration: none;
} /* mouse over link */

Would appreciate if you could help. cheers