How can I hide the size variant button on a product page?

Store Design
1

Hello, looking for away to hide the sizing variant button within the product page. Here is the current code structure:

{% for option in product.options_with_values %}
            {% if option.name == 'Size' %}
                
                    

                        

                            
                        

                        
                            {% assign values = option.values | sort_natural %}
                            {% for value in values %}
                         
                              
                          
                            {% endfor %}
                        

                    

                

            {% endif %}

        {% endfor %}
    {% endunless %}

Thank you in advance!

2

Hi @mike_mrsmith ,

You are trying to hide this:

Screenshot.png
Screenshot.png725×472 16.9 KB

Please change all code:

{% for option in product.options_with_values %}
            {% if option.name == 'Size' %}
                
                    

                        

                            
                        

                        
                            {% assign values = option.values | sort_natural %}
                            {% for value in values %}
                         
                              
                          
                            {% endfor %}
                        

                    

                

            {% endif %}

        {% endfor %}
    {% endunless %}

Hope it helps!

3

First off, thank you for the quick turnaround on this response! This almost hits the nail on the head. I should have clarified a bit more. Trying to hide the singular sizes. So for example, if there is no stock for Large then the “L” button would display to none. I hope that clarifies a bit more. Thank you, again!

4

Hi @mike_greiner28 ,

Can you send me the product link with the variant sold out, I will check it for you

5

https://thisisneonwave.com/products/ari-peace-crew?_pos=1&_sid=12342084c&_ss=r?variant=37805140213936

Large sizes are sold out

6

Hi @mike_greiner28 ,

I checked and it is complicated request. It will need to change the entire Liquid code and add JS code to test it, so I recommend you contact the theme directly or hire a professional for it.

Refer: https://community.shopify.com/c/Shopify-Ecommerce-Jobs/bd-p/shopify-job-board

Hope it helps!

7

@mike_mrsmith It seems you are looking to hide “Sold out variants”.
You can try contacting theme developers to check if they have this feature or if they can build it for you.
In terms of development, mainly Javascript will be used to hide sold-out sizes based on selected colors. For products that have 1 option (eg: either color or size option), it should be fairly easy to implement. You may hire a developer for the same as suggested by @LitCommerce .

Based on your theme, other solutions:

  • Use code snippets provided by developers/websites and see if that works for you. Not sure if they have code that supports your unique theme.
  • If you are willing to change the color options dropdown to buttons similar to size options, you can use the Camouflage app developed by me. Currently, it doesn’t support dropdowns and buttons mixed structure in your theme.
  • There is a pull request for the Dawn theme that you can check and try to adapt to your theme.