Get a free advice now!

    Pick the topic

    [checkbox* "Developer Outsourcing" "Web developing" "App developing" "Digital Marketing" "eCommerce systems" "eEntertainment systems"]

    Thank you for your message. It has been sent.

    Tags

    WooCommerce – net / gross price display

    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.

    Comments
    0 response

    Add comment

    Your email address will not be published. Required fields are marked *

    Popular news

    PHPStorm – fix long load time of a directory window
    • Dev Tips and Tricks

    PHPStorm – fix long load time of a directory window

    January 20, 2023 by createIT
    reCAPTCHA v3 – WordPress implementation
    • Dev Tips and Tricks

    reCAPTCHA v3 – WordPress implementation

    January 20, 2023 by createIT
    How to compare GIT and server files
    • Dev Tips and Tricks

    How to compare GIT and server files

    January 19, 2023 by createIT
    How to trigger a click event inside iframe?
    • Dev Tips and Tricks

    How to trigger a click event inside iframe?

    January 19, 2023 by createIT
    FOOEvents – generate a custom CSV report
    • Dev Tips and Tricks

    FOOEvents – generate a custom CSV report

    January 19, 2023 by createIT
    Headless chrome – testing webgl using playwright
    • Dev Tips and Tricks

    Headless chrome – testing webgl using playwright

    January 18, 2023 by createIT
    Preview big SQL files with PilotEdit
    • Dev Tips and Tricks

    Preview big SQL files with PilotEdit

    January 18, 2023 by createIT
    Outsourcing a team of backend developers
    • Our Highlights

    Outsourcing a team of backend developers

    January 18, 2023 by createIT
    A new look for an aspiring brand
    • Our Highlights

    A new look for an aspiring brand

    January 18, 2023 by createIT
    Percy AI visual regressions – playwright example
    • Dev Tips and Tricks

    Percy AI visual regressions – playwright example

    January 17, 2023 by createIT

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

    Contact us