WooCommerce: How to Hide the “View Invoice” Button (and Why You Might Want To)
Introduction:
WooCommerce is a powerful e-commerce platform, offering extensive customization options. One common customization request is removing the “View Invoice” button from customer order details. This button, usually prominent on the order received page and within the customer’s “My Account” section, links to the invoice generated by your chosen WooCommerce invoicing plugin. While convenient in some scenarios, there are reasons why you might want to hide it. This article will explore those reasons and provide several methods to effectively hide the “View Invoice” button within your WooCommerce store. We’ll cover both code-based solutions and, where applicable, settings within popular invoicing plugins, helping you tailor your store’s experience to your specific needs.
Main Part: Hiding the “View Invoice” Button
Before we dive into the “how,” let’s briefly cover the “why.” You might want to hide the “View Invoice” button for these reasons:
- Branding and Customer Experience: You might prefer to send invoices directly to customers via email, maintaining a consistent brand experience and preventing confusion.
- Specific Billing Processes: Your accounting system might handle invoices differently, rendering the automatically generated invoice redundant or even misleading.
- PDF Invoice Customization: If you offer highly customized invoices, you might want to ensure customers only see the finalized, professionally designed version, not a default, automatically generated one.
- Security Concerns: In rare cases, you might want to restrict access to invoice details for specific customer roles or order statuses.
Now, let’s explore the methods to hide the button.
1. Using Code (Functions.php or a Code Snippet Plugin)
This method requires adding a code snippet to your theme’s `functions.php` file or using a code snippet plugin like “Code Snippets.” Always back up your site before making any code changes!
The exact code will depend on *how* the “View Invoice” button is being added in the first place. Common scenarios include:
* If the button is added directly by your theme or a plugin using a WooCommerce action/filter:
You can typically remove the action/filter that adds the button. Here’s a general example, assuming the action is named `woocommerce_view_invoice_button`:
function remove_view_invoice_button() { remove_action( 'woocommerce_view_invoice_button', 'your_plugin_or_theme_function', 10 ); // Replace 'your_plugin_or_theme_function' with the actual function name and priority. } add_action( 'wp_loaded', 'remove_view_invoice_button' );
Important: You’ll need to inspect your theme’s or plugin’s code to identify the correct action and function name. Use a tool like a code editor with search functionality or your browser’s developer tools to find where the button is being added.
* If the button is being added through a template override:
In this case, the best approach would be to identify the template being overridden and either:
- Remove the button HTML: Edit the overridden template file directly and delete the HTML code responsible for displaying the button. *Be extremely careful when doing this as edits will be overwritten during theme updates.*
- Use a CSS snippet (Less Recommended): While less ideal, you could use CSS to hide the button. This is generally not the *best* practice as the HTML is still loaded, but it can be a quick fix. Find the button’s CSS class or ID using your browser’s developer tools (right-click on the button and select “Inspect”) and then add CSS like this to your theme’s stylesheet or custom CSS area:
.invoice-button { /* Replace with the actual class or ID */
display: none !important;
}
Why is CSS less recommended? It hides the button visually but doesn’t remove the underlying code. A more experienced user might still be able to access the invoice URL directly.
2. Plugin-Specific Settings (e.g., WooCommerce PDF Invoices & Packing Slips)
Many popular WooCommerce invoicing plugins provide built-in settings to control the visibility of the “View Invoice” button. For example, with the “WooCommerce PDF Invoices & Packing Slips” plugin:
1. Go to WooCommerce > PDF Invoices > General Settings.
2. Look for options related to “Display invoice button on My Account page” or similar.
3. Disable the relevant option.
4. Save your changes.
Always consult the documentation of your specific invoicing plugin for details on how to disable the button within its settings. This is often the simplest and most reliable method.
3. Using a Custom Code (More Advanced)
For more granular control, you could add a custom code to hide the button based on specific conditions, such as user roles or order statuses. Here’s an example that hides the button for all users except administrators:
function hide_invoice_button_for_non_admins( $actions, $order ) { if ( ! current_user_can( 'administrator' ) ) { unset( $actions['view_invoice'] ); } return $actions; } add_filter( 'woocommerce_my_account_my_orders_actions', 'hide_invoice_button_for_non_admins', 10, 2 );
This snippet filters the `woocommerce_my_account_my_orders_actions` filter, which is responsible for defining the available actions on the “My Orders” page. It checks if the current user is *not* an administrator and, if so, removes the “view_invoice” action. This would need to be adapted to work with any custom action name implemented by your theme/plugins.
Conclusion:
Hiding the “View Invoice” button in WooCommerce is a Learn more about How To Set Up Woocommerce Account Page common customization that can improve the user experience, streamline billing processes, and ensure brand consistency. By using the methods described above, you can easily remove or conditionally hide the button, depending on your specific requirements. Remember to back up your website before making any code changes and to consult your invoicing plugin’s documentation for the most accurate and reliable instructions. Choosing the right method ensures you achieve your desired outcome without disrupting other aspects of your store. Finally, always test thoroughly to confirm the button is hidden as expected across different user roles and order statuses.
