使用简码显示选定的 WooCommerce 变体格式的价格答案

【问题标题】：Display the selected WooCommerce variation formatted price with shortcode使用简码显示选定的 WooCommerce 变体格式的价格
【发布时间】：2022-02-25 18:48:51
【问题描述】：

我创建了这段代码，在网站上的任何页面上显示价格，由 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();
}

我想做的是修改代码，以便客户选择具有变体的产品。然后价格发生变化以显示变化价格。例如，现在如果一个人选择一种产品，在这种情况下是酊剂瓶，其价格变化与瓶子的大小有关。在产品页面上，他们看到以下内容：-

产品（酊剂）$30 - $50

从下拉菜单中，他们可以选择 10 毫克瓶装（30 美元）、15 毫克瓶装（40 美元）或 20 毫克瓶装（50 美元）。因此，如果一个人选择选项 20mg，价格应该显示为 $50 而不是 $30 - $50

我已经查看了有关 stackoverflow 的各种帖子，有类似的问题，但这些解决方案都不适合我

任何帮助都会得到很大的帮助。

谢谢

【问题讨论】：

请在您的帖子中提供有关您的问题的更多信息。例如，我不知道什么是红色黑色和绿色，绿色选择如何在您的代码中体现，以及红色或黑色选择应该发生什么。您需要想象自己站在我们的立场，并想象您想用您提供的大量信息来回答这个问题的情况。你可能会明白你没有提供足够的信息。

标签： php wordpress woocommerce product price

【解决方案1】：

要显示从可变产品的变体中选择的产品价格，需要 jQuery。因此，以下短代码将处理所有产品类型，包括可变产品及其价格变化：

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>';
    }
}

代码在您的活动子主题（或活动主题）的functions.php 文件中。经过测试并且可以工作。

用法：

使用[product_price]或在php代码中echo do_shortcode('[product_price]')。

您还可以定义产品 ID，例如（例如产品 ID 37）：[product_price id="37"]

【讨论】：

您好，感谢您的回复，对于沟通的延误，我们深表歉意。我测试了它。当您选择一个选项时，代码会导致价格完全消失
没错，它与店面主题完美配合。我正在使用 artbee 的 Jupiter Theme。我可能是代码不兼容的原因。我将把这个惊人的代码用于其他项目。感谢您的帮助
实际上代码运行良好。原来有人用过 display: none !important;隐藏价格。一旦我这样做了，代码就可以工作了。再次感谢

【解决方案2】：

我要感谢 LoicTheAztec 提供经过测试和工作的代码。但是我在一个问题上猛烈抨击：如果产品变体都具有相同的价格，则 price_html 将返回为空（此处描述的问题：https://github.com/woocommerce/woocommerce/issues/11827）。我用上面 github conv 中的过滤器解决了这个问题：

add_filter( 'woocommerce_show_variation_price', '__return_true');

【讨论】：