Return to previous page

Number of product photos shown or size of these photos on larger screens

This topic has 11 replies, 3 voices, and was last updated 2 years ago ago by Martine

Martine

Participant

October 26, 2022 at 17:56

Hello,

My customer would like the shop full width. See two attached photos. On a smaller screen (19″) it looks fine. On a larger screen it doesn’t. Is there a setting somewhere with which I can indicate that from a certain screen size there should not be 3 but 4 products next to each other?
Or that the photos are then displayed larger (completely in the shadow frame)?

https://www.loom.com/i/3f618dabb8db4a6bb3616c92abaeb70b
https://www.loom.com/i/e4b911dbb81949aa9a89d1a6f7725a00

#337382 Copied Theme version: 8.0.10 WooCommerce version: 6.7.0

10 Answers

Rose Tyler

Support staff

October 26, 2022 at 19:37

Hello,

Please provide URL of the site and temporary wp-admin access, so we can take a closer look.

Reards

#337386 Copied

Martine

Participant

October 26, 2022 at 21:26

Okay, see private content.

Also, on product page: due to the full width setting, the photo is not displayed nicely. Can it fill the space available for the photo?

Please contact administrator
for this information.

#337389 Copied

Tony Rodriguez

Support staff

October 27, 2022 at 05:56

Hello, @Martine,

You can set the 4 products next to each other in a row for the shop page also you can set the product image sizes.

To set the 4 products simply go to the Dashboard >> XSTORE >> Theme Options >> WooCommerce >> Product Catalog >> from there you can set the 4 products per row see image: https://postimg.cc/crNnq883
To set the product images size navigate to the Dashboard >> XSTORE >> Theme Options >> WooCommerce >> Product Images and from you will be able to set the product images size check the image: https://postimg.cc/5XXFdcmH

These are the options in the theme. You cannot set the product limit per row on the specific resolution you want. Changes will work on other devices like tablets and mobile automatically.

For the single product page product image if you set the image size using custom CSS it will destroy the product image pixels. As I told you how to set the product image size you can check this option otherwise use the high-resolution product images to cover up the empty space.

Note: whatever size of the image you use kindly then use the same size for all the images.

Regards 8Themes Team.

#337404 Copied

Martine

Participant

October 27, 2022 at 06:01

Thanks for your answer. I set the full width for complete site. Could it also be the case that this setting applies to the entire site, except for the single product page and the checkout page? If so, how do I set this up?

#337405 Copied

Tony Rodriguez

Support staff

October 27, 2022 at 08:04

Hello, @Martine,

Yes, You can disable the full-width layout for the single product page by navigating to the Dashboard >> XSTORE >> Theme Options >> WooCommerce >> Single Product builder >> Layout, and from there disable the full-width option check the image: https://postimg.cc/DWFyRqn9

For the checkout page, there is no option in the theme to set the layout for this specific page it comes from WooCommerce and in this, there is no such feature like this as well.

Regards 8Themes Team.

#337416 Copied

Martine

Participant

October 27, 2022 at 11:40

Hi!

This option is unchecked: see screenshot https://www.loom.com/i/eefc47c7644c419fa9f5a44cf408974d

As you can see on https://putsies.com/product/abandoned-rails/ it’s still shows in full width.

#337432 Copied

Martine

Participant

October 27, 2022 at 11:51

And is there a way to make these images fit in the shadowbox when this page is full width? See https://www.loom.com/i/793d998ebea04d929ed32ed66a7cbfaa

#337434 Copied

Martine

Participant

October 27, 2022 at 11:56

Never mind. I’m just not going to make the shop page full width. But then I have to be able to turn off the full width somewhere for shop page and single product page (and payment page). I have now set the setting to “wide layout” for the entire site (general/layout). I guess I should take that off and create two headers (one for the full width pages and one for the shop pages)?

#337436 Copied

Tony Rodriguez

Support staff

October 28, 2022 at 06:11

Hello, @Martine,

There is no specific option in the theme for the shop, single product, and payment page layouts to set. The option you set from the “General >> Layout” will work on the entire site.

If you take that off the layout will be the one that you want for the pages and yes you can create different headers for the site pages you want.

Here is the video to learn how to create multiple headers: https://www.youtube.com/watch?v=BpeXfzNwkOc&t=11s

I hope it helps to solve your issue.

You said (And is there a way to make these images fit in the shadowbox when this page is full width?)

In my very first response, I already told you from where do you set the product image size read below.

This was my message: “To set the product images size to navigate to the Dashboard >> XSTORE >> Theme Options >> WooCommerce >> Product Images and from you will be able to set the product images size check the image: https://postimg.cc/5XXFdcmH”

Today you asked again the same thing and I checked your site and
I set the settings in that option and you can see the results in this video: https://streamable.com/p5miys

Hope this helps.

Regards 8Themes Team.

#337471 Copied

Martine

Participant

October 28, 2022 at 08:50

Thankyou!

#337483 Copied
Tagged: best selling, larger screens, product photos, size, themes, woocommerce
Viewing 11 results - 1 through 11 (of 11 total)

The issue related to '‘Number of product photos shown or size of these photos on larger screens’' has been successfully resolved, and the topic is now closed for further responses

Number of product photos shown or size of these photos on larger screens

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection