Updating the price on the default Shopify Price theme block when the variant is changed

Show an updated price as customers switch between variants

The default Shopify 'Price' block is typically in a theme's product page, above where you would normally place the PRP Rental Widget.

This block doesn't listen for changes to the variant within the PRP Rental Widget, and so the price doesn't change when you select a different variant. The price doesn't update beyond what was initially loaded with the page.

To have this price update, you need to remove/hide the standard Price block in your rental product page template, and replace it with a Custom Liquid block.

Here is the code to put into the Custom Liquid block.

<div id='prp__product-price'>
    <span class='price product-single__price' id='price'>{{ product.selected_or_first_available_variant.price | money }}</span>
</div>

<script>
    // Listen for the custom event to detect variant changes
    document.addEventListener('prp::variant::changed', function (event) {
        const variant = event.detail.variant;
        if (variant && variant.priceFormatted) {
            // Get the price element
            const priceElement = document.querySelector('#prp__product-price .price');

            if (priceElement) {
                // Update the price with the new value
                priceElement.innerHTML = variant.priceFormatted;
            }
        }
    });
</script>

If you don't like the style/appearance of it, you may need to apply some custom CSS. This can either be done as inline styles on the HTML elements, included in the Custom CSS field of the PRP Rental Widget, or added to one of you site stylesheets.

If you need any help implementing this, please just reach out! If you provide us with collaborator access we'll get it sorted for you.