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

This topic has 11 replies, 3 voices, and was last updated 1 year, 5 months ago ago by Martine

  • Avatar: 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

    10 Answers
    Avatar: Rose Tyler
    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

    Avatar: Martine
    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.
    Avatar: Tony Rodriguez
    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.

    Avatar: Martine
    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?

    Avatar: Tony Rodriguez
    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.

    Avatar: Martine
    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.

    Avatar: Martine
    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

    Avatar: Martine
    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)?

    Avatar: Tony Rodriguez
    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.

    Avatar: Martine
    Martine
    Participant
    October 28, 2022 at 08:50

    Thankyou!

  • 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

Helpful Topics

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.