Text size – Hand-Picked Products block

Hi there,

The font-size are usually determined by the active theme in question and isn’t something that the core WooCommerce plugin would have any direct control over. The code you referenced above relates to the TwentyTwenty default theme although you’re using GeneratePress on your site at https://www.flyingtwigs.com/.

Practically speaking, you’ll want to get in touch with the developers of the GeneratePress theme to take a closer look at the font-settings on your site and whether there are any options to in their theme that’ll affect things at bock-level.

Thank you for your reply. That was my thought too, and I contacted GeneratePress at the same time as raising this here. GeneratePress say:

“GP has no control over the content coming from WooCommerce blocks unfortunately.

It just looks like the font size is coming from the plugin itself:
https://www.screencast.com/t/MxzXysOgF
https://www.screencast.com/t/7qMbvtI6Xkca

I would recommend reporting this to WooCommerce blocks support team as this is something they need to fix on their end.

You can try overwriting it temporarily using the same CSS seletor.”

So I set up a test site running TwentyTwentyOne at https://nomorepens.com and used the hand-picked products block on the home page and I see this

.theme-twentytwenty .wc-block-grid.has-3-columns:not(.alignwide):not(.alignfull), .wc-block-grid.has-3-columns:not(.alignwide):not(.alignfull) {
    font-size: .92em;
}
.wc-block-grid {

I set it up with three products across and the font size is, as you see, .92em

Then I added two more products across and this then shows:

`.theme-twentytwenty .wc-block-grid.has-5-columns .wc-block-grid__product, .theme-twentytwenty .wc-block-grid.has-6-columns.alignfull .wc-block-grid__product, .wc-block-grid.has-5-columns .wc-block-grid__product, .wc-block-grid.has-6-columns.alignfull .wc-block-grid__product {
font-size: .58em;’

So it seems that the number of columns of products is controlling the font size. and it is connected somehow to twentytwenty.

For the moment I have used custom CSS to set the font size for my site at flying twigs using five across on the home page.

I’d be grateful for your thoughts.

Follow up

Coincidentally I found this in my inbox that seems to address this question.

https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/3539

I thought something was a little different with my GeneratePress after the Woocommerce update. The product titles with 5 products in a row was tiny for that block and had to switch to 4 in a row.