In this comprehensive guide, we will explore how to hide order notes in WooCommerce. We’ll provide step-by-step instructions on how to achieve this using custom CSS code.
WooCommerce, the renowned WordPress plugin, empowers millions of online businesses by providing a robust platform for e-commerce operations. WooCommerce offers unparalleled flexibility and customization options, from managing products to handling orders.
However, despite its extensive feature set, there are times when you may wish to tailor the checkout process to suit your business needs better or enhance the user experience for your customers. One such customization involves hiding order notes during checkout.
Why Hide Order Notes in WooCommerce?
There are several reasons why a WooCommerce store owner might choose to hide the order notes field:
- Simplified Checkout – Streamlining the checkout process by removing unnecessary fields can reduce friction and improve the overall user experience.
- Brand Consistency – For businesses prioritizing a clean and minimalist design aesthetic, hiding order notes helps maintain visual consistency across the checkout page.
- Reduced Confusion – Eliminating the order notes field can prevent customers from feeling overwhelmed or unsure about whether they need to provide additional information.
How to Hide Order Notes in WooCommerce
We will use custom CSS code to hide the order notes field during checkout in WooCommerce. This code will target the specific elements responsible for displaying the order notes field and hide them from view. Follow these steps to implement the customization:
Step 1: Access Your WordPress Dashboard
Log in to your WordPress dashboard using your administrator credentials.
Step 2: Navigate to the Customizer
From the WordPress dashboard, go to Appearance > Customize. This will launch the WordPress Customizer interface.
Step 3: Access Additional CSS
Within the Customizer, look for the option labeled “Additional CSS.” Click on it to open the CSS customization panel.
Step 4: Insert Custom CSS Code
Copy the following CSS code snippet and paste it into the “Additional CSS” panel:
.wc-block-checkout__add-note {
display: none;
}
.wc-block-checkout__terms {
display: none;
}
This CSS code targets the classes responsible for displaying the order notes field and the terms and conditions checkbox on the WooCommerce checkout page, hiding them from view.
Step 5: Publish Changes
Once you’ve added the custom CSS code, click the “Publish” button to save your changes and make them live on your website.
Step 6: Test the Checkout Process
Visit your website and proceed to the checkout page to ensure that the order notes field and the
terms and conditions checkbox are no longer visible. Test the checkout process thoroughly to confirm that the customization has been applied successfully.
Why Use the Code Snippet
- If you are new to editing the code on a WordPress site, you may break your site.
- If you have many changes, code snippets tend to be cumbersome to update since some may require an update with every WooCommerce software update. (If the hooks or filters you are using change, the code snippet may no longer work.)
- Code snippets may create vulnerability to your website security since they are from different sources (third-party developers).
- Code snippets are freely available and with no upfront costs.
- Code snippets can be quick to implement for experienced developers who can customize them further.
What is the Alternative Solution
While code snippets do great work and get the job done quickly, they have some drawbacks, and that's the reason plugins exist.
Plugins are ideally organized code snippets that are scalable, dependable, and professionally written to help you keep your site safe and customize it with ease.
To make your work easier, I have put together my 10+ years of experience into a highly useful WooCommerce product (Whideit) that is geared toward hiding all unwanted elements on your store without wasting time.
- Using Hideit is easy, and you can simply click a button to immediately disable the Add to Cart button along with the price and several other features you may want to hide from users.
- I specifically designed it to help with my day-to-day work on client projects. I found it very useful and decided to share it with the WooCommerce community.
- If you are interested, you can find it here. As one of my blog readers, do not forget to subscribe to my mailing list using the form below so that you can CLAIM your 20% OFF introductory discount for WHIDEIT.
- I also occasionally send important updates in WooCommerce to help you update or keep your site up and running effectively and safely. You can also reach out if you need any further customization or help with hiding any feature on your WooCommerce store.
Conclusion
By hiding the order notes field in WooCommerce, you can create a more streamlined and user-friendly customer checkout experience. This customization allows you to tailor the checkout process to align with your business goals and branding preferences. Remember to periodically review and update your website’s customizations to ensure optimal performance and user satisfaction. With the flexibility and power of WooCommerce customization options, you can continue to optimize and enhance your online store to meet your customers’ evolving needs.