Wordpress Woocommerce-标题下方的可变产品价格 [英] Wordpress Woocommerce - Variable product price below title

问题描述

WordPress版本: 4.6.1

Wordpress version: 4.6.1

Woocommerce版本: 2.6.4

Woocommerce Version: 2.6.4

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

When using standard woocommerce and you add a variable product with different price values. Woocommerce shows the minimum and maximum prices for that product below the product title . Like so : €50 - €100

我在我的functions.php文件中添加了以下代码，以针对可变产品禁用此行为:

I added following code to my functions.php file to disable this behavior for variable products:

/** 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' );
    }
}

一切正常.但是现在可变价格显示在产品"选项下方，如下图所示.我想在标题下方显示可变价格.

This all works well. But now the variable price is showing below the Product options, like shown in the images below. I would like to show the variable price below the title.

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

现在的可变产品:€150是选择颜色和尺寸的结果.在我选择了这些值之后，价格就会出现在变化下方.我希望此变化价格像简单的产品一样显示在标题下方.

Variable product right now: The €150 is a result of selecting the color and size. After i select those values the price appears below the variations. I want this variation price to be shown below the title, like a simple product.

我花了数小时来寻找方法，但是我发现的唯一一件事就是更改了woocommerce核心文件.这不是一个选择，因为woocommerce需要更新.

I spent hours finding how to do it, but the only thing i found was changing the woocommerce-core files. This is not an option because woocommerce needs to be updated.

更新

要解决 @Amy Ling 的困惑.我不希望显示最低或最高价格.我需要标题下方显示的当前版本的价格.因此，例如:鞋子是红色的，尺码30 =>€150，鞋子是红色的，尺码40 =>€170，依此类推.额外的图片:

To address the confusion of @Amy Ling . i dont want a minimum or maximum price shown. I need the price of the current variation shown below the title. So for example : A shoe is red and size 30 => €150 , A shoe is red and size 40 => €170, etc. A extra image:

推荐答案

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

In addition to the code you have, add the following to your theme functions.php file:

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"> 中，该价格必须保留在类别'variations_form'的变体的< form> 元素中

The problem which makes moving these elements slightly complex is that variable products are dynamic and the price element is manipulated with JavaScript in \woocommerce\assets\js\frontend\add-to-cart-variation.js. This price element is dynamically placed in <div class="woocommerce-variation single_variation"> which must stay in the variation's <form> element of class 'variations_form'.

因此，我执行这些操作后，将价格移动到了表格的顶部，因为价格必须保留在表格中.然后，我从表格上方删除了标题和摘录，并将其重新添加到表格内.

So, what I've done with these actions is move the price to the top of the form, because it must stay in the form. Then I've removed the title and excerpt from above the form and added them back in, inside the form.

这些动作也可能会出现在价格上方.

我在上面所做的更改足以解决我正在解决此问题的主题.但是，与 woocommerce_single_product_summary 操作相关的其他一些功能包括:

The actions I changed above were enough for the theme I was solving this problem on. However, some other functions hooked into the woocommerce_single_product_summary action include:

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

• woocommerce_template_single_rating
• woocommerce_template_single_meta
• woocommerce_template_single_sharing
• woocommerce_template_single_price (you already effectively dealt with this one with your own code

根据您的主题和使用的WooCommerce设置，可能还需要使用 woocommerce_before_variations_form 操作将其删除并重新添加.

Depending on your theme and the WooCommerce settings you use, these may also need to be removed and added back in with the woocommerce_before_variations_form action.

这篇关于Wordpress Woocommerce-标题下方的可变产品价格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！