How do I line up products on the shop page in woocommerce with Beaver Builder?

Beaver Builder
1

Hi,
On my Woocommerce “shop” page, the products are all lined up with the addition of this code in my child theme CSS stylesheet:
h1.product_title.entry-title {
font-size: 70px;
}
But now that I have built the “shop” page with BB using the “multiple products” layout (Woocommerce) option, the products are all uneven again.
How do I change the code in my style sheet so that all my products are aligned on my BB shop page?
thanks in advance
Garry

2

Hey Garry,

Welcome to the BB forums! :slight_smile:

Do you mind sharing the URL of the page in question so we can take a look? You can post it here using the private reply option below if you want.

Ben

3

Hi,
the example of my current page (where they are lined up) is:
http://garrysiutz.com/shop/
I cant show you the BB version as I have not published it yet as the products are all uneven!!
All the “view product” boxes sit at different heights as each product either has 2 or 3 lines of copy under each image. The ones that sit lower are the ones that have 3 lines of copy. Basically I need to stretch the ones with 2 lines of copy to sit in line with the ones that have 3 lines.
The above link does that now because of the code I added to the style sheet. The BB page however doesnt!
Garry

4

Hey Garry,

You can use the CSS snippet below.

.fl-builder ul li a h3 {
  min-height: 50px;
}

This sets a minimum height to each product name. Got this from one of the WooCommerce articles(link below). I just needed to change it a bit so it targets elements when the page builder is used.
https://support.woothemes.com/hc/en-us/articles/203994793-How-to-Align-Products-and-Add-to-Cart-Buttons-in-Shop-Archive-Pages

Ben

5

Hi Ben,
Perfect! that did the trick. Thank you. Now I still need the line of CSS that does the same thing, however for the “related products” that run at the bottom of the page.Here is the link (like before, of the current page, however the BB version does the same thing) I have tried to alter several lines of code with “web developer” (firefox) but can’t find the line that alters the height of those products. Have looked for a similar line to the one you provided but cant find!!
Sorry, I am ok with basics but this is doing my head in!! LOL
Do you have the answer?

cheers
garry

6

Hey Garry,

Try using this CSS snippet instead. It will only target WooCommerce products’ titles.

.woocommerce ul.products li a h3 {
  min-height: 70px;
}

Ben