• Resolved Pramathesh

    (@paramathesh)


    Hi,

    I changed the colors on my Email Settings to black font in Woo Dashboard and all of a sudden the clickable hyperlinks have also turned black in color. How can I change the color of the hyperlinks back to blue color?

Viewing 12 replies - 1 through 12 (of 12 total)
  • @pramathesh
    If you still have the problem, please post the url for your site so the markup and styles can be examined with browser tools.

    Thread Starter Pramathesh

    (@paramathesh)

    @lorro

    Hey, thanks for the response. The issue is with woocommerce emails. Changing the theme color also changes the url link color on the email. I want to retain the regular link color for the url while changing the base color of the template.

    Got it. To do a proper job you’ll need to set up a child theme with a subdirectory at:
    wp-content/themes/child-theme-name/woocommerce/emails/. In there, put a copy of plugins/woocommerce/templates/emails/email-styles.php.

    In the copy, edit the style for .link on line 145.

    Thread Starter Pramathesh

    (@paramathesh)

    @lorro

    Let me try it out end report to you. Thank you for your time.

    Thread Starter Pramathesh

    (@paramathesh)

    @lorro

    This is how the new line looks like under the child-theme/woocommerce/emails/email-styles.php

    .link {
    	color: #0000EE;
    }

    Still not working, all links in the content have changed to the base color that I’ve selected for the theme i.e. #252525

    Had a look at a sample link in an email and it doesn’t have the .link class, just the base colour.

    You could try setting the base colour to your preferred link colour. The template header does have an id, #template_header, so you could change the background colour for that in your custom email-styles.php. $base is also used for h1 etc and those colors can also be changed in email-styles.php.

    Thread Starter Pramathesh

    (@paramathesh)

    @lorro

    Tried what you just mentioned. Changed the template color to #0000EE and made appropriate changes to #template_header. Here’s how the file looks now, still a no-go. The header section is still colored #0000EE whereas it should be #252525 based on the changes made, is this correct?

    .link {
    	color: <?php echo esc_attr( $base ); ?>;
    }
    #template_header {
    	background-color: #252525;
    	border-radius: 3px 3px 0 0 !important;
    	color: <?php echo esc_attr( $base_text ); ?>;
    	border-bottom: 0;
    	font-weight: bold;
    	line-height: 100%;
    	vertical-align: middle;
    	font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    }
    
    #template_header h1,
    #template_header h1 a {
    	color: <?php echo esc_attr( $base_text ); ?>;
    }

    Yes that’s correct. It sounds like your custom styles are not in the loop.
    – check that your styles file is at:
    wp-content/themes/child-theme-name/woocommerce/emails/email-styles.php
    – no /templates in that path
    – email-styles.php has a hyphen, not an underscore
    – add !important after #252525
    – disable the file at /plugins/woocommerce/templates/emails/email-styles.php by renaming it. If the custom one is in-play, the removal of the core one should not have an affect.
    – in most email clients you can view email raw source to check it looks right
    – don’t think email parts are cached but temporarily deactivate any caching

    Thread Starter Pramathesh

    (@paramathesh)

    It worked! Finally, also found that changing the color in the code marked below makes it quicker and easier.

    a {
    	color: #0000EE;
    	font-weight: normal;
    	text-decoration: underline;
    }

    Thanking you once again @lorro wouldn’t have been possible without you ??

    Also, is there any way I can customize the woo emails? Add buttons for Checkout/Add to Cart text, like you’d receive from other stores?

    You can customise the emails by copying them into your child theme’s /woocommerce/emails directory. If you want to send multi-part emails, in case recipients have html emails disabled, you’ll also need to copy the plain ones to woocommerce/emails/plain and customise those as well. You just need to copy and customise the ones you want to change, not necessarily all of them.

    I’m not sure about a checkout link, what would be in the cart. A “would you like this product” with an add-to-cart link with parameters should work. You could also do a “check your orders” with a link to the my-account login page.

    Did you enter a link to your logo image in email settings? The logo shows above #template_header and looks good on emails.

    Thread Starter Pramathesh

    (@paramathesh)

    Just finished customizing the emails. I guess there is a huge trade off between pretty looking HTML heavy emails going to promotion or a simple and lucid looking email going to Primary Tab.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Email Hyperlink Color’ is closed to new replies.