Ecommerce Shopify WordPress Discussion

How to find the right product variant in Shopify?

I have a section where I display all the products. I make custom radio buttons for them with product colors and sizes I display buttons with colors separately - the color is made as a metafield for the product option. And I display the product dimensions separately. When I click on the "Add to cart" button, I need to look for the desired option from the selected color and size. How can i do this? I need to combine two options and find the right one //How I display radio buttons with colors and sizes <div class="variants-picker__list"> {% assign color_keys = 'Color,color,Colour,colour' | split: ',' %} {% for key in color_keys %} {% if product.options contains key %} {% for color_option in product.options_by_name[key].values %} {% for variant in product.variants %} {% if variant.options contains color_option %} {% if variant.metafields.custom.color %} {% assign background_style = variant.metafields.custom.color %} {% assign variant_id = variant.id %} {% endif %} {% endif %} {% endfor %} <input type="radio" name="{{ product.id }}_card_color" id="{{ product.id }}_color_{{ forloop.index }}" data-variant-id="{{ variant_id }}" style="background: {{ background_style }}; background-size: cover;" > {% endfor %} {% endif %} {% endfor %} {%- for option in product.options_with_values -%} {%- for value in option.values -%} {% if option.name == 'Size' %} <input type="radio" id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" name="{{ option.name }}" value="{{ value | escape }}" {% if option.selected_value == value %} checked {% endif %} {% if option_disabled %} class="disabled" {% endif %} > <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"> {{ value }} </label> {% endif %} {% endfor %} {% endfor %} {% comment %} {% render 'custom-product-variant-picker', product: product, product_form_id: product_form_id %} {% endcomment %} </div> Run code snippetExpand snippet
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.