[Resolved] Is this formatting

Home Forums Support [Resolved] Is this formatting

Home Forums Support Is this formatting

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2039440
    Vic

    Hi GP,
    From what I have read here, you may likely tell me this is a Woocommerce matter, but I just wanted to make sure first.
    I have based this site on the GP Prime template.
    On my home page, after the shortcode block widget for product category failed for some reason, after moving this new wordpress website from a test sub directory to live, I have moved to using the woocommerce product category block widget.
    However the thumbnails are too large, and the text and button are too small.
    I would like it to appear the same as the separate product category pages.
    There are no GP theme or woocommerce settings I can find to adjust this.
    But I also cannot seem to find any existing custom css code anywhere to adjust this.
    So my question is, should I ask for that from GP or Woocommerce?
    Thanks – Steve

    #2039526
    Elvin
    Staff
    Customer Support

    Hi Vic,

    The thumbnails being too large on your front page is because of this CSS:

    .wc-block-grid__products .wc-block-grid__product-image img {
        height: auto;
        width: 100%;
    }

    It’s a CSS coming from the plugin that added this product grid.

    While you can override it by adding this CSS:

    .wc-block-grid__products .wc-block-grid__product-image img {
        width: auto;
    }

    I’m not sure if this is the best practice for this plugin. You can ask the plugin’s support for their best practice in changing/resizing their plugin’s thumbnail photo. 🙂

    A wise man once said:
    "Have you cleared your cache?"

    #2039551
    Vic

    Thankyou very much for that Elvin. It works perfectly for at least the interim. Very much appreciated.

    I have now posted the same question on the plugin providers forum as suggested.

    I see that you have set the product-image width to auto which corrected my issue.
    I assume it will be some similar code to also set the following object sizes to Auto?;
    – product-title (the product name?)
    – product-price (the product price related text?)
    – product-button (does that also cover the “Add to cart” text?)
    I have just tried but again I am unable to track that down for myself.
    Could I please be greedy and ask if you could provide that code too?

    #2039607
    Elvin
    Staff
    Customer Support

    Have you checked if there’s a UI option to change these through the block editor? I suggest checking it first because going w/ custom CSS.

    – product-title (the product name?)

    Try this selector.
    .wc-block-grid__product-title

    – product-price (the product price related text?)

    Try this selector.

    For price
    .wc-block-grid__product-price.price

    For currency
    .wc-block-grid__product-price.price span.woocommerce-Price-currencySymbol

    For the text suffix
    .wc-block-grid__product-price.price small.woocommerce-price-suffix

    – product-button (does that also cover the “Add to cart” text?)

    Try this selector.
    a.wp-block-button__link.add_to_cart_button.ajax_add_to_cart

    But I’m not sure how well this works as I didn’t check for any interactive selector change. For that one you’ll have to check the developer’s documentation/support. (It’s out of our scope, unfortunately.)

    A wise man once said:
    "Have you cleared your cache?"

    #2039659
    Vic

    Thankyou very much again for your help Elvin. It is appreciated.

    #2039672
    Elvin
    Staff
    Customer Support

    No problem. 😀

    A wise man once said:
    "Have you cleared your cache?"

    #2042117
    Vic

    Hi again,

    I have contacted Woocommerce support and they have responded.
    They first advised me I should not be trying to use the WooCommerce Blocks Product Category widget on my home page. So I removed that.
    I was able to return to using this shortcode instead, once I realised my mistake was changing the name of the category but then not updating the page shortcode (sorry) – [product_category category=”Teacher Assessment Record Books” per_page=”8″ columns=”4″]

    However I now have the problem again, when the product name wraps, the bottom of the Add to cart button is touching the top of the image on the 2nd line. There seems to be no padding?
    This is not occurring on my Product Category page though. And that is all I want on the home page.

    I again asked Woocommerce support how to resolve this.
    They have come back to me saying some additional code on my website is causing this padding related problem (full response at bottom);

    I have made all likely plugins inactive but it does not resolve the problem.
    Can’t see an element that might be causing it?
    Does the problem have to be code from the GP theme then?

    From Woocommerce;

    Hey again!

    It looks like something on your site is using inline CSS to override the default WooCommerce product layout for margins.

    This is the WooCommerce CSS that’s present on your site:

    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    float: left;
    margin: 0 3.8% 2.992em 0;
    padding: 0;
    position: relative;
    width: 22.05%;
    margin-left: 0;
    }

    That is being overriden by this CSS: `.woocommerce ul.products li.product, .woocommerce ul.products {
    margin-bottom: 0;
    }`

    That is being inserted inline, and there’s not a way on the frontend to tell what is doing that on your site.

    There’s not a way to override that CSS (as it’s inline), so you will need to figure out what plugin or theme is adding that in. It looks like the entire product output there is in a div called

    <li class=”sales-flash-overlay woocommerce-text-align-center woocommerce-image-align-center do-quantity-buttons product type-product post-389547 status-publish instock product_cat-teacher-assessment-record-books has-post-thumbnail taxable shipping-taxable purchasable product-type-simple”>

    Some kind of sales flash overlay might be the root cause here.

    #2042293
    David
    Staff
    Customer Support

    Hi there,

    go to Customizer > Additional CSS, at the very end of the CSS delete:

    .woocommerce ul.products li.product, .woocommerce ul.products {
        margin-bottom: 0;
    }
    #2042769
    Vic

    Very sorry. Why didn’t I think to go there and look at the existing Additional CSS from the original sample site 🙁
    Rookie mistake. I will try my best to get better at this. But that now looks perfect.
    Thankyou and apologies again.

    #2043447
    David
    Staff
    Customer Support

    No apologies necessary – we’re glad to be of help!

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.