Shange thumbnails to dots navigation

  • Resolved lindish

    (@lindish)


    3 years, 8 months 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)

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

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

    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)

    Thank you so much for your help.

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

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

    Here we go,
    https://vigitron.tech/product/vi3405/

    .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;
}

    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
    https://vigitron.tech/product/vi3405/

    please help
    Thanks

    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.

    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

    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.