How to Show Only Sale Price in WooCommerce: A Beginner’s Guide
So, you’re running a sale in your WooCommerce store, and you want to highlight the fantastic discounted prices, right? Instead of showing both the regular and sale price, you might prefer to only display the tempting sale price. This creates a cleaner, more focused presentation that draws customers’ eyes directly to the savings.
This article will guide you through the easy steps to achieve this, even if you’re a complete WooCommerce newbie. Think of it as decluttering your shop window to make the irresistible offer shine.
Why Only Show the Sale Price?
Before diving into the how-to, let’s understand *why* you might want to do this.
* Reduced Clutter: Seeing too much information can be overwhelming. Displaying only the sale price eliminates unnecessary noise, making your products more appealing at a glance. Think of it like a restaurant menu – too many options can lead to decision paralysis!
* Focus on Savings: Highlighting the discounted price grabs attention and emphasizes the value customers are getting. It’s a psychological trick that can boost sales. Imagine seeing a dress listed at “Usually $50, now $25” vs. just “Sale: $25.” The single price is direct and impactful.
* Clean and Professional Look: A simplified design often appears more professional and trustworthy. Showing only the sale price contributes to a cleaner, more modern look for your online store.
Methods for Displaying Only the Sale Price
There are several ways to accomplish this. We’ll explore the easiest and most recommended method using a code snippet. This is usually preferable as it doesn’t rely on potentially bloated plugins.
#### Using a Code Snippet (Recommended)
This method involves adding a small piece of PHP code to your website. Don’t worry, it’s simpler than it sounds!
1. Access Your Theme’s `functions.php` File:
The easiest way to do this is through the WordPress admin dashboard:
- Go to Appearance > Theme File Editor. IMPORTANT: Always back up your theme before making edits! Many hosts provide easy backup solutions. It’s a lifesaver if something goes wrong.
- On the right-hand side, find the `functions.php` file. (It might be called `theme-functions.php` in some themes). It’s *crucial* you’re editing the correct file for your *active child theme*, if you’re using one. Editing the parent theme directly will lose your changes on the next theme update. If you don’t have a child theme, now is a great time to create one!
2. Add the Code Snippet:
Copy and paste the following code snippet at the *very end* of your `functions.php` file:
add_filter( 'woocommerce_get_price_html', 'custom_sale_price_display' );
function custom_sale_price_display( $price ) {
global $product;
if ( $product->is_on_sale() ) {
$sale_price = wc_get_price_to_display( $product, array( ‘price’ => $product->get_sale_price() ) );
$price = wc_price( $sale_price );
}
return $price;
}
3. Save Changes:
Click the “Update File” button at the bottom of the Theme File Editor.
What does this code do?
- `add_filter( ‘woocommerce_get_price_html’, ‘custom_sale_price_display’ );`: This line hooks into the WooCommerce function that generates the price HTML. It tells WordPress to use our custom function `custom_sale_price_display` instead.
- `global $product;`: This makes the `$product` object (containing product information) available to our function.
- `if ( $product->is_on_sale() ) { … }`: This checks if the product is currently on sale.
- `$sale_price = wc_get_price_to_display( $product, array( ‘price’ => $product->get_sale_price() ) );`: This retrieves the formatted sale price.
- `$price = wc_price( $sale_price );`: This replaces the original price HTML with just the sale price, formatted with the currency symbol.
- `return $price;`: This returns the modified price HTML to WooCommerce.
Example:
Let’s say a t-shirt normally costs $20, but is on sale for $10. Without this code, WooCommerce might show “$20 $10”. With this code, it will only show “$10”. Much cleaner, right?
Important Considerations:
* Child Theme: As mentioned before, always use a child theme when modifying theme files. This prevents your changes from being overwritten when you update your theme.
* Syntax Errors: Be careful when copying and pasting code. A single misplaced character can break your website. Double-check your work.
* Testing: After adding the code, clear your website’s cache and check your product pages to ensure the sale prices are displaying correctly.
* Reversibility: To revert this change, simply remove the code snippet from your `functions.php` file.
Alternative (Less Recommended): Using a Plugin
While the code snippet is the preferred method, some users may feel more comfortable using a plugin. There are WooCommerce plugins that offer options to customize price display. However, be mindful of plugin bloat; avoid using a plugin just for this simple functionality.
If you choose a plugin:
- Research and choose a reputable plugin with good reviews and active support.
- Only install necessary plugins to avoid slowing down your website.
- Keep your plugins updated.
Conclusion
Showing only the sale price in WooCommerce is a simple yet effective way to boost sales and improve the user experience on your online store. By using the code snippet provided, you can achieve this quickly and easily. Remember to always back up your theme and test your changes before making them live. Happy selling!
