Return to previous page

Shop Page Image gallery and pricing font Issues

This topic has 28 replies, 5 voices, and was last updated 10 months, 3 weeks ago ago by Andrew Mitchell

  • Avatar: Ajaz
    Ajaz
    Participant
    March 28, 2024 at 23:16

    Hi,

    A couple of issues on my shop page: (I understand this is not directly edible but without creating a custom shop page please). I am a beginner and have no experience with custom-building pages.

    1: For the product images on the shop page, how can I resize them to a larger image? I need to create the shop page products identical to the product layout on my homepage.

    The product images on my shop page become blurry when I stretch or full-width the content, this I also need to resolve.

    2: how can I edit the price text beneath the product images, both on my homepage and shopping page, the font and text are small?

    Ajaz

    #389003 Copied Theme version: 9.3
    27 Answers
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    March 29, 2024 at 09:05

    Hello, @Ajaz,

    Thank you for reaching out to us with your concerns.

    1/ Image sizes come from WooCommerce plugin settings – https://www.8theme.com/documentation/xstore/woocommerce/product-images/
    Please go to Appearance > Customize > WooCommerce > Product Images > Thumbnail Width > set https://prnt.sc/7Oct4Nl5l82X . Once you have made this change, please proceed to regenerate the thumbnails using the appropriate plugin.

    2/ We kindly request that you proceed to the “XStore” section, then select “Theme Options,” followed by “Typography.” Within this menu, please locate “Body font-size” and adjust it according to your preferences. Once you have made the necessary changes, please ensure to publish them.

    For your convenience, we have provided an image for reference. https://imgur.com/OugAFRn

    Should you require any further assistance, please do not hesitate to reach out.

    Best Regards,
    The 8Theme Team

    #389046 Copied
    Avatar: Ajaz
    Ajaz
    Participant
    March 29, 2024 at 14:50

    Hi Tony,

    When I edit these settings, it affects my single-product image size. I have resized this to the settings I applied however, the option “thumbnail cropping” on the same page as you advised for “main image width”, when I apply either custom or uncropped, this edits the thumbnails on the single product page which I do not want but the issue I have with this setting is that this also enlarges my product images on my shop page, and this works perfectly for me.

    How is it possible to enlarge my shop page product images without affecting any other image on the site?

    Thanks,
    Ajaz

    #389127 Copied
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    March 30, 2024 at 06:27

    Hello, @Ajaz,

    To enlarge your shop page product images without affecting any other images on your site, you can utilize CSS to specifically target the shop page product images and adjust their size. Please add next CSS code in XStore > Theme Options > Theme custom CSS > Global CSS.

    .woocommerce-shop .content-product .product-content-image {
    width: 350px !important; /* Adjust the width as needed */
    height: auto !important;
}

    We hope this helps. Should you require any further assistance, please do not hesitate to reach out.

    Best Regards,
    The 8Theme Team

    #389229 Copied
    Avatar: Ajaz
    Ajaz
    Participant
    March 30, 2024 at 18:40

    I have applied the CCS code to global and the images do change sizes, which is perfect however, the issue now is that the images have a large gap between them on pc/laptop version, the tablet is perfect and the mobile version is very slim.

    The mobile version images are also not centered, they are showing the image from the left angle.

    1. I need the PC version images to have a gap that can be set to my preference.

    2. Mobile version: images centered and arrows on them to click right/left.

    Also, I have added the “zoom in” effect and when you hover on this, the image does zoom in but the image also enlarges, I need the images to not enlarge and stay the same size as the image size when not hovering over them.

    Thanks,

    #389303 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 31, 2024 at 15:56

    Hello, @Ajaz,

    We are reaching out to inquire about the range of products that will be featured on your website. Will there consistently be only two products available, or do you anticipate expanding your product selection in the future?

    Best Regards,
    The 8Theme Team

    #389409 Copied
    Avatar: Ajaz
    Ajaz
    Participant
    March 31, 2024 at 18:00

    There will be more products to add in the future.

    I need to centralise the images when there are 1, 2 or 3 products in the row because the to is set to 4 items and they automatically align to the left.

    With them automatically aligning to the left, the images also resize and become larger which I do not want.

    I need the images to always remain the same size, centralised until 4 products are visible.

    Thanks,
    Ajaz

    #389429 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    April 1, 2024 at 09:24

    Hi Ajaz,

    Please update the previous CSS code to this:

    
.woocommerce-shop .content-product .product-content-image {
    width: 300px !important;
    height: auto !important;
    margin: 0 auto;
    overflow: hidden;
}

    Let us know how it goes!

    #389486 Copied
    Avatar: Ajaz
    Ajaz
    Participant
    April 1, 2024 at 12:29

    Hi,

    The code has been applied. The image sizes are correct but only on the PC version.

    In the mobile version, the images are next to each other with no space between them, I need to add space to them but without adding a margin to the left of the first image.

    Ajaz

    #389509 Copied
    Avatar: Ajaz
    Ajaz
    Participant
    April 1, 2024 at 13:05

    .

    Please contact administrator
    for this information.
    #389525 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    April 1, 2024 at 14:30

    Hi @Ajaz,

    Please also add this custom CSS for the mobile version:

    
@media (max-width: 480px){
    .woocommerce-shop .content-product .product-content-image {
        width: 94% !important;
    }
}

    We’re also working on this topic: https://www.8theme.com/topic/product-images-alignment-on-the-homepage/#post-389522.

    Best Regards,
    The 8Theme Team

    #389545 Copied
    Avatar: Ajaz
    Ajaz
    Participant
    April 1, 2024 at 14:48

    ..

    Please contact administrator
    for this information.
    #389554 Copied
    Avatar: Ajaz
    Ajaz
    Participant
    April 1, 2024 at 14:51

    …

    Please contact administrator
    for this information.
    #389555 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    April 1, 2024 at 15:13

    Hi @Ajaz,

    Can you please check and make sure the custom CSS code is working?

    Thank you!

    #389560 Copied
    Avatar: Ajaz
    Ajaz
    Participant
    April 1, 2024 at 17:40

    No, it has not worked.

    The font below the image, I have tried to adjust this so I change the size and centralize them but I can’t allocate the options?

    Ajaz

    Please contact administrator
    for this information.
    #389571 Copied
    Avatar: Ajaz
    Ajaz
    Participant
    April 1, 2024 at 17:53

    The gap is only visible in landscape view on mobile but not in portrait view, I need this to be visible in portrait mode.

    #389573 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    April 2, 2024 at 03:39

    Dear Ajaz,

    The custom CSS codes should be placed under Global CSS. We’ve corrected it. Here is how the products look like on mobile view now:

    – Portrait: https://prnt.sc/qMQg14doX7jl

    – Landscape: https://prnt.sc/WvJbfDHfQFAX

    Best Regards,
    The 8Theme Team

    #389592 Copied
    Avatar: Ajaz
    Ajaz
    Participant
    April 2, 2024 at 04:57

    The image location looks fine on mobile but I also mentioned that the font below the images is not centralised.

    I have tried to edit this but not able to find the options to centralise and edit the size/color, where are the options so can edit?

    #389598 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    April 2, 2024 at 10:58

    Hi @Ajaz,

    To make the product details center on mobile also. We’ve changed this custom CSS:

    
@media (max-width: 480px){
    .woocommerce-shop .content-product .product-content-image {
        width: 94% !important;
    }
}

    To this:

    
@media (max-width: 480px){
    .woocommerce-shop .content-product .product-content-image {
        width: 94% !important;
    }
    .woocommerce-shop .content-product .products-page-cats {
        padding-right: 0 !important;
    }
    .woocommerce-shop .content-product h2.product-title,
    .woocommerce-shop .content-product .products-page-cats,
    .woocommerce-shop .content-product .price {
        text-align: center;
    }
}

    Can you check again?

    Best Regards,
    The 8Theme Team

    #389651 Copied
    Avatar: Ajaz
    Ajaz
    Participant
    April 2, 2024 at 11:07

    That is working fine.

    Just to be clear for the future, if I added further text to show in this area, this will automatically align centre?

    #389654 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    April 2, 2024 at 11:18

    Hi @Ajaz,

    It should works.

    Best Regards,
    The 8Theme Team

    #389659 Copied
    Avatar: Ajaz
    Ajaz
    Participant
    April 2, 2024 at 11:40

    Also, can you confirm how I can centralize the text beneath the images, currently this is aligned left.

    I mentioned before to confirm the location of these settings so I can apply them.

    Besides this, this is looking excellent.

    Ajaz

    #389661 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    April 2, 2024 at 12:35

    Hi @Ajaz,

    Also, can you confirm how I can centralize the text beneath the images, currently this is aligned left.

    We’ve already included it in the custom CSS codes. So the texts below images will be centered.

    Best Regards,
    The 8Theme Team

    #389671 Copied
    Avatar: Ajaz
    Ajaz
    Participant
    April 2, 2024 at 12:49

    I should heave mentioned, on the mobile, it is centred but on pc it is still aligned left.

    Let me check on a different browser and I will reconfirm.

    #389676 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    April 2, 2024 at 14:23

    Hi @Ajaz,

    The provided CSS codes are targeted to mobile version, if you would like it’s also working on desktop version. We will update the code to this:

    
.woocommerce-shop .content-product .products-page-cats {
		padding-right: 0 !important;
}
.woocommerce-shop .product-details .product-view-light .light-left-side,
.woocommerce-shop .content-product h2.product-title,
.woocommerce-shop .content-product .products-page-cats,
.woocommerce-shop .content-product .price {
		text-align: center;
}
@media (max-width: 480px){
    .woocommerce-shop .content-product .product-content-image {
        width: 94% !important;
    }
}

    Can you check again now?

    Thanks!

    #389701 Copied
    Avatar: Ajaz
    Ajaz
    Participant
    April 2, 2024 at 15:04

    I have not had a chance to check but I do need this to be centralised for of, tablet and mobile.

    Would the code be for the global settings?

    #389704 Copied
    Avatar: Ajaz
    Ajaz
    Participant
    April 2, 2024 at 17:17

    This is also resolved.

    Thanks,
    Ajaz

    #389719 Copied
    Avatar: Andrew Mitchell
    Andrew Mitchell
    Support staff
    April 2, 2024 at 17:17

    Dear Ajaz,

    Choosing our theme reflects your commitment to quality, and for that, we’re genuinely grateful. As we constantly strive to elevate your experience, your feedback is an invaluable gift. Could you kindly take a moment to rate our product with 5 stars on ThemeForest?

    Click here to share your insights: https://themeforest.net/downloads

    Your support fuels our journey, and we appreciate it more than words can express.

    Best Regards,
    The 8Theme Team

    #389720 Copied

  • Tagged: , , , , , ,

  • Viewing 28 results - 1 through 28 (of 28 total)

The issue related to '‘Shop Page Image gallery and pricing font Issues’' has been successfully resolved, and the topic is now closed for further responses

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Mobile Store – WordPress WooCommerce Theme
lazy-placeholder
Watches Store – WooCommerce Theme
lazy-placeholder
Underwear Store – WordPress WooCommerce Theme
lazy-placeholder
School – WordPress Theme
lazy-placeholder
Kids Store – WordPress WooCommerce Theme
lazy-placeholder
Glasses Store – WordPress WooCommerce Theme
lazy-placeholder
Headphone Store – WordPress WooCommerce Theme
lazy-placeholder
Agricultural Store – WordPress WooCommerce Theme
lazy-placeholder
Application – WooCommerce Theme
lazy-placeholder
Mango – Responsive eCommerce PSD Template

See All Templates

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