How can i switch the color row list in select with name and color

i have e problem i have product with at last 60 diferent colors and on the way using atribute and variation on the product page it dont appear good how can i make the color variation in a select list with inside of select option the name of the color with the color so it appear much nice for the clients for example https://prnt.sc/1ym65z7 , or in case is not possible how can i display all the colors balls in one row and slide them on horizontal

Hello,

Try to add the following PHP code snippet to the child theme functions.php

function custom_wc_ajax_variation_threshold( $qty, $product ) {
    return 150;
}

add_filter( 'woocommerce_ajax_variation_threshold', 'custom_wc_ajax_variation_threshold', 10, 2 );

This will increase the standard WooCommerce variations number to be loaded with AJAX from 150.

Kind Regards

what exacly this do because i added this on children theme function.php but nothing happen.I think you misunderstood the question i have at last 60+ colors for 1 product and i want other nice and way to print it out with a select with inside the colors so theuser enter open the select and select one of the options with the color inside, because on this way the theme is it displays at last 7 or more colored balls for each product if i add all the colors i have and is not nice at all for the users .

Hello,

I have checked with the developer department. Please insert this code into the Theme Settings > General CSS:

@media (min-width: 1025px) {
	.website-wrapper .variations_form .variations .with-swatches select {
		max-width: 50%;
	}
}

.website-wrapper .variations_form .variations .with-swatches select {
	display: block;
}

.website-wrapper .variations_form .swatches-on-single {
	display: none;
}

.website-wrapper .variations_form .variations tr {
	display: flex;
	flex-direction: column
}

.website-wrapper .variations_form .variations tr td.label {
	margin-bottom: 10px;
}

.website-wrapper .variations_form .variations + .single_variation_wrap {
	margin-top: -20px;
}

In addition, check the settings in the Theme Settings > Single Product > Images > Additional variations images

If you have any questions please feel free to contact us.

Best Regards

The code you gave me did only the half of work i want into the select option the name like it is now and a square or circle or anythink with the color code i added to to the atribute please.
what i want is something like this https://prnt.sc/1yrs5b3

Hello,

Unfortunately, there is no option to do that. You can have either swatches or drop-down. Woo-commerce does not provide the option to add color swatches to the attribute items.

If you have any questions please feel free to contact us.

Best Regards

okay thank you for the information 🙂

You are welcome! We are here to help.

Wish you a wonderful day!

[Author]

Posts