Single Product Gallery shows only one Thumbnail

[postbox-007]

Hello.
I’m currently using the “Thumbnails Bottom” setting in the Single Product section. Everything works fine there.
(Theme Settings -> Single Product -> Gallery)

I wanted to switch to “Thumbnails on the Side” just to test it out. But here, only one thumbnail is displayed.

Can you help me with this?

• This topic was modified 3 weeks, 4 days ago by postbox-007.

Attachments:

You must be logged in to view attached files.

Hello,

Select the Thumbnails Left gallery layout and adjust the Gallery Width and Gallery Height settings accordingly. Once these dimensions are configured properly, the thumbnails should display correctly on the side instead of showing only a single thumbnail.

See Screenshot for better understanding:
https://ibb.co/tT9yLP2p
https://ibb.co/fPd1RBj

Best Regards

Thank you very much. I’ve managed to fix that now.

I tweaked the appearance a bit using CSS. It’s working so far.

.wd-arrow-inner, .wd-nav-arrows, .wd-pos-sep, .wd-prev, .wd-nav-arrows, .wd-pos-sep, .wd-next {
    background-color: rgba(180,180,180,0.55) !important;
		text-shadow: 0px 2px 2px #777;
}
.wd-arrow-inner, .wd-arrow-inner:after, .wd-arrow-inner:hover {
    color: #fff;
	  text-shadow: 0px 2px 2px #777;
	  font-size: var(--wd-arrow-icon-size, 28px);
    font-family: "woodmart-font";
}
.wd-arrow-inner {
    width: var(--wd-arrow-width, var(--wd-arrow-size, 50px));
    height: var(--wd-arrow-height, var(--wd-arrow-size, 40px));
}

But I still have one problem. When the buttons in the left thumbnail row are hidden (because there are fewer thumbnails), the background stays gray.

I can’t get rid of that. Can you help me with this? I only want the boxes to be gray, like in the main image.

Attachments:

You must be logged in to view attached files.

Hello,

You are using a single product layout. Navigate to Layouts > Edit the single product layout > edit product gallery and set the thumbnail width and gallery gap. Please now check the single product page and check the issue.

See Screenshot for better understanding:
https://postimg.cc/TKCR4cfr

Best Regards

[postbox-007]

I’ve set it to “Single Product (DE)”: Thumbnails on the left.

The gray rectangle (see also the previous post) remains unaffected and is always visible, even if no up/down arrows are visible.

• This reply was modified 3 weeks, 3 days ago by postbox-007.

Attachments:

You must be logged in to view attached files.

Hello,

Remove the value from Thumbnail gallery width and check the issue:
https://postimg.cc/1gQXNKsX

Best Regards

The gray background—that is, behind the boxes with the buttons—is still always there.
However, I believe that entering the width has no effect on the gray background area.

And I want the thumbnails to be narrower, so I entered 80px there.

Attachments:

You must be logged in to view attached files.

Hello,

The gray background is coming from your custom CSS, not from the Thumbnail Gallery Width setting. That option only controls the width of the thumbnails and does not affect the navigation area styling.

The gray area remains visible because your CSS is targeting the entire navigation container (.wd-nav-arrows), which still exists even when the thumbnail arrows are hidden.

If you want the gray background to appear only behind the arrows in the main featured image carousel, and not in the thumbnail gallery navigation, please target only the arrow buttons themselves:

Please remove your previous custom CSS snippet and replace it with the following:

.woocommerce-product-gallery .wd-carousel:not(.wd-gallery-thumb) ~ .wd-nav-arrows :is(.wd-prev, .wd-next) {
    background-color: rgba(180, 180, 180, 0.55) !important;
    text-shadow: 0px 2px 2px #777;
}

.woocommerce-product-gallery .wd-thumb-nav :is(.wd-prev, .wd-next) {
    background-color: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.wd-arrow-inner, .wd-arrow-inner:after, .wd-arrow-inner:hover {
    color: #fff;
    text-shadow: 0px 2px 2px #777;
    font-size: var(--wd-arrow-icon-size, 28px);
    font-family: "woodmart-font";
}

Best Regards

Perfect! Thank you.

I have two more suggestions for improvements that I can’t implement myself.

Can I make the gray boxes in the main image a little smaller?
Can I use circles instead of boxes? Similar to the screenshot

Attachments:

You must be logged in to view attached files.

Hello,

I’m glad to hear the first fix worked perfectly for you!

To achieve this, you need to add a border-radius: 50% to make them perfectly round, change the height to match the width, and center the inner icon cleanly.

Please add this updated CSS snippet to your theme settings > Custom CSS.

.woocommerce-product-gallery .wd-carousel:not(.wd-gallery-thumb) ~ .wd-nav-arrows :is(.wd-prev, .wd-next) {
    background-color: rgba(180, 180, 180, 0.55) !important;
    text-shadow: 0px 1px 2px rgba(0,0,0,0.4);
        border-radius: 50% !important;
        width: 40px !important;
    height: 40px !important;
        display: inline-flex !important;
    align-items: center !important;
}

.wd-arrow-inner, .wd-arrow-inner:after, .wd-arrow-inner:hover {
    color: #fff;
    font-size: 20px !important; /* Slightly smaller icon font size to balance the smaller circle */
    font-family: "woodmart-font";
    margin: 0 !important;
}

Best Regards,

The navigation arrows on the main screen look really good. However, the thumbnails on the left now look strange. I couldn’t figure out a solution on my own.

Attachments:

You must be logged in to view attached files.

Hello,

Your issue has been resolved. The issue is caused by the custom CSS affecting both the main gallery navigation and the thumbnail navigation. The thumbnail arrows use the .wd-thumb-nav class, so they inherit the circular styling as well.

Instead of resetting the thumbnail arrows, add this selector so that it applies only to the main featured image arrows:

.woocommerce-product-gallery .wd-nav-arrows:not(.wd-thumb-nav) .wd-prev,
.woocommerce-product-gallery .wd-nav-arrows:not(.wd-thumb-nav) .wd-next {
    background-color: rgba(180, 180, 180, 0.55) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

This way, the circular styling will be applied only to the main product gallery arrows, while the thumbnail navigation (.wd-thumb-nav) will preserve its default appearance.

Best Regards

Nice. Thank you !

A quick question:
Is there a way to set the gallery so that when you reach the last image, it starts over from the beginning – that is, from the first image?

Hello,

Unfortunately, there is currently no built-in option in the WoodMart theme to make the product gallery loop back to the first image after reaching the last one.

Achieving this behavior would require custom code customization beyond the default theme functionality.

Best Regards.

[Author]

Posts