在WooCommerce中移动变动价格位置 [英] Move the variation price location in WooCommerce

问题描述

我已经开始使用WooCommerce插件在Wordepress中建立电子商店.

I'm have started building an e-shop in Wordepress with WooCommerce plugin.

我添加了一些带有变化的产品，我注意到在属性选择字段之后显示价格.

I added some products with variations and I noticed that the price is displayed after attributes select fields.

是否可以像简单产品一样在标题和简短描述之间移动价格?

Is it possible to move the price between Title and short description as for simple products?

一种产品的网址是: http://www.roubinisideas.com/test2/product/uncategorized/vintage/

The url of one product is: http://www.roubinisideas.com/test2/product/uncategorized/vintage/

推荐答案

更新 (于2019年9月):

• 避免可用性重复(错误已在2018年解决)
• 保持其他产品类型不变(2019年)

这是可能的，它基于

This is possible and it's is based on this answer that I have maid:

在这里，我已更新了jQuery代码，以默认情况下为变量产品设置了变体.

Here I have updated the jQuery code to take into account when a variation is set by default for a variable product.

这是代码:

add_action( 'woocommerce_single_product_summary', 'move_single_product_variable_price_location', 2 );

function move_single_product_variable_price_location() {
    global $product;

    // Variable product only
    if( $product->is_type('variable') ):

    // removing the price of variable products
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );

    // Add back the relocated (customized) price of variable products
    add_action( 'woocommerce_single_product_summary', 'custom_single_product_variable_prices', 10 );

    endif;
}


function custom_single_product_variable_prices(){
    global $product;

    // Main Price
    $prices = array( $product->get_variation_price( 'min', true ), $product->get_variation_price( 'max', true ) );
    $price = $prices[0] !== $prices[1] ? sprintf( __( 'From: %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( __( 'From: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

    if ( $price !== $saleprice && $product->is_on_sale() ) {
        $price = '<del>' . $saleprice . $product->get_price_suffix() . '</del> <ins>' . $price . $product->get_price_suffix() . '</ins>';
    }

    ?>
    <style>
        div.woocommerce-variation-price,
        div.woocommerce-variation-availability,
        div.hidden-variable-price {
            height: 0px !important;
            overflow:hidden;
            position:relative;
            line-height: 0px !important;
            font-size: 0% !important;
            visibility: hidden !important; 
        }
    </style>
    <script>
        jQuery(document).ready(function($) {
            // When variable price is selected by default
            setTimeout( function(){
                if( 0 < $('input.variation_id').val() && null != $('input.variation_id').val() ){
                    if($('p.availability'))
                        $('p.availability').remove();

                    $('p.price').html($('div.woocommerce-variation-price > span.price').html()).append('<p class="availability">'+$('div.woocommerce-variation-availability').html()+'</p>');
                    console.log($('div.woocommerce-variation-availability').html());
                }
            }, 300 );

            // On live variation selection
            $('select').blur( function(){
                if( 0 < $('input.variation_id').val() && null != $('input.variation_id').val() ){
                    if($('.price p.availability') || $('.price p.stock') )
                        $('p.price p').each(function() {
                            $(this).remove();
                        });

                    $('p.price').html($('div.woocommerce-variation-price > span.price').html()).append('<p class="availability">'+$('div.woocommerce-variation-availability').html()+'</p>');
                    console.log($('input.variation_id').val());
                } else {
                    $('p.price').html($('div.hidden-variable-price').html());
                    if($('p.availability'))
                        $('p.availability').remove();
                    console.log('NULL');
                }
            });
        });
    </script>
    <?php

    echo '<p class="price">'.$price.'</p>
    <div class="hidden-variable-price" >'.$price.'</div>';
}

代码会出现在您活动的子主题(或主题)的任何php文件中，也可能出现在任何插件的php文件中.

此代码已经过测试，可在WooCommerce 3+上运行(也应在WooCommerce 2.6.x上运行)

This code is tested and works on WooCommerce 3+ (should work on WooCommerce 2.6.x too)

相关: 查看全文