Woocommerce Blocks – Featured Category Block button alignment problem

Hello,

Could you please share a copy of your site’s System Status? You can find it via WooCommerce > Status. Select “Get system report” and then “Copy for support”.? Once you’ve done that, paste it here in your response.

Hi,

I did not have the full explanation but, trying to integrate Woocommerce inside a homemade theme, I encounter the same problem.

My Woocommerce version is 5.1.0, I don’t know if the system status is relevant here.

It appears that when using Woocommerce blocks (Featured category, Features product, maybe some others…) the generated HTML for the button is structured like that :

<div class="wp-block-button aligncenter"><a class="wp-block-button__link" href="mysite.com/path/to/product">Shop now</a></div>

The problem comes from the aligncenter class which is a former class used by WordPress. From now one, this class should be replaced by has-text-align-center.

I am currently trying out to find the best way to solve that or if Woocommerce intends to fix that. But I can’t find much topic about that and no proper solution for the one I found :
– https://www.ads-software.com/support/topic/featured-category-button-no-longer-centered/

@guerre64

Quick fix :

You can add the has-text-align-center to the block thanks to the “advanced settings”, it will center the button.

The documentation to add the CSS class : https://wordpress.com/support/adding-additional-css-classes-to-blocks/

@maykato Is it still possible to know is there will be a fix about that in further version of Woocommerce ?

Thanks

Hello @claborier

Thank you for sharing the quick fix – I was able to reproduce the issue too, and temporarily fixed it by adding the class has-text-align-center to the button.

It looks like this issue has already been reported here: https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/4028
I’m marking this thread as resolved, but you can follow the GitHub post.