CSS Order Notes in myaccount

I don’t think that would work. Could you set up a customer user (so ensure no admin rights), make a customer note and post the login credentials. This is so the page can be examined with browser tools.

https://animers.com.br/index.php/my-account/view-order/13/
User: test
pss: 123456

Thanks

Try this custom css:

ul.order_notes {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.order_notes li {
  margin-bottom: 12px;
}
ul.order_notes li.system-note .note_content {
  position: relative;
  margin-bottom: 8px;
  padding: 4px 12px;
  color: #000;
  background: #d7cad2;
}
ul.order_notes li .note_content::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -10px;
  left: 20px;
  width: 0;
  height: 0;
  border-width: 10px 10px 0 0;
  border-style: solid;
  border-color: #d7cad2 transparent;
}
ul.order_notes li.system-note .note_content p {
  margin: 0;
  color: #000;
}

Custom css can be entered at:
Dashoard > Appearance > Customize > Additional CSS

Worked perfectly!
Is there a way for me to include it in my plugin?
I have a plugin that has the file myaccount-woocommerce.php and I wanted the CSS to be inserted in the installation of my plugin, instead of being inserted into the theme.
It’s possible?

Hi there!

Your child theme would be the best place to store your styling. Here’s more information about creating a child theme: https://developer.www.ads-software.com/themes/advanced-topics/child-themes/

You shouldn’t modify a plugin since changes would be overridden in updates, but you can look into writing a new plugin to add the changes to the original plugin: https://codex.www.ads-software.com/Writing_a_Plugin. This would be an overkill though if you only need to add some styling and not function changes.

Yes, you shouldn’t modify someone else’s plugin. But is this a plugin that you are writing to expose the order notes? If so, the best way to include the styles would be as a separate .css file in your plugin folder. Your plugin file myaccount-woocommerce.php file would enqueue the style sheet, as shown in your first post but with the appropriate paramters.

Yes, the plugin is mine, not a third party.
I would like to call the CSS so that when I install the plugin, it will be applied directly.
Using a theme child, I would have to apply CSS manually, with each new installation.
I know the best way would be to use wp_enqueue_style but I don’t know where to apply it within php.

function animers_woocommerce_order_details_before_order_table( $order ) { ?>
<h2 class=”woocommerce-order-details__title”>Histórico do Pedido</h2>
<div class=”collapsible-orders”>
<ul class=”order_notes” style=”display: flex; flex-direction: column-reverse;”>
<?php
$order_id = $order->get_id();

$order_notes = get_private_order_notes( $order_id );
echo $order->get_status();
if ( $order->get_status() == ‘completed’ || $order->get_status() == ‘processing’ ) :
foreach($order_notes as $note) {
$note_id = $note[‘note_id’];
$note_date = $note[‘note_date’];
$note_author = $note[‘note_author’];
$note_content = $note[‘note_content’];

$haystack = $note_content;

?>

<li class=”note system-note”>
<div class=”note_content”>
<?php echo ‘<p>’.$note_content.'</p>’; ?>
</div>
<p class=”meta”>
<abbr class=”exact-date” title=”<?php echo $note[‘note_date’]; ?>”><?php echo $note[‘note_date’]; ?></abbr>
</p>

<?php }

endif; ?>

</div>

<?php }

// before first function

add_action( 'wp_loaded', 'tt_register_all_scripts' );
function tt_register_all_scripts() {
  wp_register_style( 'tt_styles', plugin_dir_url( __FILE__ ).'front.css', array(), '1.00' );
}
  
add_action( 'wp_enqueue_scripts', 'tt_enqueue_front_scripts' );
function tt_enqueue_front_scripts() {
  wp_enqueue_style( 'tt_styles' );
}

worked perfectly!
Thank you very much Lorro