Wordpress Woocommerce - 可变产品价格低于标题

Chr*_*hvh 1 html css php wordpress woocommerce

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' );
    }
}
Run Code Online (Sandbox Code Playgroud)

这一切都运作良好.但现在可变价格显示在产品选项下方,如下图所示.我想在标题下方显示可变价格.

简单的产品.我想在可变产品上显示这样的价格. 在此输入图像描述

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

在此输入图像描述

我花了好几个小时才发现它是如何做到的,但我发现的唯一一件事就是改变了woocommerce-core文件.这不是一个选项,因为需要更新woocommerce.

UPDATE

解决@Amy Ling的困惑.我不希望显示最低或最高价格.我需要标题下方显示的当前变化的价格.例如:鞋子是红色的,尺码30 => 150欧元,鞋子是红色的,尺码40 => 170欧元等.额外的图像:

在此输入图像描述

Jam*_*nes 5

除了您拥有的代码,请将以下内容添加到主题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' );
Run Code Online (Sandbox Code Playgroud)

说明

使这些元素变得稍微复杂的问题是变量产品是动态的,价格元素是用JavaScript操纵的\woocommerce\assets\js\frontend\add-to-cart-variation.js.这个价格元素是动态放置的<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操作.