Gevorg

Forum Replies Created

Viewing 11 replies - 16 through 26 (of 26 total)
  • Thread Starter Gevorg

    (@gev0rg)

    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”?

    Thread Starter Gevorg

    (@gev0rg)

    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

    Thread Starter Gevorg

    (@gev0rg)

    Hi Marko

    Here is some info about the website:

    WordPress version: 5.8.2
    WooCommerce Version: 5.9.0

    The theme in use is Storefront, from the same developers as WooCommerce. It is version 3.9.1.

    W3 Total Cache is active in version 2.2.0. Currently lazy loading has been deactivated.

    There are two lines of Referrer-Policy included in the raw header information, these are:

    Referrer-Policy strict-origin-when-cross-origin
Referrer-Policy no-referrer-when-downgrade

    I have currently deactivated lazy loading of image files and I received confirmation that the images do show up again in Google Chrome browser. I should mention that when I tested it with Google Chrome the images did show up, even when lazy loading was still active. But the client wouldn’t see any images on his Chrome browser, neither anyone else whom he asked to visit his website with a Chrome browser. They tried it on various devices. But when people used a browser other than Google Chrome they would see the images.

    Now that lazy loading has been deactivated they encounter no problems on Google Chrome browser.

    Let me know if you might need more information.

    Sincerely,
    Gevorg

    Thread Starter Gevorg

    (@gev0rg)

    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

    Thread Starter Gevorg

    (@gev0rg)

    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

    Thread Starter Gevorg

    (@gev0rg)

    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

    Thread Starter Gevorg

    (@gev0rg)

    Thank you for your thoughts.

    I do understand the concept which you mention but I think it’s worthwhile to consider the scenario which I describe. It’s like a backdoor that circumvents the core concept of “Hide backend”.

    Is it possible to prevent the login of certain user roles, including admin, on the customer login page of for example WooCommerce, while not messing around with the default WordPress login which has been hidden with iThemes Security?

    What comes to my mind is to use certain keywords in admin- or shop manager user-names and redirect or block login-attempts which try to gain access through the customer login page, using credentials that contain those keywords.

    Would this mess around with the default WordPress login-procedure?

    Thread Starter Gevorg

    (@gev0rg)

    It has been more than two weeks that I posted this question, but so far no one from the development team has replied.

    It is a security issue that I raised here, a faulty concept if you will.

    If there is an alternative login-page, like the customer login-page from WooCommerce, then all the security measures involving “Hide backend” becomes nil and void. Because it is possible to login as administrator on the customer login-page which is not hidden behind a cryptic login-link.

    Can you please share your opinion regarding this issue? Are you aware of it?

    Thread Starter Gevorg

    (@gev0rg)

    Is there any reply from the developers concerning this issue?

    Thread Starter Gevorg

    (@gev0rg)

    Thank you for your help so far.

    I may continue with it tomorrow.

    If I find out something new I’ll post it here on this forum.

    Thread Starter Gevorg

    (@gev0rg)

    I had tried deleting all cookies several times.

    After your reply I also tried different browsers, old and new version browsers, but the error remains.

    Here some additional info that might help:

    After the migration to the live server there were some problems in WordPress Customizer. It would not accept any changes to be saved. A message would appear saying:

    A higher level of permission is needed

    This message would appear even for admin users who were trying to make changes in WordPress Customizer.

    I circumvented this by activating the following directive in the htaccess file:

    <IfModule mod_headers.c>
    Header always set X-Frame-Options "DENY" "expr=%{CONTENT_TYPE} =~ m#text/html#i"
</IfModule>

    This directive also helps to prevent the customizer from reloading the live preview of the website each and every time a tiny change is made to the settings. This htaccess directive got rid of the message “A higher level of permission is needed” and prevented the live preview of the website from being loaded, which makes working in WordPress Customizer much faster.

    But as I stated in my first post, I deactivated all non-essential settings in the htaccess file for the purpose of testing, including the directive mentioned above.

    However, if there is some kind of conflict with user permission levels still existing, then it may be effecting MetaSlider also.

    Any idea if the problem might be related to this?

Viewing 11 replies - 16 through 26 (of 26 total)