php - Wordpress Woocommerce - 标题下方的可变产品价格

Question

WordPress 版本:4.6.1

Woocommerce 版本:2.6.4

使用标准 woocommerce 时，您添加了具有不同价格值的可变产品。 Woocommerce 在产品标题下方显示该产品的最低和最高价格。像这样:€50 - €100

我将以下代码添加到我的 functions.php 文件中以禁用可变产品的此行为:

/** Hide Variable prices */
add_filter( 'woocommerce_variable_sale_price_html', 'bbloomer_variation_price_format', 10, 2 );

add_filter( 'woocommerce_variable_price_html', 'bbloomer_variation_price_format', 10, 2 );

function bbloomer_variation_price_format( $price, $product ) {

 if (is_product()) {
    return $product->get_price();
 } else {
        // Main Price
        $prices = array( $product->get_variation_price( 'min', true ), $product->get_variation_price( 'max', true ) );
        $price = $prices[0] !== $prices[1] ? sprintf( __( '%1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

        // Sale Price
        $prices = array( $product->get_variation_regular_price( 'min', true ), $product->get_variation_regular_price( 'max', true ) );
        sort( $prices );
        $saleprice = $prices[0] !== $prices[1] ? sprintf( __( '%1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

        if ( $price !== $saleprice ) {
        $price = '<del>' . $saleprice . '</del> <ins>' . $price . '</ins>';
        }
        return $price;
         }

}

// show variation price
add_filter('woocommerce_show_variation_price', function() {return true;});

//override woocommerce function
function woocommerce_template_single_price() {
    global $product;
    if ( ! $product->is_type('variable') ) { 
        woocommerce_get_template( 'single-product/price.php' );
    }
}

这一切都很好。但是现在可变价格显示在产品选项下方，如下图所示。 我想在标题下方显示可变价格。

简单的产品。我想在可变产品上显示这样的价格。

现在可变产品:150 欧元是选择颜色和尺寸的结果。在我选择这些值后，价格出现在变化下方。我希望这个变体价格显示在标题下方，就像一个简单的产品。

我花了几个小时寻找如何去做，但我唯一发现的是更改 woocommerce-core 文件。这不是一个选项，因为 woocommerce 需要更新。

更新

解决 @Amy Ling 的困惑。我不想显示最低或最高价格。我需要标题下方显示的当前变体的价格。例如:鞋子是红色的，尺码 30 => €150，鞋子是红色的，尺码 40 => €170，等等。额外的图片:

Answer 1

除了您拥有的代码之外，将以下内容添加到您的主题中 functions.php文件:

function shuffle_variable_product_elements(){
    if ( is_product() ) {
        global $post;
        $product = wc_get_product( $post->ID );
        if ( $product->is_type( 'variable' ) ) {
            remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation', 10 );
            add_action( 'woocommerce_before_variations_form', 'woocommerce_single_variation', 20 );

            remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
            add_action( 'woocommerce_before_variations_form', 'woocommerce_template_single_title', 10 );

            remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
            add_action( 'woocommerce_before_variations_form', 'woocommerce_template_single_excerpt', 30 );
        }
    }
}
add_action( 'woocommerce_before_single_product', 'shuffle_variable_product_elements' );

解释

使移动这些元素稍微复杂的问题是变量产品是动态的，而价格元素是在 \woocommerce\assets\js\frontend\add-to-cart-variation.js 中使用 JavaScript 操作的。 .此价格元素动态放置在 <div class="woocommerce-variation single_variation"> 中必须保留在变体的 <form> 中“variations_form”类的元素。

因此，我对这些操作所做的是将价格移至表单顶部，因为它必须保留在表单中。然后，我从表格上方删除了标题和摘录，并将它们重新添加到表格内。

这些操作也可能出现在价格之上。

我上面更改的操作足以满足我解决此问题的主题。但是，其他一些函数挂接到 woocommerce_single_product_summary 中行动包括:

• woocommerce_template_single_rating
• woocommerce_template_single_meta
• woocommerce_template_single_sharing
• woocommerce_template_single_price (您已经使用自己的代码有效地处理了这个问题

根据您的主题和您使用的 WooCommerce 设置，这些可能还需要删除并重新添加到 woocommerce_before_variations_form 中行动。