Align Woocommerce Buttons

Hi, I’m using the sparkling theme with Woocommerce, and on the product pages the add to cart buttons have become misaligned when there is more than one line of text in the product title. I want to have all the buttons aligned at the same horizontal level on the page, but I can’t figure out how to do it. It doesn’t matter if there’s more white space in between. Can this be fixed with some CSS code?

Since I made this post I’ve done a lot more research into how to customize woocommerce, and for now I just want to make some very basic adjustments such as changing the number of products per page. I read the thread about using a child theme, which I’m now using. From the woocommerce site I’ve tried a number of php snippets to change the number of products, but whenever I try to add any snippets to functions.php in the child theme, I’m redirected to a page with this text:

“Oops! That page can’t be found.
It looks like nothing was found at this location. Maybe try one of the links below or a search?”

Any help would be greatly appreciated.

Here’s an example of some code I tried to add: `/*
* Return a new number of maximum columns for shop archives
* @param int Original value
* @return int New number of columns
*/
add_filter( ‘loop_shop_columns’, ‘wc_loop_shop_columns’, 1, 10 );

function wc_loop_shop_columns( $number_columns ) {
    return 5;
}`

Hi @fxwiz,

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

We can achieve this by developing custom CSS code.

Could you please share me the page URL from your site where it is displaying so that i can help you to develop custom CSS code?

Kind Regards,
Movin

Hi Movin, thanks for your help, the URL is http://watercolourarts.x10host.com/art-gallery/ which is the store category page. The products are displayed within each category.

To achieve this you can force product title to be one line by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS


.woocommerce ul.products li.product h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Thanks Movin, it has aligned the buttons, although part of the title is now hidden, which I guess is unavoidable to keep the buttons aligned. Ideally, I’d like to have the full title, and then all buttons aligned at the lowest level, but visually it looks much better, so this is a good solution.
There are a few other things that I’m having difficulty changing.

  1. The number of products displayed per row, which I want to change to 3 (and 1 product per row for the mobile version).

  2. Is it possible to remove the large white content box around the products and just have a background thats all one color?

  3. How I can make changes to the Woocommerce category pages, such as adding sidebar etc. There aren’t any options to make those sort of customisations in Woocommerce, and they don’t show up in the regular pages.

  4. Also I have question about the CSS. Other changes I made worked in the child theme style sheet, but this one didn’t. Why does it only work in the custom CSS box, and not in the child theme style sheet? Is it best to use the style sheet in the child these or the custom css box to make changes?

I appreciate your help. Learning about how to use Wordpress and Woocommerce properly is important to me, so I apologise if I ask too many questions.

Thanks Movin, it has aligned the buttons, although part of the title is now hidden, which I guess is unavoidable to keep the buttons aligned. Ideally, I’d like to have the full title, and then all buttons aligned at the lowest level, but visually it looks much better, so this is a good solution.

You are most welcome here :slight_smile:

There are a few other things that I’m having difficulty changing.

To help us keep support thread separates could you please create new threads for each of your other questions here https://colorlibsupport.com/c/sparkling/ instead of asking them in your single thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.