Problem with Woo products display

Beaver Builder
1

Hi,

I have been playing with eCommerce template.
When inserting the Woo products widget, products are displayed below each other instead side by side.
this is how the problem looks like:
https://www.dropbox.com/s/8pi3868jvnv9ofm/woo-problem.png?dl=0
And this is how it looks on the demo page:
https://www.dropbox.com/s/te4087xqbtiipqo/woo-right.png?dl=0

website: http://rozman.wizzy.info

2

Hey Gasper,

Welcome to the BB forums! :slight_smile:

That is actually caused by the Genesis Dambuster plugin. It has styling which removes the float property from the products. I don’t know if there is a setting for that you can tick off but you can use this CSS snippet to override it.

.fl-woocommerce-products .woocommerce ul.products li.product {
  float: left;
  margin: 0 3.8% 2.992em 0;
  padding: 0;
  position: relative;
  width: 22.05%;
}

Take note that the width on the above CSS is the default width. I can see you’re using a 3 column layout. You don’t have to change the width above as WooCommerce applies a different styling which overrides that.

Hope this helps!

Ben

3

Thanks Ben,

I have checked, but the setting is not there.
I have added CSS to custom CSS.
For a while it was ok.
When I changed category on a Beaver Woo settings, and set 4 products, it got broken again.

I really don’t know what broke it as the css is present now.

G.

4

Hey Gasper,

Do you mind sending temp admin access so we can check?

Ben

5

[Content Hidden]

6

Hey Gasper,

Actually, checking the page again, I think the styling from Dambuster is causing more problems than I expected. Could you try removing the custom CSS I gave above and disabling the Dambuster plugin then see if it works? If it does, I’d suggest contacting the author of the plugin regarding this issue.

Ben

7

Hi,

Dambuster was expected just to be used on single pages and single posts (and single products) where it forces the “content”, the “entry” and “entry_content” to be full width.

This “product listing” page is an archive page. Dambuster is forcing each entry (product) to be 100% wide which means you get one product per row (which is not what you want).

What I could do is make Dambuster behave better on archive pages where multiple entries are being displayed. Here the “content” needs to be full width but the entries should not.

I will do some tests with archive pages with and without WooCommerce and get a new release of Dambuster out over the weekend.

8

Hey Elizabeth,

Thanks for the follow up! I did try playing around with the page and it seems like each list on WooCommerce also has an entry class so it gets affected by the styling you have for .gd-full-width .site-container .content .entry which I think is only intended for the article tag. Simply changing the CSS selector to .gd-full-width .site-container .content > .entry fixes the issue but I’m not sure if this may affect other pages as well, I haven’t really have much experience with Genesis. Hope this helps!

Ben

9

Hi Ben,

Many Thanks for your input. I had reached the same conclusions.

Woocommerce is using “entry” in 2 ways:

On the article: <article class="post-43 page type-page status-publish entry has-post-thumbnail"

On each product listing: <li class="first last post-60 product type-product status-publish has-post-thumbnail product_cat-sl entry sale virtual taxable shipping-taxable purchasable product-type-simple product-cat-sl instock "

I want Dambuster CSS to apply “full width” to the first “entry” on the article but not the second “entry” in the product list

Your solution works for most themes however some themes have additional elements between the content and entry (sometimes the entry is a grandchild, not a child of the content). There are also XHTML themes as well as HTML5 themes to consider. I will need to do further testing to get the definitive solution however it will be very much along the lines you suggested.

I was in contact with Gasper earlier on the Genesis Dambuster ticketing system so he has a temporary fix available until the permanent fix comes out in the next release.

Thanks.

10

Hey Elizabeth,

Thanks! We really appreciate it. I’ll mark this as resolved for now then. :slight_smile:

Ben