fbpx
Enjoy Year-End Sale: 50% Off All Plugins! Coupon Code: NewYear2025

Swatches for Desktop and Dropdown for Tablet and Mobile View

Hi,

I would like to have variation swatches for a variable product displayed only on Desktop using Elementor and dropdowns for both tablet and mobile. Is this possible?

 

Secondary Question – I’d like to remove the light gray background from the variation swatch, i tried using CSS and even with the !important it will not permit me to change it to #fff or transparent – I can hover change it to any color as long as I use a word such as ‘red’, ‘olive’, etc, just not ‘white’. What is the CSS selector I would target to accomplish this?

 

Screenshot 2024-11-02 124432.png

 

Thank you!

 

 

Golam Kibria

Hi J,

I hope that you are doing great.

Please share a product page link so we can inspect the issue.

Also, give us temporary admin access to your site.

You can try this plugin to create a passwordless temporary admin access link.

Once created, please share the link here.

Thank you

the link to the product in question is in the url field of the picture provided which is https://craftedbyjoanna.com/shop/cheese-cracker-earring/

 

Admin access isn’t required for a basic configuration question – which is can I display swatches for desktop view and dropdowns on tablet and mobile views.

 

The secondary question has been resolved, so that can be ignored.

 

Thank you!

Golam Kibria

Hi J,

I’m glad that you were able to solve the issue. BTW, the background comes from your theme.

Please add the following snippet to your child theme’s functions.php file:

add_filter('default_woo_variation_swatches_single_product_dropdown_html', function($default){
if ( wp_is_mobile() ) {
return true;
}
}, 10, 1);

You can also use the Code Snippets plugin.

Let me know if this helps.

Thank You