Categorías
Elementor WooCommerce

Vincular precio a cantidad – WooCommerce para Elementor

WooCommerce por defecto no actualiza el precio total del producto cuando actualizas la cantidad.

Recientemente tuve que aplicar esta funcionalidad, así que en primera instancia intenté utilizar este plugin: https://reigelgallarde.me/product/woocommerce-product-price-x-quantity-preview/, sin embargo, para que funcione con variaciones, necesita que WooCommerce utilice AJAX para mostrar la vista previa del precio, y en la implementación de Elementor, este ajuste está desactivado, así que no funcionaba en mi caso, por lo que tuve que crear mi propia implementación:

En primer lugar, esperamos a que el elemento que muestra el precio sea insertado en el DOM, ya que esto ocurre de forma asíncrona luego de que la página carga. Para esto, utilizamos la API de MutationObserver.

Adicional a esto, tenemos dos event listeners, queremos que al actualizar la cantidad de productos el precio cambie, y queremos actualizar el precio de referencia cuándo seleccionamos un atributo nuevo en nuestro producto variable (esto no es necesario para productos simples).