[Resolved] GP WooCommerce Module with Elementor

[Daniel]

Hi,

I’m currently building a WooCommerce site with GeneratePress and Elementor Pro. I am trying to style the products grid using the Elementor ‘Products Widget’, but it seems like the GeneratePress WooCommerce module is overriding the settings/stylings. Essentially it adds lots of spacing around each product, even though I have set it to 2 pixels in the WP customiser. In theory the solution is to deactivate the Generate WooCommerce module and just use Elementor for the styling (it then displays how I want it to), but I really need to keep it active as I want to use the ‘Display secondary product image on hover’ feature in GP. Is there a way around this? Not sure if I’ve explained that very well. 🙂

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can edit the original topic and use the private URL field.

Let me know 🙂

[Daniel]

Hi Leo,

I’ve just sent the link. If you look on the homepage and scroll down to the featured products, you’ll see that there is a lot of white space around each product (which is not there when editing in the Elementor editor). I really need to remove this space.

Also, the ‘Sale’ icon on the product ’15 Singapore’ appears as a rectangle rather than a circle.

It seems like GeneratePress is overriding the Elementor settings but I just can’t figure out where? What I’ve described above is when the WooCommerce GP Module is turned on. As I mentioned, if I turn it off the white space goes and it matches exactly what appears in the Elementor editor, but unfortunately I then also lose the Woo functionality that’s included in GeneratePress.

Thanks.

[Tom]

Hi there,

The white space that I’m seeing is because the products are taking up the entire width of the screen.

For example, if you give the container a max-width, the issue goes away:

.elementor-widget-container .woocommerce.columns-2 {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

[Daniel]

Hi Tom,

Thank you for the reply. I was actually just taking some screenshots for my client and had to temporarily disable the GP WooCommerce module around the time of your reply, so I’m not sure you were actually seeing the issue when you went to the page. If you go to it now you should see the problem. I’ve also screenshotted it below:

How it looks live in the browser:

How it looks in Elementor (how I want it to look)

I tried adding the CSS but it actually increased the white space even more?

Sorry to be a pain!

[Tom]

The reason it looks better in Elementor is because the panel is making the website less wide.

Can you re-add the CSS I shared so I can check it out? It should fix the issue.

[Daniel]

Hi Tom,

I’ve added the CSS. It reduces the space between the columns but increases it at each side.

The ‘sale’ icon also goes from being a circle to a rectangle with the GP WooCommerce module active. Also I can’t edit the colours for the star rating.

The only reason I really need the GP WooCommerce module active is for the ‘display secondary image on hover’ feature. Is there a way to do this with the module deactivated?

Thanks for your help.

[Tom]

It’s possible, but it’s quite a bit of custom code, unfortunately.

Can you show me what the grid looks like with the WooCommerce module deactivated? I can’t think of why it display differently. If I can see what it’s supposed to look like, I should be able to provide the right CSS.

For the sales badge, try this CSS:

.woocommerce span.onsale, 
.woocommerce ul.products li.product .onsale, 
.woocommerce ul.products li.product.sales-flash-overlay .onsale {
    min-width: 3.236em;
    border-radius: 100%;
    min-height: 3.236em;
    padding: .202em;
    line-height: 3.236em;
    top: -10px;
    right: -10px;
}

Is the Customizer option in Customize > Colors > WooCommerce not changing the star rating colors?

[Daniel]

Hi Tom,

Thanks for the reply. The code for the sales badge worked – thanks. I’ve also successfully changed the star rating colours.

Here’s what it looks like with the WooCommerce module deactivated:

and here’s with it activated:

No other settings were changed between the two screenshots.

Thanks so much for your help.

[Tom]

So that just looks like the images are larger. Can you re-activate the WooCommerce module so I can write some CSS for you?

Let me know 🙂

[Daniel]

Activated 🙂

[Tom]

Try this CSS:

.inside-wc-product-image {
    width: 100%;
}

[Daniel]

Hi Tom,

That works! Thank you so much!

Have a great Christmas.

Dan

[Tom]

Thanks! You too 🙂

[Author]

Posts