CSS not working with text I added via php

  • Resolved jazzu

    (@jazzu)


    2 years, 10 months ago

    Hi!

    I added some additional text via php. I added the code to customer-on-hold-order.php. The code I added is: 

    <div id="indent">
<p><?php esc_html_e( '?' , 'woocommerce' ); ?></p>
</div>

<div id="sklic">
<p><?php esc_html_e( 'Referenca (sklic): SI 00 ' . $order->get_order_number() , 'woocommerce' ); ?></p>
</div>

    I added this code because I need to display a reference number. It currently looks like THIS, however I need it to look like THIS

    I added custom style to it, wrote some CSS, so it looked alright in the preview. However, when I sent the email, the CSS didn’t do anything and it was like it wasn’t even there. I added this CSS:

    #indent {
transform:translate(25px , 1000px);
pointer-events: none !important;
}

#sklic {
transform:translate(40px , 1000px) !important;
}

    Hope we manage to sort this out.

    Kind regards

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

Viewing 6 replies - 1 through 6 (of 6 total)

  • transform CSS is not going to support email clients. You better add your custom text in the correct position using the hooks or editing the email template files. You can use padding and margin to add space/gap.

    Thread Starter jazzu

    (@jazzu)

    Hi @vijayhardaha

    Thank you for your feedback.
    Well, sadly I don’t know how to use hooks as I don’t know almost anything about php. I tried changing the position of the code, but then it didn’t even want to load the email, so there’s that.

    It’s ok if you don’t know about the hooks. You can simply edit the email template.

    I assume you’re adding the code above the do_action( 'woocommerce_email_order_details', $order, $sent_to_admin, $plain_text, $email ); line so you just need to change the position for ref. code custom code.

    Thread Starter jazzu

    (@jazzu)

    Hi @vijayhardaha

    How can I edit the position without using transform? Margin and padding will move all the elements when I move them

    I cannot tell that without seeing what and how you’re customizing things. if You have basic HTML and CSS knowledge you can easily do that on your own otherwise I will suggest hiring a developer to get the customization done properly.

    Thread Starter jazzu

    (@jazzu)

    Hi,

    I tried multiple things- margin, top, position, etc. and it all just leaves blank space. I don’t know if this is something I can fix with CSS or with HTML.. It just sucks that it’s one of the last things with this website ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘CSS not working with text I added via php’ is closed to new replies.