Customize the attribute select button
-
Could you provide me with some custom css code or some way to make this widget show 3 on top and 3 on the bottom? and remove the “X Clear” option
Attachments:
You must be
logged in to view attached files.
Hi emp.strutzki,
Thanks for reaching to us.
1. Swatches.
Try to add the following Custom CSS code to Theme Settings > Custom CSS > CSS for desktop
.single-product .wd-swatches-product.wd-shape-rounded {
display: flex;
flex-direction: row;
}
.single-product [class*="wd-swatches"].wd-shape-rounded .wd-swatch {
flex: 0 0 31%;
}
2. Remove button
If you remove that button, there is no way to reset selected swatches. You can use to add the following Custom CSS to Theme Settings > Custom CSS > Global custom CSS
.single-product .wd-reset-var {
display: none;
}
Regards,
Thank you very much, that’s exactly what I needed, can you provide me with a css so that the mobile and tablet look the same as the desktop? 3 size options online and 3 more options below
Hi emp.strutzki,
Please remove previous code.
Try to add the following Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS
.single-product .wd-swatches-product.wd-shape-rounded {
display: flex;
flex-direction: row;
}
Try to add the following Custom CSS code to Theme Settings > Custom CSS > CSS for desktop
.single-product [class*="wd-swatches"].wd-shape-rounded .wd-swatch {
flex: 0 0 31%;
}
Try to add the following Custom CSS code to Theme Settings > Custom CSS > CSS for mobile
.single-product [class*="wd-swatches"].wd-shape-rounded .wd-swatch {
flex: 0 0 30%;
}
Regards,
It worked perfectly, is there a way to make the images in the first selection aligned with the size of the second selection with css too?
Attachments:
You must be
logged in to view attached files.
Can you help me with this too please?
Hi emp.strutzki,
Try to add the following Custom CSS code to Theme Settings > Custom CSS > CSS for desktop
.single-product [class*="wd-swatches"].wd-size-xlarge {
--wd-swatch-size: 97px;
}
Try to add the following Custom CSS code to Theme Settings > Custom CSS > CSS for mobile
@media (max-width: 465px){
.single-product [class*="wd-swatches"].wd-size-xlarge {
--wd-swatch-size: 80px;
}
}
If you have a quick minute we always appreciate a 5-star rating on our theme!
https://themeforest.net/item/woodmart-woocommerce-wordpress-theme/reviews/20264492
Your feedback is the motivation to improve our work and services.
Regards,
On the desktop it looked good, on mobile on some screens it breaks the line, there are 3 images on the top line and one on the bottom, is there any way to always keep the 4 on a single line and always aligned with the one below?
Hi emp.strutzki,
Please check again https://prnt.sc/aWoWir1A5l5c Or you can decrease font-size value in mobile section.
Also, please remove this code
@media (max-width: 465px){
.single-product [class*="wd-swatches"].wd-size-xlarge {
--wd-swatch-size: 80px;
}
}
And use below one for mobile section
.single-product [class*="wd-swatches"].wd-size-xlarge {
--wd-swatch-size: 80px;
}
Regards,
Hi emp.strutzki,
Glad to hear your issue has been resolved. Keep us in mind for future questions and concerns, we’re always here to help!
If you have a quick minute we always appreciate a 5-star rating on our theme!
https://themeforest.net/item/woodmart-woocommerce-wordpress-theme/reviews/20264492
Your feedback is the motivation to improve our work and services.
Regards,
The topic ‘Customize the attribute select button’ is closed to new replies.
.
