1

I have created this piece of code that displays the price on any page on the website, which is controlled by woocommerce.

add_shortcode( 'hhs_product_price', 'hhs_woo_product_price_shortcode' );

function hhs_woo_product_price_shortcode( $atts ) {

    $atts = shortcode_atts( array(

        'id' => null

    ), $atts, 'hhs_product_price' );
 

    if ( empty( $atts[ 'id' ] ) ) {

        return '';

    }

    $product = wc_get_product( $atts['id'] );

    if ( ! $product ) {

        return '';

    }

    return $product->get_price_html();
}

What I would like to do is modify the code so that if a customer selects a product with a variation. Then the price changes to display the variation price. For example right now if a person selects a product, in this case a tincture bottle, with a price variation connected to the size of the bottle. On the products page they see the following:-

Product (Tincture) $30 - $50

From a drop down menu they can select an option of either 10mg bottle ($30), 15mg bottle ($40), or 20mg bottle ($50). So if a person selects option 20mg the price should display $50 instead of $30 - $50

I have already looked at various posts on stackoverflow with a similar problem but non of those solutions are working for me

Any help would be greatly appropriated.

Thank you

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
Nikhil Puthu
  • 23
  • 6
  • Please provide more information about your problem into your post. For example I do not know what red black and green is, how green selection manifests in your code and what should happen on red or black selection. You need to imagine yourself into our shoes and imagine the case when you wanted to answer this question with the amount of information you have provided. You will probably understand then that you have not provided enough information. – Lajos Arpad Aug 01 '20 at 11:26

2 Answers2

5

To display the selected product price from a variation on variable products, jQuery is required. So the following shortcode will handle all product types, including variable products and their price variations:

add_shortcode( 'product_price', 'display_formatted_product_price' );
function display_formatted_product_price( $atts ) {
    extract(shortcode_atts( array(
        'id' => null
    ), $atts, 'product_price' ) );

    global $product;

    if( ! empty($id) || ! is_a($product, 'WC_Product') ) {
        $product = wc_get_product( empty($id) ? get_the_id() : $id );
    }

    $price_html = $product->get_price_html();

    // Others product types than variable
    if ( ! $product->is_type('variable') ) {
        return '<span class="product-price">' . $price_html . '</span>';
    }
    // For variable products
    else {
        ob_start();

        ?>
        <script type="text/javascript">
        jQuery( function($){
            var p = '<?php echo $price_html; ?>', s = 'span.product-price';

            $( 'form.variations_form.cart' ).on('show_variation', function(event, data) {
                $(s).html(data.price_html); // Display the selected variation price
            });

            $( 'form.variations_form.cart' ).on('hide_variation', function() {
                $(s).html(p); // Display the variable product price range
            });
        });
        </script>
        <?php

        return ob_get_clean() . '<span class="product-price">' . $price_html . '</span>';
    }
}

Code goes in functions.php file of your active child theme (or active theme). Tested and works.

USAGE:

Use [product_price] or in php code echo do_shortcode('[product_price]').

You can also define a product id like (for example for product id 37): [product_price id="37"]

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
  • Hi There, Thanks for the reply, and sorry for the delay in communication. I tested it out. The code causes the price to completely disappear when you select an option – Nikhil Puthu Aug 02 '20 at 13:09
  • 1
    That is right it works perfectly with storefront Theme. I am using Jupiter Theme by artbee. I could be the reason why code is not compatible. I will use this amazing code for other projects. Thanks for your help – Nikhil Puthu Aug 02 '20 at 22:10
  • 1
    Actually the code works perfectly. It turns out someone used display: none !important; to hide the price. Once I did that the code works. Thanks again – Nikhil Puthu Aug 02 '20 at 22:51
1

I'd like to thank LoicTheAztec for this code which is tested and works. However I banged my head on one issue: if product variations are all with the same price, the price_html will come back empty (issue described here: https://github.com/woocommerce/woocommerce/issues/11827). I solved this with a filter found in the github conv above:

add_filter( 'woocommerce_show_variation_price', '__return_true');
Gabriela Ghiuta
  • 111
  • 2