Get a free advice now!

    Pick the topic

    Developer OutsourcingWeb developingApp developingDigital MarketingeCommerce systemseEntertainment 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

    Digital marketing without third-party cookies – new rules
    • Technology
    • Trends

    Digital marketing without third-party cookies – new rules

    February 21, 2024 by createIT
    eCommerce healthcheck
    • Services
    • Trends

    eCommerce healthcheck

    January 24, 2024 by createIT
    Live Visitor Count in WooCommerce with SSE
    • Dev Tips and Tricks

    Live Visitor Count in WooCommerce with SSE

    December 12, 2023 by createIT
    Calculate shipping costs programmatically in WooCommerce
    • Dev Tips and Tricks

    Calculate shipping costs programmatically in WooCommerce

    December 11, 2023 by createIT
    Designing a cookie consent modal certified by TCF IAB
    • Dev Tips and Tricks

    Designing a cookie consent modal certified by TCF IAB

    December 7, 2023 by createIT
    Understanding the IAB’s Global Vendor List (GVL)
    • Dev Tips and Tricks

    Understanding the IAB’s Global Vendor List (GVL)

    December 6, 2023 by createIT
    Effortlessly transform JSON data into a clear schema
    • Uncategorized

    Effortlessly transform JSON data into a clear schema

    December 5, 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