preview slider with square images and modifying background color

[steveginer]

Hi – Can you tell us precisely where we can control the background color of the preview slider? We are using square images with white backgrounds and the default grey is showing behind our images. We would also like to know which image size is selected by default for the preview slider and whether or not one can can control the image that is used. What is the optimal image size for the slider if we were to reformat the aspect ratio to work with the slider defaults? Thanks.

[Kyle – SUPPORT]

Hi

It uses the bold recent post background color

– Kyle

[steveginer]

What’s the main grouping in the customizer? Also, please let us know the answer to our other questions i.e.
What is optimal image size for preview slider?
Which image size is selected by default for the preview slider?
Can these values be changed?
Thanks.

[David Martin – Support]

Hi,

The image is set by the Catalog Thumbnail, this can be set WooCommerce > Settings > Products > Display
.

After changing the image size you would need to rebuild your thumbnails, using this plugin: https://wordpress.org/plugins/ajax-thumbnail-rebuild/.

We use 700 x 904 in the demo.

Regarding the color query, can you add a screenshot or link so I am clear on what you refer to?

Thanks.

[imawake]

Hi,

I too am having trouble removing the grey background color behind products (see screenshot). I am using the preview slider settings as some products have color variations. I tried changing the “bold recent post background color” to white as Kyle suggested above, but this did not work. Any other suggestions? Thanks!

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi @imawake,

Can you provide us a link to that page so we can inspect the code?

-Rui

[imawake]

Hi @Rui,

That pic was from this page: http://fairtradewinds.staging.wpengine.com/stationery-journals/

The issue is on every category page.

Thanks for your help.

[David Martin – Support]

Please test this:

.preview-slider-item-wrapper {
    background: transparent;
}

Thanks.

[imawake]

That did the trick, David! Thanks for your help.

[Kyle – SUPPORT]

Great, thanks David

– Kyle