Skip to content

Instantly share code, notes, and snippets.

@codescribblr
Last active January 5, 2023 20:10
Show Gist options
  • Save codescribblr/595e2b1ffc1fce919555 to your computer and use it in GitHub Desktop.
Save codescribblr/595e2b1ffc1fce919555 to your computer and use it in GitHub Desktop.
Custom Select Box Replacements for Woocommerce Variations
.woocommerce.single-product .product .summary .variations {
width: 100%;
}
.woocommerce.single-product .product .summary .variations td {
display: block;
width: 100%;
}
.woocommerce.single-product .product .summary .variations td label {
font-family: 'Nunito', Helvetica, Arial, sans-serif;
letter-spacing: 0px;
font-weight: normal;
font-style: normal;
text-transform: uppercase;
font-size: 1.2em;
text-align: left;
display: block;
margin-top: 20px;
}
.woocommerce.single-product .product .summary .variations .radioSelectContainer input {
visibility: hidden;
}
.woocommerce.single-product .product .summary .variations .radioSelectContainer > select {
display: none;
}
.woocommerce.single-product .product .summary .variations .radioSelectContainer > label {
display: inline-block;
margin: 5px 5px 0 0;
}
.woocommerce.single-product .product .summary .variations .radioSelectContainer > label > span {
font-family: 'Oswald', 'Nunito', Helvetica, Arial, sans-serif;
letter-spacing: 0px;
text-transform: uppercase;
font-style: normal;
font-weight: normal;
font-size: .8em;
padding: 17px 11px;
text-align: center;
display: block;
white-space: nowrap;
cursor: pointer;
background-color: #cdcdcd;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
}
.woocommerce.single-product .product .summary .variations .radioSelectContainer > label > span:hover {
background-color: #000000;
color: #ffffff;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
}
.woocommerce.single-product .product .summary .variations .radioSelectContainer > label > input {
position: absolute;
top: -20px;
}
.woocommerce.single-product .product .summary .variations .radioSelectContainer > label > .checked {
background-color: #000000;
color: #ffffff;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
}
.woocommerce.single-product .product .summary .variations .radioSelectContainer.pa_flavor {
max-height: 220px;
overflow-y: scroll;
}
.woocommerce.single-product .product .summary .variations .reset_variations {
margin-top: 15px;
display: block !important;
}
$('.variations select').each(function (selectIndex, selectElement) {
var select = $(selectElement);
buildSelectReplacements(selectElement);
select.parent().on('click', '.radioControl', function(){
var selectedValue,
currentlyChecked = $(this).hasClass('checked');
$(this).parent().parent().find('.radioControl').removeClass('checked');
if(!currentlyChecked){
$(this).addClass('checked');
selectedValue = $(this).data('value');
} else {
selectedValue = '';
}
select.val(selectedValue);
select.find('option').each(function(){
$(this).prop('checked', ($(this).val()==selectedValue) ? true : false);
});
select.trigger('change');
});
$('.reset_variations').on('mouseup', function(){
$('.radioControl.checked').removeClass('checked');
});
});
$('.variations_form').on('woocommerce_update_variation_values', function(){
selectValues = {};
$('.variations_form select').each(function(selectIndex, selectElement){
var id = $(this).attr('id');
selectValues[id] = $(this).val();
$(this).parent().find('label').remove();
//Rebuild Select Replacement Spans
buildSelectReplacements(selectElement);
//Reactivate Selectd Values
$(this).parent().find('span').each(function(){
if(selectValues[id]==$(this).data('value')){
$(this).addClass('checked');
}
});
});
});
function buildSelectReplacements(selectElement){
var select = $(selectElement);
var container = select.parent().hasClass('radioSelectContainer') ? select.parent() : $("<div class='radioSelectContainer' />");
select.after(select.parent().hasClass('radioSelectContainer') ? '' : container);
container.addClass(select.attr('id'));
container.append(select);
select.find('option').each(function (optionIndex, optionElement) {
if($(this).val()=="") return;
var label = $("<label />");
container.append(label);
$("<span class='radioControl' data-value='"+$(this).val()+"'>" + $(this).text() + "</span>").appendTo(label);
});
}
.variations {
width:100%;
td {
display: block;
width: 100%;
label {
.Nunito();
text-transform: uppercase;
font-size: 1.2em;
text-align: left;
display: block;
margin-top:20px;
}
}
/* http://jsfiddle.net/496c9/ */
.radioSelectContainer {
input {
visibility: hidden;
}
> select {
display: none;
}
> label {
display: inline-block;
margin: 5px 5px 0 0;
}
> label > span {
.Oswald();
font-weight: normal;
font-size: .8em;
padding: 17px 11px;
text-align: center;
display: block;
white-space: nowrap;
cursor: pointer;
background-color: @mediumbg;
.transition(all 250ms linear);
&:hover {
background-color: @blackbg;
color: @lighttext;
.transition(all 250ms linear);
}
}
> label > input {
position: absolute;
top: -20px;
}
> label > span.checked {
background-color: @blackbg;
color: @lighttext;
.transition(all 250ms linear);
}
&.pa_flavor {
max-height:220px;
overflow-y: scroll;
}
}
.reset_variations {
margin-top:15px;
display:block !important;
}
}
@muhammadhusnain981
Copy link

i am facing a serious issue regarding displaying the different products option (variable products)
please if anyone can guide
also, I have tried the above CSS in the custom CSS section from customizer but it's not changing
attaching a screenshot for reference
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment