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

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

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