[Resolved] replace miniptures with dots

[Любомир]

how to make points instead of thumbnails of photos. amazon example

[David]

Hi there,

do you want this just on mobile?

[Любомир]

Not.Everywhere.

[Любомир]

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

[David]

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 !!!

[David]

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

[David]

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 );

[David]

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

[Author]

Posts