replace miniptures with dots

Hi there,

do you want this just on mobile?

Not.Everywhere.

If there are difficulties, then the mobile version is enough.

Can do it for everywhere.
So first off we need to add this PHP filter function:

add_filter( 'woocommerce_single_product_carousel_options', function( $options ) {
	$options['controlNav'] = "paging";
	return $options;
} );

Then this CSS:

.flex-control-paging {
	list-style: none;
	display: flex;
	justify-content: center;
	width: auto;
	margin: 0;
}

.flex-control-paging a {
	font-size: 0;
	padding: 8px; /* Size of dot */
	border-radius: 20px;
	background-color: black; /* Dot Color */
	margin: 0 8px; /* Space between dots */
}
.flex-control-paging a.flex-active {
	background-color: green; /* Active Dot Color */
}

Bravo! You are a wizard !!!

Awesome - glad to be of help :)

Does not work on variable goods.

Now it works on a regular product: Ordinary goods
Variable goods: Variable goods

Are you using any plugins or additional code for the Variable goods?

I tried on this test site and it works:

https://merch.assemblewp.com/product/happy-ninja/

Sir, I figured it out! The problem was that I installed this code)))
thank you very much for your mind and time!

add_action( 'template_redirect', function() {
remove_theme_support( 'wc-product-gallery-zoom' );
remove_theme_support( 'wc-product-gallery-lightbox' );
remove_theme_support( 'wc-product-gallery-slider' );
}, 100 );

Awesome - glad to be of help, glad you found the solution.