CSS code for layout changes

  • Hello Brett
    Thank you for Woo Email Customiser. It’s helped me personalise my WooCommerce emails. I’ve done a fair bit but there do not seem to be options to change the following:
    – moving the order date from beside the order number in Heading 2 of the email templates to the right hand side of that very same line;
    – aligning the contents in the Quantity column of the order table to the centre;
    – aligning the contents in the Price table of the order table to the right (i.e. in a way that lines them all up on the dollars and cents line);
    – changing the width of the billing address box to full page or larger than it is. It seems to be wrapping lines (e.g. customer name using up 2 line not one, even though there’s enough room).

    Would you know of the CSS code I need to use to address each of the above?
    Many thanks for whatever help you can give me,
    FRan

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 19 total)
  • Thread Starter frand001

    (@frand001)

    sorry – typo: aligning contents in the Pricing column (as written in bullet point 3).
    Thank you.

    Can you send me a screen shot of what you are seeing in the editor so I have a better idea of what you want?

    Ben

    Thread Starter frand001

    (@frand001)

    Hello Ben
    Thanks for your reply.
    Re screen shots… I have taken a snip of each but can’t seem to attach it here to send you. Sorry. Not a huge expert with stuff like this. The link to the page I am referring to is https://www.alns.com.au/wp-admin/customize.php?kt-woomail-customize=1&url=https%3A%2F%2Fwww.alns.com.au%2F%3Fkt-woomail-preview%3D1.
    If that’s not how you need me to send the shot, can you please advise how I can?
    Sorry Ben. Thanks for your help.

    Thread Starter frand001

    (@frand001)

    Sorry Ben… Think I’ve got it.
    Here are the links to the two screen shots.
    The one for the order table (by bullet points 1 to 3): https://www.alns.com.au/wp-content/uploads/2019/04/Shot-of-ALNS-email-template-order-table-10Apr19.jpg

    The one for the billing address field/results: https://www.alns.com.au/wp-content/uploads/2019/04/Shot-of-ALNS-email-template-billing-address-10Apr19.jpg

    I hope that’s done it!

    Hey,
    Thanks for the images.

    1. That, unfortunately, isn’t possible. You can do something kind of similar by going to content > order items > “ORDER TABLE HEADING STYLE” and changing that to split instead of normal. But that will move the Heading 2 above and add a line below that has the order number and order date.

    2. You can add this into the custom css box:

    #body_content_inner table.td tbody tr td:nth-child(2) {
    text-align: center !important;
}

    3. you can add this css:

    #body_content_inner table.td tbody tr td:nth-child(3), #body_content_inner table.td thead tr th:nth-child(3), #body_content_inner table.td tfoot tr td:nth-child(2) {
    text-align: right !important;
}

    It’s worth note that both of those styles are mostly achieved by selecting the “light” table style in your content > order items > “ORDER TABLE STYLE”.

    4. If there is no shipping address the billing address is already fullwidth. The forced new lines are part of the output for the billing address, not an issue of limited space.

    You wrote: “It seems to be wrapping lines (e.g. customer name using up 2 line not one, even though there’s enough room).”

    The customers first and last name in your image is “Sherlock Holmes” which is on one line, the next line is the customers “company” which in the mockup order is “Detectives Ltd.”. You can’t make those one line with css because of how the email outputs the address.

    Does that help?

    Ben

    Thread Starter frand001

    (@frand001)

    Thanks for your advice Ben. It all sounds kosher and I will test it next week once I’ve churned to my new web host.

    Thanks for being so responsive. I really appreciate it.

    Thread Starter frand001

    (@frand001)

    Hello Brett
    Apologies for the delay in responding to your last email. I’ve just inserted the code and the realignments have taken effect. THANK YOU.
    One last question… if I want the subtotal and total lines to appear in bold, what custom CSS code do I need to insert?
    Thanks for your help. The email looks much cleaner!
    Fran

    hannah

    (@hannahritner)

    Hi Fran,
    Try adding this css:

    tfoot span.woocommerce-Price-amount.amount {
    font-weight: bold;
}

    Does that work for you?

    Hannah

    Thread Starter frand001

    (@frand001)

    Hello Hannah
    Thanks for your help. If I use that code, All three lines – subtotal, tax and total – are bolded. I only want to bold the subtotal and total lines. Would you know how I do that please?
    Fran

    Hey,
    There are no specific classes for subtotal or total that would allow you to target those consistently. It’s best to target all of the items in in the table footer output. You can use a nth-child selector but if your order has a return line added or a note then it would throw off what you intend to select.
    Meaning there is no way to do this consistently unless you code it into the woocommerce function that outputs those lines into the email.

    I hope that clarifies.

    Ben

    Thread Starter frand001

    (@frand001)

    Hello Ben
    Sorry for the delay and thanks for your reply. Major bummer re your news but, still, I’m closer to my ideal than I was. Re your comments though… if I wanted to test your thoughts above, what code would I use and where would I need to input it?
    Thanks again for all of your help. I really appreciate it and my email templates are looking much better.
    Fran

    I strongly do not recommend this but you can add this css in the custom css box where you edit the emails, just go to the custom styles section.

    table.td tfoot tr:nth-last-child(1) .amount, table.td tfoot tr:nth-last-child(2) .amount {
    font-weight:bold;
}

    Ben

    Thread Starter frand001

    (@frand001)

    Thanks again, Ben. You are far more qualified to make a call on this matter so I’ll follow your advice above. I appreciate your candour and help with all of the above.
    Travel well!
    Fran

    Thread Starter frand001

    (@frand001)

    Hello Ben
    How’s everything? I hope your July is starting well. I’m wondering if you can help me with some more formatting changes in my WooCommerce Shop. I’ve posted to the WordPress forum for WooKit but wonder if I’m better contacting you. I certainly don’t want to waste your time but you helped me so much last time. Is there any way of you looking at my questions and/or me sending them through to you via this thread? I’m happy to send the links to the topics I’ve posted if you are okay with doing this.
    Hoping this is kosher and thanks for any help you can give.
    Fran

    Hard to know without context, is this for a specific theme?

    Ben

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘CSS code for layout changes’ is closed to new replies.