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.

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.

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

Creating an overlay button within various containing divs requires setting the position of the button

Tips for overlaying a button on each HTML element with the class WSEDIT. My approach involves using a JavaScript loop to identify elements with the CSS class WSEDIT, dynamically create a button within them, and prepend this button to each element. Below ...

javascriptjquerycsshtmlcss-float

`Text-overflow ellipsis should function consistently across both Firefox and Chrome browsers`

A design has been created to showcase captions for articles and their respective statuses. The article name box has a fixed width, with text-overflow:ellipsis applied to trim excessively long names. Additionally, a light grey dotted line is added at the en ...

htmlcssgoogle-chromefirefoxellipsis

Tips for aligning the button and search bar in the center:In order

Currently still learning HTML, I'm facing an issue with centering a button and a search bar that are positioned beside each other. Despite trying multiple methods, I haven't been successful in achieving the desired centered layout while keeping t ...

htmlcss

Refresh the page and witness the magical transformation as the div's background-image stylish

After browsing the internet, I came across a JavaScript script that claims to change the background-image of a div every time the page refreshes. Surprisingly, it's not functioning as expected. If anyone can provide assistance, I would greatly appreci ...

javascriptjqueryhtmlcss

Is it possible to avoid widows in CSS without the need for extra HTML elements?

I have a snippet of text that is controlled within a Content Management System. The CMS restricts the use of HTML or special characters such as &nbsp; or <span>. Despite my attempts to adjust margins and padding, I cannot achieve the desired out ...

htmlcsscontent-management-systemwhitespaceword-wrap

The correct way to reference images in the resources folder using a URL in CSS

After I generated a Maven dynamic web project using an archetype, I decided to organize the javascript, css, and image folders under the webapp folder. The structure now looks like this: myproject | main | | | java | | | resources | | ...

cssmaven

Achieve a sliding effect between two divs using CSS only

I'm trying to create a design with 2 divs that are the same size. The first one is visible by default, while the second one is hidden initially. My goal is to achieve an effect where when you hover over the first div, the second one slides upward and ...

htmlcssanimation

Click-triggered CSS animations

Trying to achieve an effect with regular JS (not jQuery) by making images shake after they are clicked, but running into issues. HTML: <img id='s1_imgB' class="fragment"... onClick="wrongAnswer()"... JS: function wrongAnswer(){ docume ...

javascriptcsshtmlreveal.js

React Material Design Cards for Responsive Layouts

Hi there, I am currently navigating my way through Material Design and attempting to ensure that the cards section is responsive by utilizing media queries and flex. However, I have encountered an issue where only a portion of the image is displayed when t ...

cssreactjsresponsive-designmaterial-design

"Utilizing social links in web design for a seamless user experience

I'm currently exploring ways to repair the design of social media links. The GitHub and Spotify icons are displaying at different sizes, and it seems like the Blogger icon is not aligning correctly: Referring to How To Create Social Media Buttons - ...

htmlcssicons

Unable to render Material Icons on Vue/Quasar web app hosted on Azure

I am facing an issue with my webapp built using Vue and Quasar. I added the necessary icon imports to my quasar-user-options.js file. import '@quasar/extras/material-icons/material-icons.css' import "@quasar/extras/material-icons-outlined/ma ...

cssvue.jsazure-web-app-servicequasar-frameworkmaterial-icons

Hovering over an element will change its background color along with adjusting the background

I encountered a situation with the following code: CSS: <style> div.testy { border:1px solid black; } div.testy:hover { background-color:red; } </style> HTML: <div class="testy" style="height:100px; back ...

htmlcsshoverbackground-color

Using HTML and CSS to create a line break between div elements

Currently, I am working on a page that allows users to post comments. However, I have encountered an issue with the div element that contains the posted message. When the message is too long and lacks line breaks, a horizontal scrollbar appears. I would li ...

asp.nethtmlcss

Ensure that clicking on an element closes any currently visible elements before opening a new element

Take a look at my code snippet below. I am working on creating multiple clickable divs that reveal different content when clicked. However, the issue I am facing is that currently, both content blocks can be displayed simultaneously. My goal is to have onl ...

javascripthtmljquerycss

What could be causing my PHP Code to prevent the saving of an unchecked Custom Checkbox in WooCommerce?

I have been working on a WordPress website that includes WooCommerce functionality. One of the tasks I undertook was creating a Custom Checkbox Field, which is visible in the WooCommerce Product Dashboard. The code snippet below demonstrates how I added th ...

phpwordpresswoocommerceproductcustom-fields

The z-index of the fixed header in FullPageJS is causing the section's content to be hidden

For my current project, I am incorporating FullPageJS and using a fixed top menu that adjusts its height based on the viewport size. On smaller screens, the menu items will be stacked on top of each other, while on wider screens, the menu items will be po ...

jqueryhtmlcssfullpage.js

Duplicating a concealed div and transferring it to a new div

I'm encountering an issue while trying to copy one div to another. The div I'm attempting to copy has a hidden parent div. The problem is that the destination div does not appear after copying, even though I changed its style display to block. ...

javascriptjqueryhtmlcsscopy

Disappearing input field in DateTimePicker Bootstrap when blurred

Currently, I am utilizing the Bootstrap DateTimePicker plugin to enable users to select a specific date and time. The plugin functions well with one minor issue - whenever the user clicks outside or loses focus on the calendar box, both the box itself and ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for breaking out of an infinite loop while loading HTML containing a carousel into a blank <div> within another HTML file using jQuery's $(document).ready() function

Currently, I am studying HTML, CSS, Bootstrap 4, jQuery3, and JavaScript (ES6+), and to enhance my skills, I have devised an exercise for practice and consolidation. I have created 4 HTML files, all featuring responsive design based on Bootstrap 4: inde ...

jqueryhtmlcssajaxbootstrap-4

Using Javascript and CSS to Float DIV Elements

Recently, I've been working on a small algorithm that adds a special class to an element when the mouse reaches the halfway point or beyond on the X-axis of the browser. I also have a screenshot that demonstrates where this application will be utiliz ...

javascripthtmlcss