Shange thumbnails to dots navigation

Resolved lindish
(@lindish)

3 years ago

I want to change the thumbnails in woocommerce product image gallery to dots.

So far I have added this:

// Change Flexslider to use dots instead of thumbnails
add_filter( ‘woocommerce_single_product_carousel_options’, ‘ud_update_woo_flexslider_options’ );

function ud_update_woo_flexslider_options( $options ) {

$options[‘controlNav’] = true;
return $options;
}
That turned my thumbnails images in to a list of numbers.

The page I need help with: [log in to see the link]

Viewing 12 replies - 1 through 12 (of 12 total)

lorro
(@lorro)

3 years ago
The numbers come from jquery.flexslider.js, but there is no filter for the numbers and any edits to this file would be overwritten by updates.

However, you can modify the appearance with some custom css:
```
.flex-control-paging {
  margin: 0 !important;
  text-align: center;
}
.flex-control-paging li {
  display: inline-block;
}
.flex-control-paging a {
  visibility: hidden;
}
.flex-control-paging a::before {
  content: ".";
  font-size: 80px;
  line-height: 4px;
  visibility: visible;
}
```
Thread Starter lindish
(@lindish)

3 years ago

Thank you so much, that helped. How do I make the squares in to dots though?

lorro
(@lorro)

3 years ago

My keyboard viewer is giving me a character called “black circle” so you could use that instead of the full stop in the content style.

Thread Starter lindish
(@lindish)

3 years ago

Thank you so much for your help.
hanykamal
(@hanykamal)

2 years, 9 months ago
I tried this CSS but it didn’t work for my WooCommerce product page, Could you please help me to change thumbnails to dots.

BTW the code below works for spacing the sizing of thumbnails. but not for changing them to dots.
```
.woocommerce div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
  width: 20% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
```
lorro
(@lorro)

2 years, 9 months ago

@hanykamal
Please post the address of a relevant page on your site.

hanykamal
(@hanykamal)

2 years, 9 months ago

Here we go,
http://vigitron.tech/product/vi3405/
lorro
(@lorro)

2 years, 9 months ago
```
.woocommerce-product-gallery li {
  position: relative;
}
.woocommerce-product-gallery li::before {
  position: absolute;
  pointer-events: none;
  top: 10px;
  height: 20px;
  left: 40px;
  width: 20px;
  background-color: Black;
  content: ".";
  opacity: 1 !important;
}
.woocommerce-product-gallery li img {
  width: 20px !important;
  height: 20px;
  margin-left: auto !important;
  margin-right: auto !important;
  opacity: 1 !important;
}
```
hanykamal
(@hanykamal)

2 years, 9 months ago

Thanks so much, sir, but it doesn’t work the way it should be, I want it to look like the image below.

https://ibb.co/BC0sTcD

here is the link to the relevant page
http://vigitron.tech/product/vi3405/

please help
Thanks

lorro
(@lorro)

2 years, 9 months ago

I don’t think that can be achieved with css. You would need to use remove_action() to remove the image and the gallery, then code your own to replace it. It would be quite a bit of work for what it is.

hanykamal
(@hanykamal)

2 years, 9 months ago

If there is any CSS code, get something that looks smaller than the image I attached will be great. At least center the dots and reducing the spacing between the dots.
Please

lorro
(@lorro)

2 years, 9 months ago

I can’t help further. Our posts are a bit lost at the end of this old, resolved thread. You could try starting a new thread.

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘Shange thumbnails to dots navigation’ is closed to new replies.