Eliminate billing information from the Woocommerce order management page on the backend

Is there a way to modify the text "Paid on" in the backend order details page of WooCommerce? I have already implemented this for BACS and local pickup payment methods.

Replace a specific word for BACS payment method in Woocommerce order edit pages

I am looking for a solution to hide the "Paid on" message when the shop manager changes the status back to "wait for payment" after setting it to "processing" where payment details are displayed.

Attached Image: Even though Order status is Deleted, it still shows payment details from the Completed status that was set previously.

https://i.sstatic.net/7dnD4.png

Thank you

Update:

I have blacked out some fields to protect customer information while sharing the screenshot :D

To better understand the issue, here is the replication process:

  • Customer places an order
  • Order initially has a custom status called "Verifying Stock"
  • Shop manager checks stock availability and changes the status to "Wait for payment" (BACS or local payment at local pickup)
  • Upon changing the status to "Processing", the header displays payment information like "Paid on" and "IP: ..."
  • If the shop manager reverts to a previous status like "wait for payment" from "processing", the "paid on" information remains unchanged and cannot be removed or updated again.

I need a solution to remove these details if the order status is different from processing or completed order status.

Thanks

csswordpresswoocommerceorderswoocommerce-theming

Answer №1

After reviewing the provided screenshot, I have successfully implemented the necessary logic for you.

To temporarily hide billing, shipping address, and IP address, you can utilize the following code snippet:

add_action( 'woocommerce_admin_order_data_after_order_details', 'hide_custom_details' );
function hide_custom_details($order) { 
  $status = array('processing','completed','refunded','cancelled');
  $order_status = $order->get_status();
  if(!in_array($order_status, $status)) { 
  ?>
  <style> 
     #order_data .order_data_column:nth-child(2),
     #order_data .order_data_column:nth-child(3),
     #order_data .woocommerce-order-data__meta.order_number .woocommerce-Order-customerIP{ 
           display: none !important 
     } 
  </style>
 <?php } 
}

If you need to make further updates, simply inspect (ctrl+shift+i) and copy the class/id that you wish to hide, then paste it into the provided CSS.

If you want the admin to have visibility into every detail, add ""!is_admin() &&"" inside the if condition as indicated in the commented section.

You also have the flexibility to modify the status according to your requirements.

https://i.sstatic.net/VpOqy.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Hovering over an image will not cause the floating header to appear

My attempt to create a header that fades with scroll and appears on hover is working perfectly, except for the cat pictures in the Portfolio section. Despite adjusting z-indexes and trying various solutions, the header just won't show up over the h4 e ...

htmlcss

The IntroJs step is only partially visible on the screen

Currently, I am incorporating introJS into my application and encountering an issue where one of the steps is only partially visible on the screen. Despite trying various position settings such as auto, left, right, etc., this particular item consistentl ...

javascripthtmlcssionic-frameworkintro.js

Moving the layout container towards the left: a quick guide

I am currently attempting to display the legend contents in a horizontal alignment within the layout container. The issue is that while the layout containing the legend aligns horizontally as desired, it extends beyond the screen border. I do not want the ...

javascripthtmlcssangular

Resolve the issue with the sticky positioning

I'm dealing with a table and struggling to make the CSS sticky position work. Can someone help me troubleshoot? .table_wrapper { width: 100%; height: 400px; overflow: auto; position: relativ ...

htmlcsscss-positionsticky

What is the procedure for adjusting the padding in Material UI's datepicker?

Click here to access the codesandbox link function InlineDatePickerDemo(props) { const [selectedDate, handleDateChange] = useState(new Date()); return ( <Fragment> <MuiPickersUtilsProvider utils={DateFnsUtils}> <Keyboa ...

cssreactjsmaterial-uidatepicker

Tips for designing a form action

I am a beginner and struggling with understanding the CSS for the code below. Can someone help me out? <div id="page-container"> <?php include_once("home_start.php"); ?> <h1>Login</h1> <for ...

css

Altering the vertical position of <li> within the nav bar without impacting the size of the nav bar is proving to be a

How can I adjust the vertical position of li elements without impacting the height of the navigation bar? Below is the code snippet in question: body { margin: 0px; } ul { margin: 0px; padding: 0px; list-style: none; padding-left: 5px; pad ...

htmlcssnav

What is the best way to customize the appearance of only one of two identical tables using HTML and CSS?

I have two tables that look identical: <html> <head> <style> td, th { text-align: left; padding: 28px; } </style> </head> <body> <table> <tr> ...

htmlcss

What is the best way to stack several elements on top of each other?

<div class="parent"> <div class="child" id="child-A"> <div class="child" id="child-B"> <div class="child" id="child-C"> </div> The main concept here ...

javascripthtmlcssreactjs

Enhancing user experience with CSS dropdown menu animations

I've been working on adding a dropdown transition to my menu, but I can't seem to get it right. Can anyone point out where I'm going wrong or what needs to be added for the transition effect on the dropdown menu? Here is the CSS and HTML cod ...

htmlcsstransition

Icon overlapping text from Font Awesome

Although my contact form is working well, I have noticed that the text in the message area tends to overlap with the icon as more content is added. Initially, everything aligns perfectly, but as the text extends, it ends up overlapping with the icon. Can ...

htmlcssbootstrap-4

Styling nested divs in CSS

I am experiencing an issue where the child divs within parent divs are overflowing outside of the parent divs. To get a better understanding of the problem, please try running the code below in a browser: My goal is to align the innermost divs horizontall ...

javascripthtmlcss

CSS-exclusive dropdown menu elements peeking out

I have been working on a CSS-only drop-down menu and I am encountering an issue where other content seems to be showing through. Despite my efforts, I can't figure out why this is happening. If you would like to take a look, here is the link: http:// ...

css

Exploring the integration of Tailwind CSS code within a basic HTML file for utilization in a React project

I have been incorporating Tailwind CSS code in my React projects, mostly within a CSS file using @apply. Now I am interested in transitioning to simple HTML with the Tailwind CDN. How can I make this switch seamlessly? Here is an example of what I current ...

htmlcssreactjstailwind-css

Changing the position of an image can vary across different devices when using HTML5 Canvas

I am facing an issue with positioning a bomb image on a background city image in my project. The canvas width and height are set based on specific variables, which is causing the bomb image position to change on larger mobile screens or when zooming in. I ...

javascriptcsscanvascordovahtml5-canvas

How can you alter the background color of a Material UI select component when it is selected?

I am attempting to modify the background color of a select element from material ui when it is selected. To help illustrate, I have provided an image that displays how it looks when not selected and selected: Select Currently, there is a large gray backgr ...

cssreactjstypescriptselectmaterial-ui

What about CSS block elements that have a width relative to their parent container

My goal is to create a layout where each h3 and p element is wrapped in a box. The current issue I'm facing is that the blocks extend to full width due to h3 and p being block level elements. The desired outcome is for the width of the boxes to adjus ...

cssblock

Footer not being pushed down by content in mobile view on page

Hello everyone, Can you assist me with a query, please? My form works perfectly fine in desktop view, but it gets cut off on mobile view and I'm unsure of the reason why. Here is my code: .upload-pic { position: absolute; max-width: au ...

htmlcsstwitter-bootstrapbootstrap-4

Exploring PHP Queries with Div Classes

I'm in desperate need of assistance. I'm currently working on putting together a website and pulling data from a mysql database. The specific div that I'm trying to populate is provided below. The issue I'm facing is how do I integrate ...

phpjqueryhtmlmysqlcss

The Process Behind Wordpress's HTML Generation for Blog Content

I am currently exploring the functionality of Wordpress in relation to blog posts, with hopes of implementing a similar feature in my own web application. While I understand that this involves some basic php knowledge, I seem to be struggling to uncover th ...

phpwordpress