<?php
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 25 );
function woocommerce_template_single_title(){
?>
<div class="acf">
<h5>Выбор толщины листа, мм</h5>
<input id="input_range" type="range" value="5" min="5" max="1000" step="5">
<h2 style="color:red" id="output"></h2>
</div>
<script>
let input_range = document.querySelector('#input_range');
let output = document.querySelector('#output');
let body = document.querySelector('body');
output.innerHTML = input_range.value;
</script>
<?php
$product_id = get_the_ID();
$product = wc_get_product( $product_id );
$regular_price = $product->get_regular_price();
echo $regular_price;
?>
<script>
input_range.addEventListener('input', function(){
//output.innerHTML = input_range.value;
output.style.background = 'gold';
let changed_price = <?php echo $regular_price; ?> * input_range.value;
output.innerHTML = changed_price;
});
</script>
<?php
}Макет `768` пикселей показывает как будет выглядеть контент при размере экрана от 481 до 992 (!) пикселей
