[Resolved] GP WooCommerce Module with Elementor

Home Forums Support GP WooCommerce Module with Elementor

  • This topic has 13 replies, 3 voices, and was last updated 9 months ago by Tom.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1107914
    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. 🙂

    #1108030
    Leo
    Staff
    Customer Support

    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 🙂

    #1108902
    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.

    #1109039
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #1109073
    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!

    #1109315
    Tom
    Lead Developer
    Lead Developer

    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.

    #1109584
    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.

    #1110340
    Tom
    Lead Developer
    Lead Developer

    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?

    #1111500
    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.

    #1111816
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1112054
    Daniel

    Activated 🙂

    #1112486
    Tom
    Lead Developer
    Lead Developer

    Try this CSS:

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

    Hi Tom,

    That works! Thank you so much!

    Have a great Christmas.

    Dan

    #1112815
    Tom
    Lead Developer
    Lead Developer
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.