Skip to main content

How to add TextBox to display product price inside woocommerce single product page?

Adding TextBox to display product price inside woocommerce single product page - 

Step -1

Write the following code inside your functions.php file -

 add_action( 'woocommerce_after_add_to_cart_quantity', 'woocommerce_total_product_price', 31 );

function woocommerce_total_product_price() {
      ?> 
    <input type="hidden" class="product-currency" value=<?php echo get_woocommerce_currency_symbol()?> />
    <input type="text" id="product_total_price" readonly="readonly">
    <input type="hidden" id="calculate_product_total_price" >
    <?php
}


Step - 2 : 

Create a js file as "test.js" and write the following code inside "test.js" file -


jQuery(function($) {  

  /* Clearing product price textbox and hidden price textbox when clear link is clicked */

  $('.reset_variations').on('click', function(){
            $("#calculate_product_total_price").val(' ');
            $("#product_total_price").val(' ');
  });

  
 /* Clearing price textbox and hidden price textbox when variation changes to choose material or choose colour  */

 $( ".variations_form" ).on( "woocommerce_variation_select_change", function () {
        $("#calculate_product_total_price").val(' ');
        $("#product_total_price").val(' ');
   } );

/* showing price on textbox when product variation selected  */

 $('.variations_form').on( "show_variation", function ( event, variation ) {

     
     var price = variation.display_price;
     var quantity = $('.single_variation_wrap input[name=quantity]').val();
     var addon_price = 0;

       $('.input-text.addon.addon-custom').each(function(){

          if($(this).val())
          {
            if($(this).data('price'))
            {
            addon_price+= $( this ).data('price');
            }
          }           

       }); 
     var total = (price * quantity) + ( addon_price * quantity); 
     var currency=$(".product-currency").val();
      $('.single_variation_wrap input[id=product_total_price]').val(currency+' '+total);
      $('input[id=calculate_product_total_price]').val(price);
  
   } );

  
/* showing price on textbox when product quantity is changed */  
  $('[name=quantity]').change(function(){
                var price= $("#calculate_product_total_price").val();
                  if($("#calculate_product_total_price").val()==0 || $("#calculate_product_total_price").val()=="")
                  {
                    $("#product_total_price").val(' ');
                    return;
                  }

                  var addon_price = 0;

                  $('.input-text.addon.addon-custom').each(function(){

                    if($(this).val())
                    {
                      if($(this).data('price'))
                        {
                          addon_price+= $( this ).data('price');
                        }
                    } 

                  });

                  if (!(this.value < 1)) {

                        var product_total = parseFloat(price * this.value);
                        var addon_total = parseFloat(addon_price * this.value);
                        var total = product_total + addon_total;
                        var currency=$(".product-currency").val();
                        $("#product_total_price").val(currency+' '+total);

                    }
                })

});


Step -3: 

Now the last step is write the following code inside your functions.php file to add this "test.js" file to your theme -

/* Adding test.js file */

add_action('wp_enqueue_scripts','agd_add_style');

function agd_add_style()
{
wp_enqueue_script('jquery');
wp_enqueue_script('agd_child_js',get_stylesheet_directory_uri() . '/test.js');
}

Comments

Post a Comment

Popular posts from this blog

Algorithm, Flowchart and Program code to print the larger of two numbers

       Q. Write a program in C to print the larger of two numbers with                t he  help of   algorithm and flowchart.        Algorithm:        Step 1: Start       Step 2: Read a, b .        /* a, b two numbers */        Step 3: If a>b then        /*Checking */                       Display “a is the largest number”.                   Otherwise                       Display “b is the largest number”.   Step 4: Stop.     Flowchart  :     Program:       Output:  

How to customize header part of storefront theme in wordpress?

Solution:  You can easily customize storefront theme from functions.php of storefront child theme. With the help of storefront_header hook you can do that. The following code is used to remove storefront header default features- add_action("after_setup_theme", "storefront_child_header_remove"); function storefront_child_header_remove() {     remove_action("storefront_header","storefront_site_branding",20);     remove_action("storefront_header","storefront_secondary_navigation",30);     remove_action("storefront_header","storefront_product_search",40);     remove_action("storefront_header","storefront_primary_navigation_wrapper",42);     remove_action("storefront_header","storefront_primary_navigation",50);     remove_action("storefront_header","storefront_header_cart",60);     remove_action("storefront_header","storefront_pri...