How to get woocommerce price attributes

Question

Im trying to get the following information on a woocommerce single product page in order to replace the default price style of woocommerce.

When Item is on sale, I want to be able to get the original price and discounted price and echo it inside a dive for further styling. Im trying to achive something like this.

<div id="orig-price">Original Price: <?php echo $price; ?></div>
<div id="sale-price">Sale Price: <?php echo $sale-price; ?></div>
<div id="saved">You saved: <?php $saved=$price-$saleprice; echo $saved; ?></div>

I tried opening price.php but did not find what I am looking for. here is what I get.

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">

    <p class="price"><?php echo $product->get_price_html(); ?></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><?php echo $sale_price_in_percent; ?></div>

</div>

Am I on the right place? Anyone know how can I access these attributes?

Thanks

Answer 1

Main function for displaying prices is get_price_html() in /woocommerce/includes/abstracts/abstract-wc-product.php file, and there are some filters to allow users to customize the html for prices:

• woocommerce_sale_price_html
• woocommerce_price_html
• woocommerce_empty_price_html
• woocommerce_free_sale_price_html
• woocommerce_free_price_html
• woocommerce_get_price_html

This function performs a complete job for showing prices including taxes and on sale calculations, and since you are completely rewriting the html the example below uses last filter there woocommerce_get_price_html. It extracts the prices from the original HTML and insert them into a new HTML structure.

add_filter( 'woocommerce_get_price_html', function( $price, $product ) 
{ 
    global $woocommerce_loop;

    // check if we are in single product page, in main section, and if product has price and is on sale
    if ( is_product() && !isset( $woocommerce_loop ) && $product->get_price() && $product->is_on_sale() ) {

        // collect prices from $price html string
        $prices = array_map( function( $item ) {        
            return array( $item, (float) preg_replace( "/[^0-9.]/", "", html_entity_decode( $item, ENT_QUOTES, 'UTF-8' ) ) );           
        }, explode( ' ', strip_tags( $price ) ) );

        $price = isset( $prices[0][0] ) ? '<span class="orig-price">Original Price: ' . $prices[0][0] . '</span>' : '';
        $price .= isset( $prices[1][0] ) ? '<span class="sale-price">Sale Price: ' . $prices[1][0] . '</span>' : '';

        if ( $product->get_regular_price() ) {
            // set saved amount with currency symbol placed as defined in options
            $price .= '<span class="saved">You saved: ' . sprintf( get_woocommerce_price_format(), get_woocommerce_currency_symbol(), $prices[0][1] - $prices[1][1] ) . '</span>';      
        }
    }

    return $price;

}, 10, 2 );

I'm using span tags here instead of divs used in question because the output is still wrapped in a paragraph. For further customization override the price.php template by placing him inside /themes/yourtheme/woocommerce/single-product/ folder.

Answer 2

This can be achieved by overriding woocommerce template. Create a new PHP file, write your div structure in that file.

Now refer this article on How to override template in WooCommerce

Hope this will move you in right direction