Woocommerce – Altere o valor do produto de acordo com a quantidade na página do produto

Recentemente participei do desenvolvimento de um projeto onde o cliente precisava que o valor fosse acrescido ou decrescido de acordo com a quantidade de produtos selecionados. Pode parecer algo simples, mas para dizer a verdade não costumo ver funcionar assim na maioria dos sistemas de e-commerce, geralmente o valor total para aquela quantidade de um determinado produto é apresentado apenas na página do carrinho ou na página de finalização da compra.

Como sempre eu sempre dou preferência às alterações “na unha”, evito a instalação de plugins para todo tipo de coisa, até pesquisei para essa situação, mas não encontrei, se existe eu não sai, então a opção era meter a mão no código.

Para essa situação nós precisamos manipular o arquivo functions.php do tema, sabemos que esse arquivo sempre é sobreposto quando o tema é atualizado, sendo assim a indicação é que você utilize um plugin para inserção de códigos sem a necessidade de manipular diretamente o functions.php, eu costumo utilizar o plugin My Custom Functions , ele ajuda bastante, na verdade em suas últimas versões tem acontecido um bug onde a janela de digitação fica bem pequena, atrapalha um pouco, mas funciona 100%. Se você conhece algum outro tão bom quanto esse pode me indicar, aceito novas sugestões.

Também podemos fazer um pequeno ajuste no CSS para darmos uma incrementada, veremos mais abaixo.

Abaixo segue o código que precisamos inserir no functions.php ou em nosso plugin de inserção de códigos.

add_action( 'woocommerce_single_product_summary', 'woocommerce_total_product_price', 25 );
function woocommerce_total_product_price() {
global $woocommerce, $product;
// let's setup our divs
echo sprintf('<div id="product_total_price" style="font-size: 16px; font-weight: 600;">%s %s</div>',__('Valor Total:','woocommerce'),'<span class="price">'. get_woocommerce_currency_symbol() .' ' .$product->get_price().'</span>');
?>
<p> </p>
<script>
jQuery(function($){
var price = <?php echo $product->get_price(); ?>,
currency = '<?php echo get_woocommerce_currency_symbol(); ?>';

$('[name=quantity]').change(function(){
if (!(this.value < 1)) {

var product_total = parseFloat(price * this.value);

$('#product_total_price .price').html( currency + product_total.toFixed(2));

}
});
});
</script>
<?php
}

Implementando esse código o seu sistema já vai modificar o valor do produto na página dele toda vez que você alterar a quantidade, mas acontece que você vai observar que o preço fixo vai continuar sendo apresentado, então teremos o preço real do produto único, que não se altera independente da quantidade e, vai aparecer também o preço que vai variar de acordo com a quantidade, isso pode deixar o seu cliente confuso, eu prefiro suprimir a informação do preço fixo, faço isso com CSS. Lembre de utilizar Custom CSS, evite editar diretamente o do tema.

/* ESCONDE O PREÇO PADRÃO */
.product div.entry-summary > p.price {
margin-bottom: 35px;
display: none;
}

Pronto, agora o seu sistema vai mostrar o valor que se altera de acordo com a quantidade e vai suprimir o valor fixo.

Não é uma alteração que todos os clientes peçam, mas vale a pena a gente saber que isso é possível.