Hiding all product variants for specific product

Caterina101
New Member
2 0 0

Hoping someone can help me with something that has me stuck for days.

I have a specific product that I am created hard-coded (using the variant ID's) checkbox grouping selections. So I basically built my own checkbox list, and am passing the selected results to the cart.

What I am trying to do now is hide the default variant radio buttons from appearing on the product page, as they are irrelevant and redundant. I only want the user to view my custom checkbox options. I've tried everything I can possibly think of and nothing is working. I am sure its a very basic fix, so I am really hoping for some advice!

Here is my product --> https://lionandfoxdesigns.com/collections/stationary/products/cute-cheeky-pencils?variant=3245185427...

Here is my code that is creating the custom check boxes and dropdown (I would love to be able to hide that dropdown too, but its not a show stopper)

***This is in my product-form.liquid file, and I am using the Out of the Sandbox Responsive theme***


{% if template == 'product.cutepencils' %}
<p class="line-item-property__field">


<body id="page-product">
<div id="wrapper">


<div class="content clearfix">

<div class="col-5 product">


<p>Pick 2 of your favorite pencil options to create your own set.</p>

<form action="/cart/add" method="post">
<div id="product-variants">



<script type="text/javascript" charset="utf-8">
//<![CDATA[
// Building a hash of variant IDs where the key is the variant title.
Shopify.ids = {};
Shopify.ids['TEST 1, TEST 2'] = '32451853975607';
Shopify.ids['TEST 1, TEST 3'] = '32451854008375';
Shopify.ids['TEST 2, TEST 3'] = '32451854270519';



// When the add to cart button is clicked.
jQuery(function() {
jQuery('#purchase').click(function() {
var selected = jQuery('#product-variants :checkbox:checked');
// If we not selected 2 items, give shopper some alert box.
if (selected.length !== 2) {
alert('Please pick 2 selections of pencils');
return false;
}
// Build the variant title and update the drop-down selection accordingly.
else {
var variantTitle = '';
selected.each(function(i) {
variantTitle += jQuery(this).val();
if (i < 1) {
variantTitle += ', ';
}
});
jQuery('#product-select').val(Shopify.ids[variantTitle]);
jQuery(this).submit();
}
});
});

//]]>
</script>




<ul id="selection">
<li>
<input id="selection-0" type="checkbox" class="pencil_options" value="TEST 1" />
<label for="selection-0">TEST 1</label>
</li>
<li>
<input id="selection-1" type="checkbox" class="pencil_options" value="TEST 2" />
<label for="selection-1">TEST 2</label>
</li>
<li>
<input id="selection-2" type="checkbox" class="pencil_options" value="TEST 3" />
<label for="selection-2">TEST 3</label>
</li>
</ul>

<select id="product-select" name='id'>
<option value="32451853975607">TEST 1, TEST 2</option>
<option value="32451854008375">TEST 1, TEST 3</option>
<option value="32451854270519">TEST 2, TEST 3</option>


</select>

</div><!-- product variants -->

<div class="price-field"></div>
<input type="submit" name="add" value="Add to cart" id="purchase" />
</form>

</div><!-- .col-5 -->

<script type="text/javascript">
// <![CDATA[
var selectCallback = function(variant, selector) {
if (variant && variant.available == true) {
// selected a valid variant
jQuery('#purchase').removeClass('disabled').removeAttr('disabled'); // remove unavailable class from add-to-cart button, and re-enable button
jQuery('.price-field').html(Shopify.formatMoney(variant.price, "${{amount}} CAD")); // update price field
} else {
// variant doesn't exist
jQuery('#purchase').addClass('disabled').attr('disabled', 'disabled'); // set add-to-cart button to unavailable class and disable button
var message = variant ? "Sold Out" : "Unavailable";
jQuery('.price-field').text(message); // update price-field message
}
};

// initialize multi selector for product
jQuery(document).ready(function() {
new Shopify.OptionSelectors( { product: { onVariantSelected: selectCallback });
$('#product-variants div').addClass("selector-wrapper") ;
$('#product-variants div label').css("float","left");
$('#product-variants div select').css("float","right");
$('#product-variants div ').addClass("clearfix");
});

// ]]>
</script>
</div><!-- .content -->
</div><!-- #wrapper -->

</body>

</p>

{% endif %}

 

0 Likes
gina-gregory
Shopify Expert
710 48 175

I took a look at the source code for your product page link and you've got some messed up HTML in there. You have 2 add to cart forms (one inside the other). The swatches (radio buttons) are in the outer form, which is not shown in the code you posted. I also saw an additional <body> tag (id="page-product") before your inner form. So that's not great. Anyway, you'll have to backtrack through your product page code to find the outer form and the swatches (what you're trying to remove).

0 Likes
Caterina101
New Member
2 0 0
OK great thank you, I will try to address all those issues!
0 Likes