Html added to ‘Order item title’ disappears on save

Hello @japenz,

Good day!

Thanks for contacting us.

Please let me check this with dev unit and get back to you as soon as possible. Please be patient.

Best regards,

Mia

Hi @mialewp,
Thank you for taking a look at this for me, much appreciated ??

I have another question, though if it’s better if I open a new support thread let me know.

In the email general settings there’s an option to ‘DISPLAY PAYMENT INSTRUCTION AND DETAILS’,
but it seems this setting can’t be set differently for different email types.

Is there any way I can set it to ‘Yes’ or ‘Only for customer’ in the ‘Order on hold’ template, and set it to ‘No’ in the ‘Completed order’ email?

My concern is that showing the payment instructions in the ‘Completed order’ email may prove confusing.

• This reply was modified 5 months, 3 weeks ago by JapeNZ.

Hi @japenz ,

Let me quickly address the 2nd question…

You can set the general one to NO, then use this shortcode to display payment instructions in which ever email template you want to have it:

[yaymail_payment_instruction]?

Regarding the 1st question, please note that you cannot style that with HTML, you can use CSS via the CSS options section:

https://docs.yaycommerce.com/yaymail/the-settings-panel/customize-with-css

You can use thisclass to style for it:

yaymail_builder_link

Hope that suffices.

Regards,
Bruce

Hi @ninjateamwp,
Thank you for you help!

I’m able to use the shortcode to add the payment details, but for some reason the spacing is different compared to selecting ‘Yes’ in the ‘DISPLAY PAYMENT INSTRUCTION AND DETAILS’.

The shortcode removes page breaks I think.
Here’s an image with the payment details added via shortcode (top) and DISPLAY PAYMENT INSTRUCTION AND DETAILS >Yes on the same email template: https://ibb.co/mRcj6nR

Is there a way to retain the spacing?

Also I have a bunch of custom css I’m trying to use, but none of it seems to be work.
It looks exactly how I’d like in the customizer, but isn’t applied to the emails that are sent.

Here’s the css I’m trying to use:

.yaymail_builder_bank_details {
color: #349b36 !important;
font-size: 20px !important;
margin-bottom: 6px;
}

.yaymail_builder_wrap_account ul {
margin: 0 0 20px !important;
font-size: 15px;
}

.yaymail_builder_link span {
font-weight: 700 !important;;
}

.yaymail_item_product_content {
display: flex;
}

.yaymail-product-image {
align-content: center;
margin-bottom: 0 !important;
}

.yaymail-product-texts {
align-content: center;
padding: 0 !important;
}

.yaymail_item_subtoltal_title, .yaymail_item_subtoltal_content {
border-top: 1px solid rgb(229, 229, 229) !important;
}

.yaymail_order_items_content {
border-style: solid none !important;
}

th.td.yaymail_item_product_title, th.td.yaymail_item_product_content {
border-bottom: none !important;
}

.yaymail-items-border-content .td {
border-style: solid none !important;
padding: 8px 0 !important;
font-size: 15px !important;
}

.yaymail-product-texts ul.wc-item-meta {
padding: 0 !important;
margin: 0 !important;
}

.yaymail-product-texts ul.wc-item-meta li {
margin: 0;
}

strong.wc-item-meta-label {
font-weight: 300 !important;
font-size: 13px;
}

.yaymail-product-texts ul.wc-item-meta p {
word-wrap: normal;
display: inline;
}

.yaymail_item_quantity_title, .yaymail_item_quantity_content {
text-align: center !important;
}

.yaymail-items-border-content th:last-of-type {
text-align: right !important;
padding-left: 24px !important;
}

.yaymail_item_total_content span.woocommerce-Price-amount.amount {
font-weight: 700;
}

small.includes_tax span.woocommerce-Price-amount.amount {
font-weight: normal !important;
}

small.includes_tax {
display: block;
}

.yaymail_shipping_address_content address {
font-style: normal !important;
border: none !important;
padding: 0 !important;
}

.yaymail_billing_address_content address {
font-style: normal !important;
border: none !important;
padding: 0 !important;
min-width: 140px !important;
}

h2.title-billing, h2.title-shipping {
margin-bottom: 0 !important;
}

.yaymail_shipping_address_content table address span, .yaymail_billing_address_content table address span {
font-size: 15px !important;
}

Any idea why it isn’t being applied to the emails, but is being applied in the customizer?

Also, as I can’t use html to add a line break and change the font size and colour of the second half of the ‘Order item title’, and idea how I might be able to split it so the date floats right?
I’ve been tring to get it to work with css but it’s proving to be way above my pay grade ??

Thanks again for your help!

Hi @japenz ,

1. You can use this CSS to style the Order Item ID:

.yaymail_builder_link {color:#555; font-weight:300; font-size:15px;}

2. Can you give a clearer comparison screenshot showing what you need to achieve with the types of Payment Instructions Notes?

3. Also, what exactly do you mean by “second half of the ‘Order item title’ “? Can you indicate that in a screenshot, please?

Regards,
Bruce

Hi @ninjateamwp,

1. Unfortunately this isn’t what I was trying to accomplish with html, here’s an image of how it looks with the html mentioned earlier (Order #[yaymail_order_id]<br><h2 style=”color:#555; font-weight:300; font-size:15px;”/>Order date:</style> [yaymail_order_date]): https://ibb.co/3BfR1XC

2. So the top half of the image (https://ibb.co/mRcj6nR) is the result when I use the shortcode ([yaymail_payment_instruction]), and the bottom half is how it looks using the ‘DISPLAY PAYMENT INSTRUCTION AND DETAILS’ option, and how I would like it to look using the shortcode.
For some reason the shortcode removes ‘<br>’ from the Woocommerce payment instructions.

3. Yes sorry, I didn’t explain that very well at all… doh!
So assuming the line break and font changes pictured above (1) can’t be done with just css, as an alternative would it be possible the have Order #[yaymail_order_id] on the left and ‘Order date [yaymail_order_date]’ float right?

Thanks again for your help!

• This reply was modified 5 months, 3 weeks ago by JapeNZ.

Hi @japenz ,

1. The solution for “CSS does not work” cases is usually this:

• You have to always append “!important”
• Please use plugin “Preview Emails for WooCommerce” to inspect the element since some elements have different class names and IDs between YayMail’ s customizer and real email
  
  2. Regarding the line spacing in the?[yaymail_payment_instruction]?, please try adding margin/padding for paragraphs.
  Also, please check out this syntax error in your html:
  https://drive.google.com/file/d/1CDNLRpYRTF_0ibHhRVUqTxeonBvR6hbv/view?usp=sharing
  
  3. To make order id on the left and order date on the right in the same row, please use this code:
  <p>Order #[yaymail_order_id]<span style="color: #555; font-weight: 300; font-size: 15px; float: right;">Order date:</span> [yaymail_order_date]</p>
  https://drive.google.com/file/d/1udcp2ag1lvu9HoUYFq2gIeffWEThegFp/view?usp=sharing

Please make sure to add it via source code view mode:
https://drive.google.com/file/d/1FZ1TOeBWBVUyceSha3V6dW_M1zogyogL/view?usp=sharing

Kind regards,
Alina

• This reply was modified 5 months, 3 weeks ago by alina98.