How can I display the product price in the dropdown?

Tofuto
Visitor
2 0 0

For example :

I have a shoe with differenz sizes.

Every size has a different price.

 

Instead of scrolling through every size I want to display the product / variant price next to the displayed variant.

 

For example US 9 - 100€, US8 - 50€.

How can I edit this? Im working on the venture theme

Replies 12 (12)

diego_ezfy
Shopify Partner
2935 562 883

Hello!
 
It'd require some coding knowledge. You'll need to access the price of the variant using .liquid, then display it via HTML and finally style it with CSS to make it look the way you want it to be.

If you need further help feel free to e-mail me.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

Tofuto
Visitor
2 0 0

HI Dante,

 

thanks for your fast answer. I discovered some of the code and found the line which is handling the variant dropdown.

 

                <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
                  id="SingleOptionSelector-{{ forloop.index0 }}"
                  data-name="{{ option.name }}"
                  data-index="option{{ forloop.index }}">
                  {% for value in option.values %}
                    <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
                  {% endfor %}
                </select>

 

 

If I change the line

<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>

to

<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }} {{ current_variant.price | divided_by: 100.00 }}</option>

 

It actually shows me the right price BUT ONLY the price of the standard variant which is chosen when I call the page.

It isnt variable with every variant

 

PaulNewton
Shopify Partner
6274 573 1319

@Tofuto wrote:

If I change the line

<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>

to

<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }} {{ current_variant.price | divided_by: 100.00 }}</option>

 

It actually shows me the right price BUT ONLY the price of the standard variant which is chosen when I call the page.

It isnt variable with every variant

 


current_variant is often hardset with something like the following

{% assign current_variant = product.selected_or_first_available_variant %}

so it is only the price for 1 item on the current product page.

When really you need to be referencing the specific variant (variant.price) for either the current loop, or depending theme and what the rest of the code is doing you need to make your own loop to match the variant to the options.

https://shopify.dev/docs/themes/liquid/reference/objects/variant

https://shopify.dev/docs/themes/liquid/reference/objects/product_option

 

Then there's the fact that is just the underlying HTML your theme is very likely using that as a base to then generate more specific dropdowns, you can quickly test this by disabling your browsers javascript.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


AvidBrio
Shopify Expert
295 17 29

you can change from your theme directory section/product-template.liquid  add this code into your theme template. 

 

   {% form 'product', product, class:form_classes, novalidate: 'novalidate', data-product-form: '' %}
            {% unless product.has_only_default_variant %}
              <div class="product-form__controls-group">
                {% for option in product.options_with_values %}
                  <div class="selector-wrapper js product-form__item">
                    <label for="SingleOptionSelector-{{ forloop.index0 }}">
                      {{ option.name }}
                    </label>
                    <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
                      id="SingleOptionSelector-{{ forloop.index0 }}"
                      data-index="option{{ forloop.index }}"
                    >
                      {% for value in option.values %}
                        <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
                      {% endfor %}
                    </select>
                  </div>
                {% endfor %}
              </div>
            {% endunless %}

            <select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
              {% for variant in product.variants %}
                <option value="{{ variant.id }}"
                  {%- if variant == current_variant %} selected="selected" {%- endif -%}
                >
                  {{ variant.title }}  {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
                </option>
              {% endfor %}
            </select>

 

If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
Graupner
Visitor
2 0 0

 

Did you find a solution for this one, @Tofuto?

Also, I tried your code, @AvidBrio. Wasn't able to get ut working. What line of code should your code replace?

Furthermore, I am working two options and would also like the price being added to show. 

I'm working on the Debut theme.

Thanks, Kenneth

AvidBrio
Shopify Expert
295 17 29

@Graupner   find this code into your template and you can see the select option into the product-template.liquid 

{% form 'product', product, class:form_classes, novalidate: 'novalidate', data-product-form: '' %}

you can find below the form 'product' , I posted my working solution debut theme.

If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
Graupner
Visitor
2 0 0

Thak you @AvidBrio

I found the correct place to paste your code but unfortunately, it didn't add the product price to the dropdown.

 

Graupner

PaulNewton
Shopify Partner
6274 573 1319

@Graupner you want to uses variant.price, etc near the following code 

{{ variant.title }}

as that's what's shown in the initial dropdown in most themes.

However as I previously noted in most themes this will disappear when another variant is selected as the javascript needs to be updated as well.

 

If you need someone to handle this customization you can hire me my email is paull.newton+shopifyforums@gmail.com 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


danielmalchi
Visitor
3 0 0

I have finally managed to achieve this here

https://everyremote.co.uk/products/new-replacement-remote-for-velux-window-remote-control-wur-101-50...
However the shop owner has exclusive rights to the modification so please contact the shop owner and they will install it for you for a fee.

alignedmerch
Tourist
10 1 4

Were you able to find a working solution? Having the same issue

danielmalchi
Visitor
3 0 0
Yes I had a mod developed by my team
please see this page for an example
https://remotesremade.com/collections/ac-remotes-for-elgin/products/ac-remote-for-elgin-ykr
We can set this up for you immediately at a one off cost of $90
Email me or simply send $90 through paypal to 123shinecouk@gmail.com if
you would like this done for your shop.
This simple mod almost doubled our sales because the users were not
confused about pricing for each variation.

crsun
Visitor
2 0 0

I solve this issue just add this code in your product.variants  options it works on me 🙂

{{ variant.title }} - {{ variant.price | money }}

Let me know if you need any help Cheers,