Wordpress Woocommerce - Variable product price below title

Question

Wordpress version: 4.6.1

Woocommerce Version: 2.6.4

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

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.

Simple product. I would like to show the price like this on a variable product.

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.

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.

UPDATE

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:

Solution 1

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' );

Explanation

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.

These actions may appear above price too.

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 (you already effectively dealt with this one with your own code

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.

Solution 2

You can overwrite WooCommerce template files via your theme folder. This will not affect anything when you do updates to the plugins.

Here is a link that has a detailed documentation on it: https://docs.woocommerce.com/document/template-structure/

A lot of the files will have a do_action('woocommerce_add_this_info_piece');. You can find out what information gets added to it in the template hooks located at /woocommerce/includes/wc-template-hooks.php

UPDATE

After downloading WooCommerce and creating a variable and simple product. Both simple and variable pricing already displays right after the title. The code below removes the max pricing, leaving only the minimum pricing.

To show max pricing only, change

wc_price( $prices[0] ) ) : wc_price( $prices[0] );

to

wc_price( $prices[1] ) ) : wc_price( $prices[1] );

Below is the code from here: http://www.templatemonster.com/help/woocommerce-how-to-remove-variable-products-available-price-range.html#gref

/*
Disable Variable Product Price Range: 
*/

add_filter( 'woocommerce_variable_sale_price_html', 'my_variation_price_format', 10, 2 );

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

function my_variation_price_format( $price, $product ) {

// 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;
}