Support » Plugin: WooCommerce » Change variation price to price range when variation not selecteed

  • Resolved Troy Templeman

    (@troytempleman)


    Currently when there are variations, there is a price range shown for the product (such as $10-$20). Then when you select a variation, the price for that variation appears next to the “Add to Cart” button and the price range remains above.

    I would like to change this so that the price range appears next to the “Add to Cart” button only when no variation is selected and when a variation is selected, the price range is instead replaced by the price of that variation.

    Is that possible?

    Thanks!

    https://wordpress.org/plugins/woocommerce/

Viewing 13 replies - 1 through 13 (of 13 total)
  • Plugin Author Mike Jolley

    (@mikejolley)

    I think you’d need to output it here in template or via function hooked in:

    https://github.com/woothemes/woocommerce/blob/master/templates/single-product/add-to-cart/variable.php#L58

    After a variation is selected, this area should be replaced.

    Thanks Mike. I added <?php echo $product->get_price_html(); ?> here, which outputs the price range ok next to the “Add to Cart” button but when a variation is selected, the variation price also appears. Is there a way of switching these prices or hiding the price range after the variation is selected?

    Thanks!

    Plugin Author Mike Jolley

    (@mikejolley)

    There are jquery triggers fired once a variation is chosen; I think they can be used to hide the element if needed.

    Yeah, I can see that <div class="woocommerce-variation single_variation"</div> is hidden until a variation is selected, which displays the variation price inside this div. Do you know if/how/where I can setup a trigger for my div for price range? My javascript knowledge is pretty basic, lol.

    Plugin Author Mike Jolley

    (@mikejolley)

    Examples on http://api.jquery.com/trigger/

    $('.single_variation').on('show_variation', function() {
    // do something
    });

    OK, it’s working now.

    I added:

    <span class="price price-range"><? echo $product->get_price_html(); ?></span>

    before

    <?php
        /**
            * woocommerce_before_single_variation Hook.
            */
            do_action( 'woocommerce_before_single_variation' );

    in the variable.php template and added the following script:

    $('.single_variation').on('show_variation', function() {
        $('.price-range').hide();
    });

    I think it might be nice to have something like this as standard functionality in WooCommerce so that there’s only one spot for prices, instead of two.

    Thanks again for your help Mike!

    Hello Troy,

    where exactly did you add the script

    $('.single_variation').on('show_variation', function() {
        $('.price-range').hide();
    });

    I am trying to follow your instructions and use it in my website too.

    Thank you

    justinthedesigner

    (@justinthedesigner)

    Hello @troy @troytempleman I as well would like to know how to do this.

    Am I correct that to be able to achieve this I just need to add:

    <span class=”price price-range”><? echo $product->get_price_html(); ?></span>

    before

    <?php
    /**
    * woocommerce_before_single_variation Hook.
    */
    do_action( ‘woocommerce_before_single_variation’ );

    then add this script:

    $(‘.single_variation’).on(‘show_variation’, function() {
    $(‘.price-range’).hide();
    });

    WHERE DO I ADD THIS SCRIPT?

    justinthedesigner

    (@justinthedesigner)

    @zantame WERE YOU ABLE TO FIGURE THIS OUT?

    How to change the price range by the variation price in woocommerce product pages:

    
    $(document).ready(function () {
    	var originePrice = $(".summary p.price").html();
    	
    	setInterval(function() {
    		if( $(".summary .variations_form select").val()  == '') {
    			$(".summary p.price").html(originePrice);
    		} else if ( $(".summary .variations_form .woocommerce-Price-amount").length ) {
    			var variationPrice = $(".summary .variations_form .woocommerce-Price-amount").text();
    			$(".summary p.price").text(variationPrice);
    		}
    	}, 100);
    		
    });
    

    This one work too

    
    $(document).ready(function () {
    	var originePrice = $(".summary p.price").html();
    	$(".summary .variations_form .woocommerce-variation-add-to-cart input").change(function () {
    		setTimeout(function() {
    			if( $(".summary .variations_form select").val()  == '') {
    				$(".summary p.price").html(originePrice);
    				$(".summary .stock.variation").slideUp(500, function() {
    					$(this).remove();
    				});
    			} else if ( $(".summary .variations_form .woocommerce-Price-amount").length ) {
    				var variationPrice = $(".summary .variations_form .woocommerce-Price-amount").text();
    				$(".summary p.price").text(variationPrice);
    				$(".summary .stock.variation").slideUp(500, function() {
    					$(this).remove();
    				});
    				setTimeout(function() {
    					$(".summary .variations_form .woocommerce-variation-availability .stock").insertAfter( ".summary p.price" ).addClass('variation').hide().slideDown(500);
    				}, 500);
    			}
    		}, 200);
    	});
    		
    });
    
    zeepreeme

    (@zeepreeme)

    I’ve been looking for something like this as well. As my shop is set up I would like the product price span replaced by the variant’s price (same as e.g shopify does).

    The second script from @klemonnier seems to work and has the benefit that when the variable list is reset, the original price span is shown again.
    Unfortunately the price is not printed right, all the variable prices are printed with the correct variable price always in the middle.
    Variable price
    I tried to look it through but I don’t know java script that much so I can trace what is wrong, anyone please care to help?

    As Troy mentioned, I also believe it would be a great function to implement into woocommerce as a standard functionality (by choice?)

    Thanks
    Martin

    zeepreeme

    (@zeepreeme)

    Read up a bit on java and solved it by slightly adjusting the class selectors, it was taking the price strings from two more places due to same classes.

    
    $(document).ready(function () {
               var originePrice = $(".summary p.price").html();
               $(".summary .variations_form .woocommerce-variation-add-to-cart input").change(function () {
                          setTimeout(function() {
                                     if( $(".summary .variations_form select").val()  == '') {
                                                $(".summary p.price").html(originePrice);
                                                $(".summary .stock.variation").slideUp(500, function() {
                                                          $(this).remove();
                                                });
                                     } else if ( $(".single_variation_wrap .woocommerce-Price-amount").length ) {
                                                var variationPrice = $(".single_variation_wrap .woocommerce-Price-amount").text();
                                                $(".summary p.price").text(variationPrice);
                                                $(".summary .stock.variation").slideUp(500, function() {
                                                          $(this).remove();
                                                });
                                                setTimeout(function() {
                                                          $(".summary .variations_form .woocommerce-variation-availability .stock").insertAfter( ".summary p.price" ).addClass('variation').hide().slideDown(500);
                                                }, 500);
                                     }
                          }, 200);
               });
                         
    });
    

    the script is doing exactly what I have been looking for to do, so thanks for this.

    • This reply was modified 9 months ago by  zeepreeme.
Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Change variation price to price range when variation not selecteed’ is closed to new replies.