Hiding unavailable variants for selected variants on Product page

[farrukhirfan07]

Hi Shopify Community, 
I'm facing an issue with my shopify store's product page. I want a unique variant selection option for my products. 

The thing is that I want my product page to have conditional variants option enabled. There are 2 variant selection options on the page. The first one is the region which has options (US,EU) and the second selection option is Bed Sizing and type. The bed sizes for US are in inches and the sizes for EU are in cm. 

I want a code which helps me to connect the related US and EU variants to each other and hide the other corresponding variants which are not available for the region. I'm attaching the URL of the product page so that you can easily navigate it and let me know if anyone has a solution. 

https://bfy46tl3s3rx43gz-87298572632.shopifypreview.com/products/basic-set-with-1-duvet-1-duvet-cove...

Remember, I only need a code.

[devmont-digital]

Hello @farrukhirfan07,

How to Link US and EU Variants and Hide Unavailable Variants Based on Region

Follow these steps:

Step 1: Create a Product

First, create your product in Shopify.

Step 2: Create Variations

• Set up the "Region" and "Bed Size & Slit Type" as product variations.
• Make sure all possible options for these variations are created.

Step 3: Assign Variants to Regions

In the Shopify product editor:

1. Below the variants section, Shopify automatically generates all possible variant combinations.
2. First, enable EU variants.
3. Select the variants that should NOT be shown in the EU region and delete them.
4. Now, do the same for the US region. Enable US variants and remove the ones that should not be displayed.
   

Step 4: Modify the Theme Code

1. Go to Online Store → Themes → Edit Code.

2. Search for the file product-variant-options.liquid and open it.

3. Replace its content with the following code:

{% unless option_disabled %}
    <option
      id="{{ input_id }}"
      class="{% if option_disabled %}unavailable{% else %}available{% endif %}"
      value="{{ value | escape }}"
      {% if value.selected %}
        selected="selected"
      {% endif %}
      {% if swatch_value and picker_type == 'swatch_dropdown' %}
        data-option-swatch-value="{{ swatch_value }}"
        {% if swatch_focal_point %}
          data-option-swatch-focal-point="{{ swatch_focal_point }}"
        {% endif %}
      {% endif %}
      {{ input_dataset }}
    >
      {% if option_disabled -%}
        {{- 'products.product.value_unavailable' | t: option_value: value -}}
      {%- else -%}
        {{- value -}}
      {%- endif %}
    </option>
{% endunless %}

Step 5: Modify the CSS

1. Open the base.css file in your theme.

2. Scroll to the bottom and add this CSS:

.product .unavailable {
  display: none;
}

Final Outcome:

• Variants that are unavailable for a specific region (US or EU) will not be displayed in the product dropdown.
• The CSS rule hides unavailable options to ensure a better user experience.

[farrukhirfan07]

Hi devmont-digital,

Glad that you have identified the issue and provided a solution for it. I had already done the first 3 steps and was in need of the code which you have provided in Steps 4 and 5. I appreciate that. 

Unfortunately, the issue remains persistent even after entering these 2 code snippets to the respective files. Now, the unavailable variants are hidden but on selecting the other region variant option (i.e. EU) the product shows sold out instead of the Preorder button (which I've connected via an application named EZ PreOrder). You can see it through the URL again. If you think that I can use a code for having Preorder button you can help me out with that too. I'm all in for that solution too.

Let me clear that this store works on manufacturing after receiving X preorders so we don't have a stock available in store for the variants.

What approach should I try now in order to resolve this issue? I really appreciate you assisting me on this one and I'm looking forward to hear from you again!

[devmont-digital]

Go to the variants you have created for the EU, select them all, and click on Bulk Edit.

Then, click on Columns, checkmark "Continue selling when out of stock", and then apply the checkmark to all product variants.

This will remove the "Sold Out" button.

[farrukhirfan07]

All the variants already have this option enabled. Still it shows sold out.

As I told I've used an app for adding the preorder button in which the condition automatically sets all variants Continue selling when out of stock as enabled. Should I remove the app then? Can you provide a code for setting the preorder button instead of add to cart.

[devmont-digital]

Yes, the Preorder button can be implemented using custom code, and you can remove the app.

Steps to Follow for Custom Code:

1. Go to Online Store → Themes → Edit Code
2. Search for the file buy-button.liquid
3. Find the ProductSubmitButton class, comment it out, and manually replace it with "Preorder"
   
4. Then, find the first closing div tag after this button and add the following code there.

  <input id="pre-order" type="hidden" name="properties[Type]" value="Pre Order">​