WooCommerce – net / gross price display - createIT
Get a free advice now!

    Pick the topic
    Developer OutsourcingWeb developingApp developingDigital MarketingeCommerce systemseEntertainment systems

    Thank you for your message. It has been sent.

    WooCommerce – net / gross price display

    December 16, 2021
    Last update: February 8, 2023
    2 min read
    19
    0
    0
    WooCommerce – net / gross price display

    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;
        }
      }
    }
    Two product previews in the form of column listings with a place for an image and product data below
    Preview of a product purchase window

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

    Support – Tips and Tricks
    All tips in one place, and the database keeps growing. Stay up to date and optimize your work!

    Contact us