I have a form on the product single page. The price was showing in between of the attributes and the custom form fields. I wanted the price to show at a different place of my choice. The following code is a complete solution to it.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | /** * * This entire block is a mixture of 3 solutions. 2 found from web and a bit of custom css styling making it third. * Please read the code carefully for more comments. * * So for the first one (https://www.businessbloomer.com/woocommerce-get-currently-selected-variation-id/). There's a block of code that we want to run when a variation is changed for that first we must have an event trigger for a variation change. This just does that. * * @source https://www.businessbloomer.com/woocommerce-get-currently-selected-variation-id/ * * */ add_action( 'woocommerce_before_add_to_cart_quantity', 'bbloomer_display_dropdown_variation_add_cart' ); function bbloomer_display_dropdown_variation_add_cart() { global $product; if ( $product->is_type( 'variable' ) ) { ?> <style type="text/css"> /* Don't do display none because we are accessing the value inside this dom node but the user don't need to see the price here. */ .woocommerce-variation { visibility: hidden; height: 1px; } </style> <script> jQuery(document).ready(function ($) { $('input.variation_id').change(function () { if ('' != $('input.variation_id').val()) { var variationID = $('input.variation_id').val(); if (variationID) { jQuery("#wccf_product_field_master_container").hide(); // Source: https://stackoverflow.com/questions/43617537/move-woocommerce-variation-price // Update price according to variable price if (jQuery('form.variations_form').length !== 0) { var form = jQuery('form.variations_form'); var variable_product_price = ''; setInterval(function () { if (jQuery('.single_variation_wrap span.price span.amount').length !== 0) { if (jQuery('.single_variation_wrap span.price span.amount').text() !== variable_product_price) { variable_product_price = jQuery('.single_variation_wrap span.price span.amount').text(); // jQuery('.single-product-summary p.price span.amount').text(variable_product_price); jQuery('#custom_variation_price').text(variable_product_price); } } }, 500); } } } }); }); </script> <?php } } |