How to use “get_home_url()” link and apply custom CSS changes?

Hi,
Thanks for reaching out!

The WordPress installation has different addresses for home URL and site URL. It is necessary that the link of the header image point to the home URL.

Can you link to your website? Does this still happen with the WooCommerce email designer plugin disabled?
It sounds like you could have some caching conflicts. Are you using a caching plugin?

Kindly,
Hannah

Hi Hannah,

thank you for your reply.

The website does have a caching plugin installed. It is “W3 Total Cache”. I have already done “Purge all Cache” but it made no difference. Is there additional advise that you would give concerning your plugin and caching plugins?

If I turn on the option “Make image link to Website?”, the link still goes to the WP_SITEURL address, but it should link to the WP_HOME address. And if I turn off the option “Make image link to Website?” then no header image appears at all.

I have not yet tried testing the result with your plugin disabled.

It would be easiest for me to know where these changes are meant to be saved, which template files are being used. The obvious answer is that it is the template files in your plugin folder, but as I stated above, this does not seem to be the case because the header part is not applying the correct URL. The file email-header.php in your plugin template folder gets the URL with this PHP command: esc_url( get_home_url() ), which is the correct one, but this URL is not applied to the emails that are sent out?

All files in the WordPress plugin folder and sub-folders have their permission set to 644, which means they can not be written by “group” or “other”. So I tried setting these permission to 664 but this also made no difference. So which template files are being used here?

Here are some of the plugins also installed on the website:
– Disable REST API
– iThemes Security
– Newsletter
– Popup Maker
– WP-Optimize – Clean, Compress, Cache

Hi

After waiting a while for a helpful reply on your part, I decided to take a closer look at the issue myself, and here is what I found:

In the file “email-header.php” you have two instances of <table id="template_header_image_container">. In the first instance the header image URL is taken via PHP command esc_url( get_home_url() ), which is the one I need, and in the second instance via PHP command esc_url( get_site_url() ). I do not know why you have two instances of this in the “email-header.php” file, maybe there is a reason for it, but usually get_home_url() is the best choice to link to the homepage of a WordPress installation. In my case I had to correct the PHP command of the second instance to get the HOME_URL link for the header image.

In order to do this I copied all template files from “…/plugins/kadence-woocommerce-email-designer/templates/woo/emails” to the child-theme folder of the WordPress installation at “…/themes/child-theme-folder/woocommerce/emails”. There I made the changes to the “email-header.php” file.

Furthermore I would like to add that you seem to have an error in your HTML code of the email-header. I suggest that you remove the first instance of the closing paragraph tag in this section of code:

<?php
if ( $img ) {
	echo '<p style="margin-top:0;">';
	if ( $header_image_link ) {
		echo '<a href="' . esc_url( get_home_url() ) . '" target="_blank" style="display:block; text-decoration: none;">';
	}
	echo '<img src="' . esc_url( $img ) . '" alt="' . esc_attr( get_bloginfo( 'name', 'display' ) ) . '" width="' . esc_attr( $header_image_maxwidth ) . '" /></p>';
	if ( $header_image_link ) {
		echo '</a>';
	}
	echo '</p>';
}
?>

The last closing </p> tag is enough to close the opened <p style=”margin-top:0;”> tag.

Next I will try to manually add the custom CSS code to the template files and see if I can get this working as well.

Sincerely,
Gevorg

Hi Gevorg,
Thanks for looking further into this! I’ll pass this along to the developer and get some further input from him. Thanks for your patience!

Kindly,
Hannah

Thanks for posting, I just pushed an update to the plugin to fix the email heading errors (extra closing p tag and incorrect heading link). The reason there are two instances of the header logo area is that only one is used based on settings in the customizer. If you have the area “outside” the main content area the first is used and inside the main content is the second.

As for issues with CSS. It’s possible you need to use more specific CSS. Can you send me what you are wanting to change and I can help.

Woocommerce takes all the CSS and adds it inline for better email client support so there isn’t going to be a style tag in the end result.

Ben

Your welcome.

I already thought to myself that you probably need the two instances for the two scenarios, these being whether the heading part is contained in a fixed-width container or a full-width, also called fluid, container.

As for the custom CSS, here is the code that I added myself to make some corrections and add styling to the email design:

table.td>thead>tr>th {
  text-align: center !important;
}

table.td>tbody>tr>td:first-of-type>img {
  border: 1px solid #e8e8e2 !important;
  max-height: 50px;
}

table.td>tfoot>tr:first-of-type>th,
table.td>tfoot>tr:first-of-type>td {
  padding-top: 70px !important;
}

table.td>tfoot>tr>td {
  text-align: center !important;
}

table.td>tfoot>tr:last-of-type>th,
table.td>tfoot>tr:last-of-type>td {
  border-bottom: none !important;
}

table#addresses>tbody {
  background-color: #cfd1c5 !important;
}

table#addresses>tbody>tr>td>h2 {
  border-top: none !important;
  color: #979a8f !important;
  color: #42433e !important;
  font-size: 20px !important;
  font-weight: normal !important;
  margin: 15px 0 !important;
  padding: 0 0 0 10px !important;
  text-align: left !important;
}

table#addresses>tbody>tr>td>address {
  color: #42433e !important;
}

I had to use the !important property often, otherwise the CSS settings would not be applied even in the preview of the “Email Customizer”, let alone in the emails that are sent out, where they still are not applied. As of now I have the email design I want in the “Email Customizer”, but not in the emails that are sent out. Only the settings which I have made in the different sections of the “Email Customizer” are applied to sent emails, but not my custom CSS.

In CSS the “weight” or relevance of a selector plays a role in deciding which settings to apply. For example this selector

tbody {
  background-color: #cfd1c5;
}

weighs less than this selector

table#addresses>tbody {
  background-color: #cfd1c5;
}

So, no matter which one comes first, the selector that has more weight will be chosen. You probably know this already.

But how much weight would I have to give to my CSS selectors in the custom CSS section in order to have the settings be applied in the preview without using the !important property constantly? The plugin should consider by itself that the custom CSS ought to have higher priority than the other settings of the “Email Customizer”, because otherwise they would not have been added.

For the sake of getting some result I started checking the email template files. I added the first CSS command

table.td>thead>tr>th {
  text-align: center !important;
}

as inline CSS to the file “email-order-details.php”. This worked and I got the three table headings centered. But it’s tedious to do this for each CSS command. Neither can I add the second CSS command

table.td>tbody>tr>td:first-of-type>img {
  border: 1px solid #e8e8e2 !important;
  max-height: 50px;
}

as inline CSS, because in file “email-order-items.php” you use a filter to load the product images into the emails:

if ( $show_image ) {
	echo wp_kses_post( apply_filters( 'woocommerce_order_item_thumbnail', $image, $item ) );
}

So there is no <img> tag yet in the template file to which inline CSS could be added.

This <img> CSS command is needed for those cases when email clients by default do not load the image files of an email, and in our current time this is often the case due to security considerations. When the email client of the recipient does not show the product images, then the "alt" attribute of the images are displayed. These are long product names which have no space in the designated 100×50, or 50×50 pixel area of the image. So what you get is an ugly design where the "alt" text of the image overlaps its boundaries. But by setting max-height: 50px; for those product image files, the "alt" text is simply cut off at the bottom of the image area.

I can’t attach a screenshot to this message but if you need to see what I mean just let me know and I’ll send you a screenshot.

—

Something is not working right when WooCommerce is supposed to take all the CSS and add it inline to the HTML tags of the emails. I’d appreciate it if you could give advise what may be going wrong here, or suggest some alternative.

I have also tried to manually add all the above custom CSS at the end of file “email-styles.php”, but this had no effect. Maybe I should try it again with purging website cache. Do you have an ideas?

Sincerely,
Gevorg

Hi,

is there any progress with a reply suggesting what to do in order to have the custom CSS applied to outgoing emails?

Sincerely,
Gevorg

Hi,
It appears you can’t use :first-of-type

Seems the compiler used:
https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce/includes/emails/class-wc-email.php#L562

Doesn’t handle that well. Try writing your CSS without it.

Ben

I have tried that and I can also choose a different syntax if need be. But currently I am having mixed results.

Some of the settings do get applied to outgoing emails, even with :first-of-type selector in use, but others do not.

I am posting here the code to show you the difference:

This is the current code which I have as Custom Styles in the Email Customizer:

table.td>thead>tr>th {
  text-align: center !important;
}

img.attachment-100x50 {
  border: 1px solid #e8e8e2 !important;
  overflow: hidden;
  max-height: 50px;
}

th.tlabel-zwischensumme,
td.tvalue-zwischensumme {
  padding-top: 70px !important;
}

td.tvalue-zahlungsart {
  text-align: center !important;
}

table.td>tfoot>tr:last-of-type>th,
table.td>tfoot>tr:last-of-type>td {
  border-bottom: none !important;
}

#addresses>tbody {
  background-color: #cfd1c5 !important;
}

#addresses>tbody>tr>td>h2 {
  border-top: none;
  color: #42433e;
  font-size: 20px;
  font-weight: normal;
  margin: 15px 0;
  padding: 0 0 0 10px;
  text-align: left;
}

#addresses>tbody>tr>td>address {
  color: #42433e;
}

And this is the code that ends up in the <style> tag of an outgoing email’s <head> section:

<style type="text/css">
table.td>tbody>tr>td:first-of-type>img {
  border: 1px solid #e8e8e2 !important;
  max-height: 50px;
}

table.td>tfoot>tr:first-of-type>th,
table.td>tfoot>tr:first-of-type>td {
  padding-top: 70px !important;
}

table.td>tfoot>tr:last-of-type>th,
table.td>tfoot>tr:last-of-type>td {
  border-bottom: none !important;
}
</style>

As you can see these settings are from a previous version of my CSS custom code, not the current version, and it’s not even complete.

It would help me if you could tell me where and how your plugin does save the CSS custom code? Is it saved in the database somewhere or on the disc in a file? What happens with the CSS Custom Styles when I click “Save”?

Hey,
I’m not sure if you are overriding things but unless you are preventing the CSS compiler found here: https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce/includes/emails/class-wc-email.php#L562

You shouldn’t have anything in a style tag. Emails don’t get sent with style tags because support email clients like outlook require that you not use style tags but instead have everything inline.

Custom CSS in our plugin is saved in the database when output in the email styles right before the styles are then complied into inline as the HTML for the email is generated.

Please note this plugin doesn’t mess with the way woocommerce core complies and generates the HTML with CSS.

PS can you send me a screen shot of what you are trying to achieve?

Ben

Hi Ben

Thank you for your reply and for clarifying.

I don’t know which part of this installation causes the <style> tag to be included in the <head> part of outgoing emails. It’s still helpful because the :last-of-type selectors which I used are being applied. One can not use :last-of-type inline, but when the <style> tag is present in the <head> of emails it gets applied. I am aware that not all email clients support this, but it’s outside the scope of my task to check this in all relevant email clients.

I did not modify class-wc-email.php. Maybe there is a conflict with another plugin.

In any case I added the rest of CSS commands inline to the relevant email template files and got the result I wanted.

In Summary:

I copied all email template files of your plugin from “…/plugins/kadence-woocommerce-email-designer/templates/woo/emails” to “…/themes/child-theme-folder/woocommerce/emails”. There I edited the relevant email template files and added the CSS code inline to the tags which needed the styling.

For others who my look this post up at some later time, it does not work if you copy only the edited template files into your child-theme-folder sub-directory. It has to be the complete set of template files from the Kadence email plugin, otherwise it results in a critical error with the current version of this plugin.

You can mark this question as resolved and close this post.

Sincerely,
Gevorg