CreateIT
CreateIT
BLOG

WooCommerce – net / gross price display

Net and Gross prices

WooCommerce – net / gross price display

SHARE

Challenge:
improve page loading speed by eliminating blocking resources
Solution:
use the Async JavaScript plugin and the style_loader_tag filter

For wholesale shops, it’s important to display prices in net and gross values. By default, it’s quite difficult to achieve this using WooCommerce settings. We’re going to create a custom function to do that.

Overwrite price.php

Two WooCommerce templates price.php are safely overwritten in our theme. Doing this in the theme, we’re ensuring feature compatibility in case of a WooCommerce plugin update.

<?php
/**
 * wp-content/themes/mytheme/woocommerce/loop/price.php
 */
if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}
global $product;
ct_display_2_prices($product);

And a similar change for the single product view:

<?php
/**
 * wp-content/themes/mytheme/woocommerce/single-product/price.php
 */
if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}
global $product;
ct_display_2_prices($product);
?>
<div class="clearfix"></div>
<br>

Product price information

For a standard product, we can display the final price (before and after the tax). However, variable product price is typically displayed only after proper variants are chosen from selects. For variable products we will just display the minimal price available for the cheapest variant configuration (prefix: From: ). The price is properly formatted using the PHP function: number_format (2 decimal places).

/**
 * Net / Gross woocommerce price
 */
function ct_display_2_prices($product){
    $netto_price = wc_get_price_excluding_tax( $product );
    $brutto_price = wc_get_price_including_tax( $product );
    $with_tax_html = '';
    if(!empty($netto_price)){
        $tax_rate =  round(($brutto_price / $netto_price - 1) * 100);
        $with_tax_html = '<span class="withTaxBadge">'. $tax_rate .'%<br><em>VAT</em></span>';
    }
    $prefix = '';
    if ( $product->is_type( 'variable' ) ) {
        $prefix = _x( 'From:', 'min_price', 'woocommerce' );
    }
    ?>
    <?php if ( $price_html = $product->get_price_html() ) : ?>
        <span class="price">
            <span class="price--netto"><?php echo $prefix; ?> <?php echo ct_format_price($netto_price); ?></span>
        <?php echo $prefix; ?> <?php echo ct_format_price($brutto_price); ?><?php echo $with_tax_html; ?></span>
    <?php endif;
}
function ct_format_price($price, $decimal_separator = '.'){
    if(empty($price)){
        return '';
    }
    $unit = number_format( intval( $price ), 0, $decimal_separator, ',' );
    $decimal = sprintf( '%02d', ( $price - intval( $price ) ) * 100 );
    return $unit . '<small>' . $decimal_separator. $decimal . '</small>';
}

Styling the WooCommerce price

SCSS styles have been added to add some basic look. Now we have net and gross prices displayed on product listing and a single product view.

// wp-content/themes/mytheme/assets/scss/woocommerce/_shop.scss
.price {
  font-size:1.2rem !important;
  color:#000 !important;
  .price--netto {
    color:$lightdark;
    display:block;
  }
  .withTaxBadge {
    text-align:center;
    color:$dark;
    font-size: 0.5em;
    display: inline-block;
    margin-left:5px;
    line-height:1;
    em {
      background:$lightdark;
      color:#fff;
      padding: 2px;
      display: inline-block;
      line-height: 1;
      border-radius: 3px;
      margin-top:2px;
    }
  }
}

WordPress

WordPress

That’s it for today’s tutorial. Be sure to follow us for other useful tips and guidelines.

 

Need help?

  • Looking for support from experienced programmers?

  • Need to fix a bug in the code?

  • Want to customize your webste/application?

ADD COMMENT

Your email address will not be published.

createIT Contact