使用短代码显示选定的 WooCommerce 变体格式化价格

Question

我创建了这段代码，可以在网站上的任何页面上显示价格，该价格由 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 上看过各种有类似问题的帖子，但这些解决方案都不适合我

• 显示 woocommerce 可变产品价格

• Woocommerce 获取变化产品价格

任何帮助将不胜感激。

Answer 1

要显示可变产品变体中选定的产品价格，需要 jQuery。因此，以下短代码将处理所有产品类型，包括可变产品及其价格变化：add_shortcode( 'product_price', 'display_formatted_product_price' );function display_formatted_product_price( $atts ) {&nbsp; &nbsp; extract(shortcode_atts( array(&nbsp; &nbsp; &nbsp; &nbsp; 'id' => null&nbsp; &nbsp; ), $atts, 'product_price' ) );&nbsp; &nbsp; global $product;&nbsp; &nbsp; if( ! empty($id) || ! is_a($product, 'WC_Product') ) {&nbsp; &nbsp; &nbsp; &nbsp; $product = wc_get_product( empty($id) ? get_the_id() : $id );&nbsp; &nbsp; }&nbsp; &nbsp; $price_html = $product->get_price_html();&nbsp; &nbsp; // Others product types than variable&nbsp; &nbsp; if ( ! $product->is_type('variable') ) {&nbsp; &nbsp; &nbsp; &nbsp; return '<span class="product-price">' . $price_html . '</span>';&nbsp; &nbsp; }&nbsp; &nbsp; // For variable products&nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; ob_start();&nbsp; &nbsp; &nbsp; &nbsp; ?>&nbsp; &nbsp; &nbsp; &nbsp; <script type="text/javascript">&nbsp; &nbsp; &nbsp; &nbsp; jQuery( function($){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var p = '<?php echo $price_html; ?>', s = 'span.product-price';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $( 'form.variations_form.cart' ).on('show_variation', function(event, data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(s).html(data.price_html); // Display the selected variation price&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $( 'form.variations_form.cart' ).on('hide_variation', function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(s).html(p); // Display the variable product price range&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; </script>&nbsp; &nbsp; &nbsp; &nbsp; <?php&nbsp; &nbsp; &nbsp; &nbsp; return ob_get_clean() . '<span class="product-price">' . $price_html . '</span>';&nbsp; &nbsp; }}代码位于活动子主题（或活动主题）的functions.php 文件中。经过测试并有效。用途：[product_price]在 php 代码中使用or echo do_shortcode('[product_price]')。您还可以定义产品 ID，例如（例如产品 id 37）：[product_price id="37"]

Answer 2

我对一个问题很头疼：如果产品变体都具有相同的价格，则price_html将返回空（。我使用上面 github 转换中找到的过滤器解决了这个问题：add_filter( 'woocommerce_show_variation_price', '__return_true');