Move Variant Prices Up to top of single item page

This topic has 3 replies, 2 voices, and was last updated 4 years, 10 months ago ago by Rose Tyler

  • Avatar: seanseansean
    seanseansean
    Participant
    June 8, 2019 at 00:10

    Hello,

    How can I display variant Item prices at the top of the single item page underneath the Product title?

    Please, contact administrator
    for this information.
    2 Answers
    Avatar: seanseansean
    seanseansean
    Participant
    June 8, 2019 at 01:27

    I found some code to utilize but it is causing the quantity to jump, do you have a bettery solution?

    Code below
    `//// removing the price of variable products
    remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_price’, 10 );

    // Change location of
    add_action( ‘woocommerce_single_product_summary’, ‘custom_wc_template_single_price’, 10 );
    function custom_wc_template_single_price(){
    global $product;

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

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

    if ( $price !== $saleprice && $product->is_on_sale() ) {
    $price = ‘‘ . $saleprice . $product->get_price_suffix() . ‘ <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>’;

    endif;
    }

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 8, 2019 at 09:48

    Hello,

    Sorry, but additional customization in files is not included in basic support.
    Feel free to ask if you have any other questions.

    Regards

  • Viewing 3 results - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.