Return to previous page

Product images in the catalog - by Michael

This topic has 21 replies, 4 voices, and was last updated 5 years, 4 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

    #245173 Copied Theme version: 6.3.5 WooCommerce version: 4.3.0
    20 Answers
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    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

    #245184 Copied
    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

    #245591 Copied
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    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

    #245659 Copied
    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

    #246146 Copied
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    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

    #246154 Copied
    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

    #246175 Copied
    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

    #246180 Copied
    Avatar: John Holden
    John Holden
    Participant
    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

    #246201 Copied
    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

    #246424 Copied
    Avatar: John Holden
    John Holden
    Participant
    August 4, 2020 at 05:25

    Hi,

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

    Regards,
    Hung PD

    #246444 Copied
    Avatar: Michael
    Michael
    Participant
    August 4, 2020 at 13:24

    exact, nor cart

    #246508 Copied
    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

    #246607 Copied
    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

    #246642 Copied
    Avatar: Michael
    Michael
    Participant
    August 5, 2020 at 21:28

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

    #246676 Copied
    Avatar: John Holden
    John Holden
    Participant
    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

    #246702 Copied
    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

    #246745 Copied
    Avatar: John Holden
    John Holden
    Participant
    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

    #246811 Copied
    Avatar: Michael
    Michael
    Participant
    August 10, 2020 at 16:05

    Thank you!!

    #247116 Copied
    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

    #247117 Copied
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    August 10, 2020 at 17:32

    Hello,

    I don’t see problem with that https://gyazo.com/405b9aef89e3c51410b5529821bc0f3c

    Regards

    #247139 Copied
  • Viewing 21 results - 1 through 21 (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

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Organic Store – WordPress WooCommerce Theme
lazy-placeholder
Designers – WordPress WooCommerce Theme
lazy-placeholder
Cosmetics Store – WordPress WooCommerce Theme
lazy-placeholder
Interior Store – WooCommerce Theme
lazy-placeholder
Business 02 – WordPress WooCommerce Theme
lazy-placeholder
Drinks Store – WordPress WooCommerce Theme
lazy-placeholder
Underwear Store – WordPress WooCommerce Theme
lazy-placeholder
Electron Store 01 – WordPress WooCommerce Theme
lazy-placeholder
Jewellery Niche Market – Multivendor WP WooCommerce Theme
lazy-placeholder
Spa – WordPress WooCommerce Theme

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.