Woocommerce Price Filter Layout


How do I center align the filter price text and bring the filter button to the next line which is also center aligned.

Please see images.

Hi @shahidul,

I hope you are well today and thank you for your question.

Could you please share me your site URL where it’s displaying so that i can help you to achieve it?

Kind Regards,



You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other

#page .woocommerce.widget_price_filter button.button {
    float: none;
    margin: 0 auto;
    display: table;
.woocommerce.widget_price_filter .price_label {
    clear: both;
    text-align: center;

Actually the button markup is above price text markup so the button displays above price text.

Hi Movin,

So is there no way to have the button below the price?

Yes by developing custom code.

Developing custom code for custom functionality is beyond the scope of support that we provide here.

If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. Colorlib recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5