Product Rentals Pro
PRP on the App StoreContact Support
  • User Guide
  • Frequently Asked Questions
  • Getting Started
    • Installation
    • Setting up your Products in Shopify
  • Quickstart Guide
    • Rental Duration Options
    • Import & Configure a Rental Product
    • Theme Components Install & Config Guide
    • Checking the Rental Product
  • Settings
    • Store Settings
      • Verifying your Support Email
    • Rental Settings
    • Options & Variants Settings
    • Notification Settings
    • Add-Ons - Insurance
    • Add-Ons - Deposits
  • Managing Products
    • Importing Products
    • Products List
    • Configuring Products
    • Setting up a Product for Rental OR Sale
  • Managing Rentals
    • Overview
    • Rentals List
    • Viewing & Editing a Rental
    • Rental Buffers
    • Rental Statuses
    • Blackouts
      • Blackout Form Fields & Options
    • Find All Rentals for a Product
    • Rental Calendar for a Product
    • Creating a Rental Manually
      • Shopify Order Creation
    • Linking/Unlinking from a Shopify Order
  • Fulfillments and Returns
    • Fulfillments
      • Automated Rental Status Updates
    • Returns
  • Rental Widget
    • Rental Widget - Configuration Options
    • Rental Widget - Unavailable and Blocked Dates
    • Rental Widget - Custom Styling
    • Rental Widget - Advanced Customization
  • Other PRP Components
    • PRP Cart Manager
    • cart-quantity-validation Function
  • Selling & Payment Options
    • Intro to Selling & Payment Options
    • Part-Payments / Down-payments
    • Refundable Security Deposits
    • Damage Fees, Late Fees & Non-return Fees (Security Authorisation)
  • Plans & Billing
    • Overview and Comparison of Plans
    • SMS Usage Pricing
  • Troubleshooting
    • General Troubleshooting
    • Overbookings
  • Other
    • Improving the Cart & Checkout Experience
      • Preventing Quantity Updates on your Cart page
      • Blocking Checkout Shipping/Pick-up options based on the option selected on the Product page
      • Updating the price on the default Shopify Price theme block when the variant is changed
    • Supported Languages
Powered by GitBook
On this page
  1. Other
  2. Improving the Cart & Checkout Experience

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.

PreviousBlocking Checkout Shipping/Pick-up options based on the option selected on the Product pageNextSupported Languages

Last updated 4 months ago

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

just reach out