How to hide Woocommerce “out of stock” items price

问题:

I'd like to display my out of stock items, but without price in WooCommerce. Is there any easy way to hide price of "out of stock" items?

Thanks!

回答1:

Adding these to the CSS worked for me. The first one removes the price from the out of stock item's page and the second removes the price from the out of stock item in search results.

.outofstock .price{display:none}

.outofstock .amount{display:none}

回答2:

Create a file price.php in /your-theme/woocommerce/single-product/ folder. Paste the following code.

$pricelabel = ""; - will be the variable that will display instead of the price if the stock quantity is 0.

If you use $pricelabel = ""; - this will remove the price. You can try $pricelabel = "SOLD OUT!"; or whatever message you want to display if you want.

I actually wrote this code to display a text message instead of a particular price. I just changed it to check stock quantity instead of price.

<?php
/**
 * Single Product Price, including microdata for SEO
 *
 * @author      WooThemes
 * @package     WooCommerce/Templates
 * @version     1.6.4
 */

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

global $post, $product;
?>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">

    <p class="price"> <?php 
        $stockamount = $product->get_stock_quantity();
        $price = $product->get_price_html();
        $pricelabel = "";
        if($stockamount == 0)
        {
            echo $pricelabel;
        }
        else
        {
            echo $price;            
        }; 
    ?>
    </p>

    <meta itemprop="price" content="<?php echo $product->get_price(); ?>" />
    <meta itemprop="priceCurrency" content="<?php echo get_woocommerce_currency(); ?>" />
    <link itemprop="availability" href="http://schema.org/<?php echo $product->is_in_stock() ? 'InStock' : 'OutOfStock'; ?>" />

</div>

回答3:

In cases like this I use CSS.

I would typically go use Chrome's inspect element (or any code browser), find the class of the Out of Stock price (could be something like .outOfStockPrice).

Then I would use something like Simple Custom CSS to apply my custom CSS (so I do not have to look for a specific file: http://wordpress.org/plugins/simple-custom-css/)

And add this to your custom css:

.outOfStockPrice {
   visibility: hidden;
}

For more info on hiding elements using CSS: http://www.kirupa.com/html5/hiding_things_using_css.htm

回答4:

very simple, woocommerce still add outofstock class to the whole page so use that and than price

this will work

.outofstock .price{display:none}