How to Remove the .00 (Cents) from WooCommerce Prices: A Beginner’s Guide
So you’re running a WooCommerce store and you’ve noticed something that’s bugging you: all your prices are showing with `.00` at the end, even when the actual price is a whole number (like $20.00 instead of $20). You want to clean things up and just show whole dollar amounts? You’ve come to the right place! This guide will walk you through a few simple ways to remove those pesky cents.
Let’s face it, visually, it can feel cleaner and more direct to show whole dollar amounts, especially if most of your products are priced that way. Think about it like a restaurant menu: “$20” looks more straightforward and less cluttered than “$20.00.”
Why Remove the .00?
Before we jump in, let’s briefly consider why you might want to do this:
* Aesthetics: A cleaner, less cluttered look, especially if all your prices are whole numbers. It can make your product catalog seem more modern and streamlined.
* Improved Readability: For some customers, seeing just the whole dollar amount can make pricing quicker and easier to understand.
* Branding: It might better align with your overall brand image, especially if you are going for a simplified or minimalist aesthetic.
However, remember that removing cents might not be ideal if you regularly use decimal pricing (like $19.99). Make sure it aligns with your pricing strategy.
Method 1: Using the WooCommerce Settings (Easiest!)
This is the most straightforward method, Check out this post: Woocommerce How To Make Products Unavailable To Specific Regions and it’s usually all you need. WooCommerce provides built-in settings to control how prices are displayed.
1. Log in to your WordPress Admin Dashboard. This is usually at `yourdomain.com/wp-admin`.
2. Navigate to WooCommerce > Settings. You’ll find it in the left-hand menu.
3. Click on the “General” tab. This tab contains most of the basic store settings.
4. Look for the “Currency options” section. You’ll find settings related to your currency.
5. Locate the “Number of decimals” field. This is the key! It’s likely set to “2” by default.
6. Change the “Number of decimals” field to “0”. This tells WooCommerce *not* to display any digits after the decimal point.
7. Click the “Save changes” button. Make sure to scroll down and save your changes.
That’s it! Go back to your shop page and check if the prices are displayed correctly. You should now see whole numbers without the `.00`.
Method 2: Using a Code Snippet (For More Control)
If the setting above doesn’t work as expected, or if you need more granular control, you can use a code snippet. This method requires a little bit of comfort with code, but it’s still relatively simple.
Important: Before making any code changes, it’s highly recommended to create a child theme or use a code snippets plugin. This prevents your changes from being overwritten when you update your theme. A popular and beginner-friendly option is the “Code Snippets” plugin.
Here’s the code snippet you can use:
add_filter( 'woocommerce_price_trim_zeros', '__return_true' );
Explanation:
* `add_filter()`: This is a WordPress function that allows you to modify the behavior of other functions.
* `’woocommerce_price_trim_zeros’`: This is a specific filter in WooCommerce that controls whether trailing zeros are removed from prices.
* `’__return_true’`: This is a shorthand way to tell WordPress to always return `true` when this filter is applied. In this case, it tells WooCommerce to *always* trim the zeros.
How to add the code using the “Code Snippets” plugin:
1. Install and activate the “Code Snippets” plugin from the WordPress plugin repository (Plugins > Add New).
2. Go to Snippets > Add New.
3. Give your snippet a descriptive title (e.g., “Remove WooCommerce Price Zeros”).
4. Paste the code snippet into the “Code” area.
5. Set the snippet to “Run snippet everywhere”.
6. Click “Save Changes and Activate”.
This code will remove the trailing `.00` from prices that are whole numbers.
Alternative: Add the Code to your theme’s functions.php file (Not recommended for beginners!)
Warning: Editing your theme’s `functions.php` file directly can be risky. If you make a mistake, it can break your website. Only do this if you are comfortable with code and have a backup.
1. Connect to your website via FTP or using your hosting provider’s file manager.
2. Navigate to your theme’s directory. This is usually located at `/wp-content/themes/your-theme-name/`.
3. Edit the `functions.php` file. Find the file and open it in a text editor.
4. Add the code snippet to the *end* of the `functions.php` file. Be careful not to add it inside any existing functions.
5. Save the file.
Troubleshooting
* Cache Issues: After making changes, your browser and website cache might be displaying old versions of your pages. Try clearing your browser cache and any caching plugins you have installed. WooCommerce also has its own cache that you might need to clear (WooCommerce > Status > Tools > Clear template cache).
* Theme Conflicts: In rare cases, your theme might be overriding the WooCommerce price formatting. If you’ve tried both methods above and the `.00` still persists, try temporarily switching to a default WordPress theme (like Twenty Twenty-Three) to see if that resolves the issue. If it does, the problem lies with your theme. Contact your theme developer for assistance.
* Plugin Conflicts: Similar to theme conflicts, another plugin might be interfering with the price formatting. Try deactivating your plugins one by one to identify the culprit.
Removing the `.00` from your WooCommerce prices is a simple tweak that can make a noticeable difference in the overall appearance of your store. Choose the method that you’re most comfortable with, and remember to test your changes thoroughly. Good luck!
