Product images in the catalog - by Michael

This topic has 21 replies, 4 voices, and was last updated 3 years, 7 months ago ago by Olga Barlow

  • Avatar: Michael
    Michael
    Participant
    July 23, 2020 at 16:08

    I have a product whose dimensions are 1000×1000 and in the catalog it’s set to 500 wide, but the photo cuts, is there any way to put it in full? no cut, just be resized? that this function be automatic or manual even

    product link: https://makobaby.com.br/produto/babador-flanela-c-3-un-parapipi/

    obs: But the problem is in the store page of my website, follow the link below.

    link: makobaby.com.br/loja

    20 Answers
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    July 23, 2020 at 16:58

    Hello,

    Yes, disable crop option for the thumbnails in Theme Options > WooCommerce > Product Images > http://prntscr.com/tnd36l And there is no need to use 500 for the thumbnails, 300 will be enough.

    Regards

    Avatar: Michael
    Michael
    Participant
    July 27, 2020 at 14:18

    When changed to 300, the display of the products is terrible, so I left it at 500, one more question: how to find out where the CSS redirects of the photos are taking place?

    I tested it at https://gtmetrix.com/ and it says that some images are being redirected to 243×243. I was wondering where it happens and why

    Print:
    https://prnt.sc/tpas80

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    July 28, 2020 at 13:29

    Hello,

    When you inspect the image block you can see its size http://prntscr.com/tpvyh3 So, if you use image bigger than that block it will be resized to the size of the block to fit it because image can’t be more than 100% of the block width.

    Regards

    Avatar: Michael
    Michael
    Participant
    July 31, 2020 at 13:51

    Yes, but why is this 500×500 photo sent by 800×800, how to change the size to use 243×243, other than 500×500?

    Also a plugin is giving a problem about centralization, which css code could it use to make it centralized? I know the source of the problem, but I can’t make a way that it doesn’t have much product alignment

    Print: https://prnt.sc/trs9kd

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    July 31, 2020 at 15:26

    Hello,

    1) Edit the image size in the Theme Options > WooCommerce > Product Images. There is no other way to change the source image size that is loaded for grid

    2) Add the following code to Theme Options > Custom CSS

    .loop.fswp_installments_price .price.fswp_calc, .loop.fswp_in_cash_price .price.fswp_calc {
        text-align: center;
    }

    Regards

    Avatar: Michael
    Michael
    Participant
    July 31, 2020 at 18:18

    I don’t want to just center it, I want it to be practically the same or low “in the billet” in terms of size (it can be up to the 2 smallest ones) and color, even css of the price should not be the same as the next button !!

    print: https://prnt.sc/trwzpv

    Avatar: Michael
    Michael
    Participant
    July 31, 2020 at 19:15

    I got it with the following code. How could I reduce it?

    .loop.fswp_installments_price .price.fswp_calc .woocommerce-Price-amount.amount, .loop.fswp_in_cash_price .price.fswp_calc .woocommerce-Price-amount.amount {
        font-size: 10px !important;
    	color:red !important;
    	font-weight:0px !important;
    }
    .loop.fswp_installments_price .price.fswp_calc, .loop.fswp_in_cash_price .price.fswp_calc {
        font-size: 10px !important;
    	color: red;
    	margin-bottom: -6px;
    }

    How to apply this css only in the catalog of woocommerce? not on the entire site, I wanted to keep it as it was on the unique products

    Avatar: John Holden
    John Holden
    Support staff
    August 1, 2020 at 03:10

    Hi,

    Try below code

    .post-type-archive-product .loop.fswp_installments_price .price.fswp_calc .woocommerce-Price-amount.amount, .loop.fswp_in_cash_price .price.fswp_calc .woocommerce-Price-amount.amount {
        font-size: 10px !important;
    	color:red !important;
    	font-weight:0px !important;
    }
    
    .post-type-archive-product .loop.fswp_installments_price .price.fswp_calc, .loop.fswp_in_cash_price .price.fswp_calc {
        font-size: 10px !important;
    	color: red;
    	margin-bottom: -6px;
    }

    Regards,
    Hung PD

    Avatar: Michael
    Michael
    Participant
    August 3, 2020 at 20:46

    It was exactly what I wanted, but I also wanted other pages to occur, just a single product that does not suffer and checkout, on the main page or in the css no longer affects and I wanted it too

    Avatar: John Holden
    John Holden
    Support staff
    August 4, 2020 at 05:25

    Hi,

    You don’t want that code runs on Single Product & Checkout page?

    Regards,
    Hung PD

    Avatar: Michael
    Michael
    Participant
    August 4, 2020 at 13:24

    exact, nor cart

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 5, 2020 at 08:29

    Hello,

    Sorry but your request is a bit unclear for me. Could you please specify which exact pages should be affected by the code?
    Maybe adding the code not in Theme Custom CSS but into Custom CSS area for page is your way – https://prnt.sc/tuar3i

    Regards

    Avatar: Michael
    Michael
    Participant
    August 5, 2020 at 16:21

    I just want CSS, do not apply to the cart page and checkout page

    Print an extra problem, sorry! : https://prnt.sc/tujxri

    Why is it different?
    this is on the main page where I put products via WPBakery, before it was correct and now it has changed, I don’t know for sure if it was like this before, but I didn’t change anything that changed it

    Avatar: Michael
    Michael
    Participant
    August 5, 2020 at 21:28

    Why is this error occurring?
    Print: https://prnt.sc/tuossg

    Avatar: John Holden
    John Holden
    Support staff
    August 6, 2020 at 05:53

    Hi,

    1. CSS

    I tested your code do not affect to Cart & Checkout page

    2. Sale badge

    – That works for Variations Products

    3. Error

    – You should deactivate all plugins (except Required Plugins) and then reactivate them one by one. This makes it very easy to isolate the plugin causing problems.

    Regards,
    Hung PD

    Avatar: Michael
    Michael
    Participant
    August 6, 2020 at 13:41

    Sale badge
    how could i leave it as simple products?

    How do I change the promotional price of the product?
    On every page

    Avatar: John Holden
    John Holden
    Support staff
    August 7, 2020 at 05:34

    Hi,

    Theme Options > WooCommerce (Shop) > Shop elements > Sale & Out of Stock > Show Sale Percentage For Variable Products > On

    Regards,
    Hung PD

    Avatar: Michael
    Michael
    Participant
    August 10, 2020 at 16:05

    Thank you!!

    Avatar: Michael
    Michael
    Participant
    August 10, 2020 at 16:08

    Does this theme have ajax available in the cart?
    I think I was already using it, but it came out, I must have done something. could you tell me how to activate the ajax cart? where I don’t need to refresh the page when I decrease the quantity and among others

  • 1 2
    Viewing 20 results - 1 through 20 (of 21 total)

The issue related to '‘Product images in the catalog’' has been successfully resolved, and the topic is now closed for further responses

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