WooCommerce Blocks Styling Issue

  • Resolved reflex84

    (@reflex84)


    2 years, 5 months ago

    Hi, okay so on my HOME page, I’ve decided to add a list of LATEST Products using the WooCommerce Block: Newest Products (Display a grid of your newest products).

    See Image in link attached.
    https://ibb.co/fGFL2q7

    1. The font styling is very small and inconsistent with the list of products on the archive (Shop) page. The more columns you add the smaller the font gets and vice versa.
    2. There is an inline size (300×400) added to the IMG which I’d like to edit but cannot see where? I’m surprised it doesn’t inherit the aspect ratio from Customize > Woocommerce > Product Archive > Card Option

    I know for #1 above I can use custom CSS but this seems like a bug I feel WOO needs to fix. What is controlling the style for this block? The theme?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Afzal (woo-hc)

    (@afzalpansuvi)

    2 years, 5 months ago

    Hi there,

    Thank you for sharing the screenshot. I can see the font size is very small on your shop page: https://www.miniwebs.co.za/shop/

    The style of the WooCommerce blocks depends on the theme you are using. Some themes may not have full compatibility with the WooCommerce blocks and may require some custom CSS to adjust the appearance.

    If you want to use CSS, you can use the below code to change the font size of the product title, price, and add to cart button:

    /*To change the font size of Product title, Price and Add to Cart button*/
a.wp-block-button__link.add_to_cart_button.ajax_add_to_cart,
a.wp-block-button__link.add_to_cart_button, 
.wc-block-grid__product-title, 
span.sale-price {
    font-size: 16px !important;
}

    You can add this code to the Additional CSS section in the Customizer.

    To change the image size of the WooCommerce blocks, you can use the Product Image option in the Customizer. However if the settings in the customizer are not being applied it means that the theme is overriding the settings. In this case you will need to use custom CSS code to adjust the Product image size.

    I hope this helps. If you have any further questions, please let me know.

    Thread Starter reflex84

    (@reflex84)

    2 years, 5 months ago

    Thanks yes, I’m sure Theme will create these problems … I just dislike having to resort to custom CSS. I try that as little as possible, but I have implemented your CSS + added a bit extra.

    To change the image size of the WooCommerce blocks, you can use the Product Image option in the Customizer

    I don’t have a Product Image option – see screenshot in the link below:
    https://ibb.co/BLgW8qg

    Also please can I ask you to remove that link to my shop (this is a testing URL and I don’t want it to be linked to and ranked somewhere down the line by google, thanks 🙂

    anastas10s

    (@anastas10s)

    2 years, 5 months ago

    Hi there @reflex84 👋

    Thanks yes, I’m sure Theme will create these problems … I just dislike having to resort to custom CSS. I try that as little as possible, but I have implemented your CSS + added a bit extra.

    Thanks for letting us know. Just to note, custom CSS solutions require custom CSS code.

    I don’t have a Product Image option

    This is also theme related. Feel free to reach out to the currently active theme’s support channel, as they would be in a better position to assist you. Below, I am attaching a screenshot of these options, with the Storefront theme (linked here) active, for reference.

    Direct link to image: https://snipboard.io/tbkei6.jpg

    Also please can I ask you to remove that link to my shop (this is a testing URL and I don’t want it to be linked to and ranked somewhere down the line by google, thanks 🙂

    Responses are not editable, after a while, I’m afraid. Nevertheless, feel free to enable the Discourage search engines from indexing this site option, at WordPress > Settings > Reading.

    I hope this is helpful! Please let us know if you have any further questions or concerns.
    We will be happy to help you further.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘WooCommerce Blocks Styling Issue’ is closed to new replies.