Custom product variant picker not updating prices in Shopify

Other Questions Shopify
1

I’m having trouble with a custom variant picker I built for my Shopify product pages. The default variant selector works perfectly, but my custom one won’t update the product price when customers select different options. I suspect there’s an issue with my JavaScript implementation.

var variantCallback = function(selectedVariant, picker) {
  var $cartButton = $('#add-to-cart-btn'),
      $buyNowButton = $('#buy-now-btn'),
      $stickyCartBtn = $('#sticky-add-cart'),
      $priceDisplay = $('#product-price'),
      $originalPrice = $('#original-price'),
      $stockQuantity = $('#stock-amount'),
      $qtySelectors = $('.qty-picker, label + .quantity-input'),
      $cartButtonText = $('#add-to-cart-btn'),
      $mainImage = $('#main-product-image');

  if (selectedVariant) {
    // Update product price regardless of inventory status
    Shopify.money_format = '{{shop.money_format}}';
    
    var accessiblePrice = Shopify.formatMoney(selectedVariant.price, Shopify.money_format);
    var priceMarkup = ' <span class="sr-only">' + accessiblePrice + '</span>';
    $priceDisplay.html(priceMarkup);
    
    // Handle compare at price display if enabled
    {% if settings.show_compare_price %}
    if (selectedVariant.compare_at_price > selectedVariant.price) {
      var accessibleComparePrice = Shopify.formatMoney(selectedVariant.compare_at_price, Shopify.money_format);
      var comparePriceMarkup = ' <span class="sr-only">' + accessibleComparePrice + '</span>';
      $originalPrice.html(comparePriceMarkup);
      $originalPrice.show();
    } else {
      $originalPrice.hide();
    }
    {% endif %}
  }
};

jQuery(function($) {
  var productData = {{ product | json }};
  new Shopify.OptionSelectors('variant-selector', {
    product: productData,
    onVariantSelected: variantCallback,
    enableHistoryState: true
  });
});

Can anyone spot what might be wrong with this code? The variant selection isn’t triggering price updates.

2

I had the same issue last month - it was my price display markup. You’re only adding screen reader spans but missing the actual visible price text. Try this for your price update section:

var formattedPrice = Shopify.formatMoney(selectedVariant.price, Shopify.money_format);
$priceDisplay.html('<span class="price">' + formattedPrice + '</span><span class="sr-only">' + formattedPrice + '</span>');

Also check if your custom variant picker is triggering the selector change event. If you’re using custom dropdowns or buttons instead of default select elements, you’ll need to manually trigger the change event on the hidden selects that Shopify.OptionSelectors expects. Can’t say for sure without seeing your picker HTML, but this tripped me up when I built mine.