Variant price changed dynamically

echilviet
New Member
2 0 0

I have a product with variants, and have specified the price for each variant.  However, depending of "options" selected by users I'd like to adjust the price of the variant selected. I manage to change "variant.price" on the client side, but not on the server side. So, when the item is added to the cart, the old/original price remains.
Question: How can I change the price of existing variants (by either javascript of liquid code)? If I need to use API, could I have some sample code? Thanks.

0 Likes

I'm not entirely sure what you mean. When the user picks a new variant does the price visually change on your website?

If not, you'll need to listen for changes on that specific variant <select> tag using Javascript. Once there's a change, then you update the price.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes
paramSoft
Shopify Partner
1439 235 643

Hello @echilviet This is the JS code

$(document).ready(function($) {

new Shopify.OptionSelectors('ProductSelect', {product: {{ product | json }}, onVariantSelected: selectCallback});
// Add label if only one product option and it isn't 'Title'. Could be 'Size'.
{% if product.options.size == 1 and product.options.first != 'Title' %}
  $('.selector-wrapper:eq(0)').prepend('<label>{{ product.options.first }}</label>');
{% endif %}
// Hide selectors if we only have 1 variant and its title contains 'Default'.
{% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
  $('.selector-wrapper').hide();
{% endif %}
// Auto-select first available variant on page load. Otherwise the product looks sold out.
{% assign found_one_in_stock = false %}
{% for variant in product.variants %}

{% if variant.available and found_one_in_stock == false %}
{% assign found_one_in_stock = true %}
{% for option in product.options %}
$('.single-option-selector:eq({{ forloop.index0 }})').val({{ variant.options[forloop.index0] | json }}).trigger('change');
{% endfor %}
{% endif %}
{% endfor %}

 

 

 

var selectCallback = function(variant, selector){
// BEGIN SWATCHES
if (variant) {
// console.log(variant);
if(variant.available){
$(".add-to-cart-button-div").text("ADD TO BAG");
$(".product-price-div").text( Shopify.formatMoney(variant.price,'{{ shop.money_format }}'));

}
else{
$(".add-to-cart-button-div").text("SOLD OUT");
}
}
}

});

});

 

 

 

This is the liquid code on product page (Variant Dropdown)

 

<select name="id" id="ProductSelect" class="product-form__variants no-js">
{% for variant in product.variants %}
<option data-qty="{{variant.inventory_quantity}}" {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}" {% unless variant.available %} disabled="disabled" {% endunless %}>

{% if variant.available %}
{{ variant.title }} - {{ variant.price | money_with_currency }}
{% else %}
{{ variant.title }} - Add to Cart (Awaiting Stock)
{% endif %}
</option>
{% endfor %}
</select>

 

Thanks

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
echilviet
New Member
2 0 0

Imagine that I'm selling a car (product), and its variants are the various "brands" I offer. I can easily define each variant with its own price.  However, if for each variant (brand) I offer add-ons (e.g. sound system options, navigation option, sun-roof, etc.), I don't want to "pre-build" each possible combination as a separate variant with its own price.  What I'd like to have is once a user specifies a variant (brand), which has a unique (base) price, I'd like to change the price of that variant based on the add-on options the buyer chooses for that variant.  I can pass on the selected add-ons as properties when added to the cart--no problem.  But, I haven't been able to modify the price of the variant based on the add-ons selected by the buyer. I'm able to change the price displayed when a buyer is choosing add-ons, but I cannot pass the updated price to the cart. Hopefully this makes sense.  I appreciate your help.

0 Likes
jaxter
Excursionist
24 1 3

Hi echilviet,

0 Likes