Hi,
You can add classes to each fields. From the each field settings.
Please add classes separated by spaces
Thank you!
Thread Starter
7case
(@7case)
Hi Rahul,
I think what you mean is adding a class to the field itself. But what I mean is adding classes to the options of the field.
If you check the link I have 2 options: 1.Snap, 2.Tough. I want the background image to change when I choose ‘tough’.
Hi,
I understood the requirement. But we are sorry only you can add class to the element itself and the parent of that field will have <your class>_parent
Eg :
class : test_class
then, parent class : test_class_parent
If you want to style the options of the select you can use css :nth-child() property
Reference : View
Thread Starter
7case
(@7case)
So I did this:
.snaptough.wcpa_has_price.wcpa_use_sumo:nth-child(1) {
padding-left: 50px;
background-size: 39px;
background-repeat: no-repeat;
background-position: left top;
background-image: url(https://www.7case.nl/wp-content/uploads/2021/09/snap_case.jpeg);
}
.snaptough.wcpa_has_price.wcpa_use_sumo:nth-child(2) {
padding-left: 50px;
background-size: 39px;
background-repeat: no-repeat;
background-position: left top;
background-image: url(https://www.7case.nl/wp-content/uploads/2021/09/tough_case.jpeg);
}
It still applies to both of them. What am I doing wrong here?
Hi,
You should write the styles for option
.snaptough.wcpa_has_price.wcpa_use_sumo option:nth-child(1) {
//Styles Here
}
But we suggest that you can choose our premium version feature. We have a field called image group. In this you can use images as options. And If you choose the field, gallery image can be update accordingly.
Thread Starter
7case
(@7case)
.snaptough.wcpa_has_price.wcpa_use_sumo option:nth-child(1) {
padding-left: 50px;
background-size: 39px;
background-repeat: no-repeat;
background-position: left top;
background-image: url(https://www.7case.nl/wp-content/uploads/2021/09/snap_case.jpeg)
}
This doesn’t do anything, unfortunately, it just leaves blank.
Can you check on the link I posted? Please see this: https://imgur.com/a/qjPCEmB
Hi,
It is not possible because.
Normal Select Box Does not support editing their option.
And styling those elements.
You should use additional plugin like sumo select to achieve this. Or by custom JS code by their value.
You can use the script like
jQuery(document).ready(function() {
if(jQuery(this).val() == 'snapoption'){
jQuery(this).css('background-image','url(https://www.7case.nl/wp-content/uploads/2021/09/snap_case.jpeg)');
}
jQuery('.snaptough').on('change', ()=> {
if(jQuery(this).val() == 'snapoption'){
jQuery(this).css('background-image','url(https://www.7case.nl/wp-content/uploads/2021/09/snap_case.jpeg)');
} else if (jQuery(this).val() == 'toughoption'){
jQuery(this).css('background-image','url(https://www.7case.nl/wp-content/uploads/2021/09/tough_case.jpeg)');
}
});
});
and CSS will be
.snaptough {
padding-left: 50px;
background-size: 39px;
background-repeat: no-repeat;
background-position: left top;
}
