CommunityCategory: SIP Advanced Email Rules for WooCommerceDisplay Product Name Inline false line break
Corvin Schwarzer asked 2 weeks ago

Hello ShopitPress,
 
I want t display the product name within one sentence. But If I use the shortcode, in the final email is a line break:
https://www.dropbox.com/s/s5molwjzjc190y4/Annotation%202020-02-10%20092027.jpg?dl=0
In the editor, that is one line: https://www.dropbox.com/s/arvw5i7p6md9f0y/Annotation%202020-02-10%20092131.jpg?dl=0
Have you an idea, how to fix the bug? I am using the newest version of your plugin.
 
Best regards

2 Answers
Macky M. Staff answered 2 weeks ago

Hello Corvin

Can you share and forward the email that has the linebreak?

I am not able to recreate your issue as it works perfectly fine on a vanilla WordPress.

Corvin Schwarzer answered 2 weeks ago

Sure, here is the message source:

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xmlns:v=”urn:schemas-microsoft-com:vml” xmlns:o=”urn:schemas-microsoft-com:office:office”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<!– So that mobile will display zoomed in –><meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<!– enable media queries for windows phone 8 –><meta name=”format-detection” content=”telephone=no”>
<!– disable auto telephone linking in iOS –><!–link href=”https://fonts.googleapis.com/css?family=Montserrat:400,500&#8243; rel=”stylesheet”–><!–[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]–><style>

@media screen {
@font-face{
font-family: ‘Montserrat’;
font-style: normal;
font-weight: 400;
font-display: swap;
src: local(‘Montserrat Regular’), local(‘Montserrat-Regular’), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format(‘woff2’);
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
}

body {

font-family: ‘Montserrat’;

background-color:;
margin: 0;
padding: 10px;
}
.header, .title, .subtitle, .footer-text {
font-family: ‘Montserrat’;
}
.container-padding {
padding-left: 24px;
padding-right: 24px;
}
.header {
font-size: 50px;
font-weight: normal;
font-style: normal;
color: 020202;
background: FFFFFF;
font-family: ‘Montserrat’;
text-align: center!important;
padding: 10px 24px 12px 24px;
line-height: 1.2;
text-decoration: none;
}
.header a {
font-size: 50px;
font-weight: normal;
font-style: normal;
color: 020202;
font-family: ‘Montserrat’;
text-decoration: none;
}
.header-image {
height: auto;
vertical-align: top;
border: none;
}
.full-width-header-image {
width: 100%;
display: block;
}
.footer-text, .footer-text th, .footer-text td, .footer-text li {
font-size: 12px;
line-height: 16px;
color: #aaaaaa;
background: C81A2E;
}
.footer-text a, .footer-text th a, .footer-text td a, .footer-text li a {
color: #aaaaaa;
}
.footerlink {
font-size: 11px;
text-transform: uppercase;
text-decoration: underline;
}
.container {
width: 600px;
max-width: 600px;
}
.content {
padding-top: 12px;
padding-bottom: 12px;
background-color: #FFFFFF;
}
code {
background-color: #eee;
padding: 0 4px;
font-family: Courier, monospace;
font-size: 12px;
}
hr {
border: 0;
border-bottom: 1px solid #cccccc;
}
.hr {
height: 1px;
border-bottom: 1px solid #cccccc;
}
.abst {
border-top: 1px solid #C81A2E;
border-bottom: 1px solid #C81A2E;
text-align: center;
font-size: 22px;
}
h1{
border-top: 1px solid #C81A2E;
border-bottom: 1px solid #C81A2E;
text-align: center;
font-size: 22px;
padding: 2px;
letter-spacing: 4px;
margin-top: 0px;
color: #000000 !important;
/* margin-left: -24px !important;
margin-right: -24px !important;*/

}

.site_border_top
{
border-top: 1px solid #C81A2E;
}

h1 {
font-size: 25px;
font-weight: normal;
font-style: normal;
color: #c81a2e;
font-family: ‘Montserrat’;
text-align: center;
}
h2, h3, h4 {
font-size: 20px;
font-weight: normal;
font-style: normal;
color: #000000;
font-family: ‘Montserrat’;
text-align: left;
}
.subtitle {
font-size: 16px;
font-weight: 600;
color: #2469A0;
}
.subtitle span {
font-weight: 400;
color: #999999;
}
.body-text, .body-text td, .body-text th, .body-text li {
font-family: ‘Montserrat’;
font-size: 14px;
color: #000000;
font-weight: normal;
font-style: normal;
line-height: 1.5;
}
.body-text, .body-text td, .body-text th {
text-align: left;
}
a {
color: #808080;
font-weight: normal;
font-style: normal;
text-decoration: underline;
}
.body-text .content-twocol td, .body-text .content-twocol h1, .body-text .content-twocol h2, .body-text .content-twocol h3, .body-text .content-twocol h4 {
text-align: left;
vertical-align: top;
}
body {
margin: 0;
padding: 0;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
table {
border-spacing: 0;
}
table td {
border-collapse: collapse;
}

#site_content_table table tr:first-child td
{
padding: 0px !important;
}

.ExternalClass {
width: 100%;
}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%;
}
.ReadMsgBody {
width: 100%;
background-color: ;
}
table {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode: bicubic;
}
a.footerlink {
font-size: 12px;
text-decoration: none;
}
.yshortcuts a {
border-bottom: none !important;
}
.site_w70px
{
width:70px;
}

/**** ADD CSS HERE ****/

@media(max-width:575px)
{

.site_w70px
{
width:100% !important;
}

.site_w70px a
{
display: block;
margin: 0 15px !important;
}
}

@media screen and (max-width: 599px) {
table[class=”force-row”], table[class=”container”] {
width: 100% !important;
max-width: 100% !important;
}
}
@media screen and (max-width: 400px) {

td[class*=”container-padding”] {
padding-left: 12px !important;
padding-right: 12px !important;
}
.header-image {
max-width: 100% !important;
}
table[class*=”content-twocol”] {
float: none;
}
table[class*=”content-twocol”], table[class*=”content-twocol”] p, table[class*=”content-twocol”] h1, table[class*=”content-twocol”] h2, table[class*=”content-twocol”] h3, table[class*=”content-twocol”] h4 {
text-align: left!important;
}

}
@media screen and (max-width: 400px) {
} /**** ADD MOBILE CSS HERE ****/

.ios-footer a {
color: #aaaaaa !important;
text-decoration: underline;
}
</style>
</head>
<body style=”background-color: ; font-family: ‘Montserrat’; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; margin: 0; padding: 0;”>
<span style=”display:none; visibility:hidden; font-size: 1px !important;”>Da hat etwas nicht geklappt
Hey Corvin,
&nbsp;
Wir möchten Dir wirklich gerne Deine Mietung für Deinen Testsweater ohne Asset

abschließen – dafür brauchen wir nun Deine Mithilfe!
U</span>
<!– 100% background wrapper (grey background) –>
<table border=”0″ width=”100%” height=”100%” cellpadding=”0″ cellspacing=”0″ class=”###plugin-class###” style=”border-spacing: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #fff;”><tr>
<td align=”center” valign=”top” style=”border-collapse: collapse;”>
<br><table id=”holder” class=”container” border=”0″ cellspacing=”0″ cellpadding=”0″ style=”border-spacing: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; max-width: 600px!important;” align=”center”>
<tr>
<td align=”center” style=”border-collapse: collapse;”><table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ style=”border-spacing: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt;”><tr>
<td style=”border-collapse: collapse;”>
<!–[if (gte mso 9)|(IE)]>
<table id=”outlookholder” class=”container” width=”600″ border=”0″ cellspacing=”0″ cellpadding=”0″ align=”center”><tr><td>
<![endif]–>
<!–header-table–>

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ style=”border-spacing: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt;”><tr>
<td class=”container-padding0 header” align=”center” style=”border-collapse: collapse; background: FFFFFF; color: 020202; font-family: ‘Montserrat’; font-size: 50px; font-style: normal; font-weight: normal; line-height: 1.2; padding: 10px 24px 12px 24px; text-align: center!important; text-decoration: none;”> <a href=”https://half-the-battle.com&#8221; style=”color: 020202; font-family: ‘Montserrat’; font-size: 50px; font-style: normal; font-weight: normal; text-decoration: none;”><img class=”header-image” src=”https://half-the-battle.com/wp-content/uploads/2019/10/htb.gif&#8221; style=”-ms-interpolation-mode: bicubic; border: none; height: auto; vertical-align: top; width: ;” height: alt=”Half the Battle”></a> </td>

<td class=”site_w70px” style=”width: 70px; border-collapse: collapse; color: #000; font-size: 18px; font-weight: 700; text-align: center;”>
<a style=”display: block; margin: 0 15px !important; color: #000; font-style: normal; font-weight: normal; text-decoration: none; font-family: ‘Montserrat’;” href=”https://half-the-battle.com/styles/”>Styles</a&gt;
</td>

<td class=”site_w70px” style=”width: 70px; border-collapse: collapse; color: #000; font-size: 18px; font-weight: 700; text-align: center;”>
<a style=”display: block; margin: 0 15px !important; color: #000; font-style: normal; font-weight: normal; text-decoration: none; font-family: ‘Montserrat’;” href=”https://half-the-battle.com/art/”>Art</a&gt;
</td>

<td class=”site_w70px” style=”width: 70px; border-collapse: collapse; color: #000; font-size: 18px; font-weight: 700; text-align: center;”>
<a style=”display: block; margin: 0 15px !important; color: #000; font-style: normal; font-weight: normal; text-decoration: none; font-family: ‘Montserrat’;” href=”https://half-the-battle.com/marken/”>Marken</a&gt;
</td>

</tr></table>
</td>
</tr></table></td>
</tr>
<tr>
<td style=”border-collapse: collapse;”>
<!–p class=”abst” style=”color: #000; padding: 2px; letter-spacing: 4px; margin-top: 0px;”>Style in Transit</p–>
</td>

</tr>
</table>
<!–/header-table–><!–content-table–><table id=”site_content_table” width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ style=”border-spacing: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; max-width: 600px!important;”><tr>
<td class=”content” align=”” style=”border-collapse: collapse; background-color: #FFFFFF; padding-bottom: 12px; padding-top: 12px; padding: 0px !important;”><div class=”body-text” style=”color: #000000; font-size: 14px; font-style: normal; font-weight: normal; line-height: 1.5; text-align: left; font-family: ‘Montserrat’;”>
<table width=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″ id=”” style=”border-spacing: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt;”><tr>
<td class=”container-padding” style=”border-collapse: collapse; padding-left: 24px; padding-right: 24px; color: #000000; font-family: ‘Montserrat’; font-size: 14px; font-style: normal; font-weight: normal; line-height: 1.5; text-align: left; padding: 0px !important;”>
<h1 style=”border-bottom: 1px solid #C81A2E; border-top: 1px solid #C81A2E; color: #000000 !important; letter-spacing: 4px; margin-top: 0px; padding: 2px; font-family: ‘Montserrat’; font-size: 25px; font-style: normal; font-weight: normal; text-align: center;”>Da hat etwas nicht geklappt</h1>
<br>
Hey Corvin,<br><br>
&nbsp;<br><br>
Wir möchten Dir wirklich gerne Deine Mietung für Deinen <a href=”https://half-the-battle.com/ausleihen/testsweater-ohne-asset/&#8221; style=”color: #808080; font-style: normal; font-weight: normal; text-decoration: underline;”>Testsweater ohne Asset</a><br><br><br>
abschließen – dafür brauchen wir nun Deine Mithilfe!<br><br>
Unser Zahlungsdienstleister hat uns soeben mitgeteilt, dass es leider nicht möglich war, den Blockungsbetrag auf Deiner Kreditkarte zu reservieren.<br><br>
Du wirst Dich nun vermutlich Fragen: <strong>Was bedeutet das überhaupt?</strong><br><br>
Die kurze Antwort: Du hast schon einmal einen Mietwagen gebucht? Dann machen wir auch nichts anderes.<br><br>
Die längere Antwort findest Du bei unseren <a href=”https://half-the-battle.com/haeufige-fragen/&#8221; style=”color: #808080; font-style: normal; font-weight: normal; text-decoration: underline;”><u>häufigen Fragen</u></a> unter dem Stichwort “Bezahlen mit Kreditkarte”.<br><br>
In Deinem Fall war die Reservierung leider nicht möglich. In der Regel liegt das daran, dass Du vor kurzem einige Einkäufe mit Deiner Kreditkarte getätigt hast und sich dadurch das Limit Deiner Kreditkarte verringert hat.<br><br>
Damit wir Dir trotzdem Deinen Style zuschicken können, <strong>überweise</strong> einfach den noch fehlenden Betrag von Deinem Girokonto auf Deine Kreditkarte. Damit erhöhst du kurzfristig das Limit Deiner Kreditkarte. Das nun erhöhte Kreditkartenlimit siehst Du direkt bei Deinem Online-Banking.<br><br>
In ein paar Stunden wird unsere Bank noch einmal eine Reservierung versuchen. Sofern nun genug Geld auf Deiner Kreditkarte vorhanden ist, freuen wir uns, Dir Dein Piece direkt einpacken und zuschicken zu können. Andernfalls wirst Du direkt eine Fehlermeldung per Mail erhalten.<br><br>
Wir wollen immer offen und ehrlich mit Dir sein und hoffen, dass wir Dir mit dieser Mail alle Fragen beantworten konnten. Wir wissen Dein Vertrauen in uns sehr zu schätzen.<br><br>
Falls Du noch Fragen haben solltest, antworte uns einfach direkt auf diese E-Mail.<br><br>
&nbsp;<br><br>
Wir freuen, Dir hoffentlich bald Deinen Style zuschicken zu können!<br><br>
Dein Team hinter Half The Battle
</td>
</tr></table>
</div></td>
</tr></table>
<!–/content-table–><!–footer-table–><!–<p class=”abst”>

</p–><table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ style=”border-spacing: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; max-width: 600px!important;”><tr>
<td class=”container-padding footer-text” align=”center” style=”border-collapse: collapse; font-family: ‘Montserrat’; padding-left: 24px; padding-right: 24px; background: C81A2E; color: #aaaaaa; font-size: 12px; line-height: 16px; padding: 0px !important;”> <p><style>
/* Media query for displaying content in mobile email clients */
@media only screen and (max-device-width: 480px) {
.hide { max-height: none !important; font-size: 12px !important; display: block !important; }
}
/* CSS for hiding content in desktop/webmail clients */
.hide { max-height: 0px; font-size: 0; display: none; }
.wp-image-1726 {margin-right: 12px;}
hr {
border: 1px solid #C81A2E;
}
</style></p>
<div class=”hide” style=”display: none; font-size: 0; max-height: 0px;”><a href=”whatsapp://send?text=half-the-battle.com&quot; data-action=&quot;share/whatsapp/share” style=”font-style: normal; font-weight: normal; text-decoration: underline; color: #aaaaaa;”><img class=”wp-image-1725 hide aligncenter” src=”https://half-the-battle.com/wp-content/uploads/2019/05/200px-WhatsApp.svg-150×150.png&#8221; alt=”” width=”35″ height=”35″ style=”-ms-interpolation-mode: bicubic; display: none; font-size: 0; max-height: 0px;”></a></div>
<p><a href=”https://www.facebook.com/sharer/sharer.php?u=https%3A//half-the-battle.com&#8221; style=”font-style: normal; font-weight: normal; text-decoration: underline; color: #aaaaaa;”><img class=”wp-image-1726 aligncenter” src=”https://half-the-battle.com/wp-content/uploads/2019/10/32.png&#8221; alt=”” width=”35″ height=”35″ style=”-ms-interpolation-mode: bicubic; margin-right: 12px;”></a> <a href=”https://www.instagram.com/halfthebattleshop/&#8221; style=”font-style: normal; font-weight: normal; text-decoration: underline; color: #aaaaaa;”><img class=”wp-image-1727 aligncenter” src=”https://half-the-battle.com/wp-content/uploads/2019/10/32insta.png&#8221; alt=”” width=”35″ height=”35″ style=”-ms-interpolation-mode: bicubic;”></a></p>
<p style=”text-align: center;”><span style=”color: #170e0eab;”>Half the Battle (HTB) UG (haftungsbeschränkt)<br>St.-Getreu-Str. 36 A, 96049 Bamberg</span></p>
<p style=”text-align: center;”><span style=”color: #170e0eab;”>Du hast noch Fragen? <a style=”font-style: normal; font-weight: normal; text-decoration: underline; color: #170e0eab;” href=”https://half-the-battle.com/kontaktiere-uns/”>Melde dich einfach!</a></span></p>
<p style=”text-align: center;”><span style=”color: #170e0eab;”><a style=”font-style: normal; font-weight: normal; text-decoration: underline; color: #170e0eab;” href=”http://half-the-battle.com/impressum/”>Impressum</a></span><span style=”color: #170e0eab;”><span style=”color: #333333;”><span style=”color: #170e0eab;”> | <a style=”font-style: normal; font-weight: normal; text-decoration: underline; color: #170e0eab;” href=”http://half-the-battle.com/agb”>AGB</a&gt; | <a style=”font-style: normal; font-weight: normal; text-decoration: underline; color: #170e0eab;” href=”http://staging1.half-the-battle.com/datenschutzbelehrung/”>Datenschutzerklärung</a&gt; | <a style=”font-style: normal; font-weight: normal; text-decoration: underline; color: #170e0eab;” href=”http://half-the-battle.com/widerrufsbelehrung/”>Widerrufserklärung</a></span></span></span></p&gt; <br>
</td>
</tr></table>
<!–/footer-table–><!–[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]–>
</td>
</tr></table>
</body>
</html>

Please check. If you need admin access to my page/ftp, just write me a line.
Thanks!

Macky M. Staff replied 1 week ago

Hello

I meant the actual email. You can forward it to [email protected]

However, upon looking at the HTML source you sent, there is indeed some between the product name and the following text.
Can you make sure that you created the email template under the “Text” tab and not under Visual? Also, you may have copy/pasted some parts of the email template and that can create unintended html elements.