[Resolved] Woocommerce Rounded Category Images/Elementor

[Rob]

Is there an issue with GP Pro + Woocommerce addin & Elementor? Product Categories widget not showing outline on category image. Widget says could be styling issues and use basic theme but GP & Elementor work pretty well together.

Discovered it was the GP Pro Woocommerce option causing the problem! Deactivated it and borders, set by Elementor, are appearing as expected. Odd, as would have thought they would have integrated better!

It only using Products Archive widget is there a problem. Other elements eg Product Title, Featured/individual Products borders etc, ok! Addin active now and only basic square images showing for main cat items.

regards
Rob Willox

[Tom]

Hi Rob,

Any chance you can show me what it’s supposed to look like? A screenshot maybe?

That’ll help me debug what’s going on 🙂

Thanks!

[Rob]

Hi Tom

Thanks for the quick response.

Screenshot of the page as it looks like in Elementor Edit page showing the rounded borders on the main category images. As said only seems to be on Product Categories widget; product and other widgets seems to be ok!

Hope that helps. (Couldn’t see any link to add an attachment so link below.)

regards
Rob

Elementor Screenshot

[David]

Hi there,

i can’t actually see the CSS from the Elementor editor being applied ie. there is no border or border-radius being set. Can you clear and disable your cache, re-edit the page, save it and then preview the live page in an incognito browser?

[Rob]

Hi David

Have done that many times over last few days testing but nothing seems to make a difference. Have done as you suggested and edited, increasing the border from 1 to 5px to test and viewed in Chrome Incognito.

Links below to 2 images, one with GP Woocommerce Addin active and other with it deactivated, nothing else changed. Current live page is with it deactivated and can be seen with borders showing:-

Addin Active
Addin Deactivated

Hope that helps.

regards
Rob

[David]

Hmmm…. the odd part is this CSS is what Elementor is generating for the border-radius:

.elementor-2987 .elementor-element.elementor-element-cc7f496 a > img {
border-style: solid;
border-width: 5px 5px 5px 5px;
border-color: #ffb700;
border-radius: 20px 20px 20px 20px;
margin-bottom: 0px;
}

As you can see it is highly specific to the Elementor image, there are no Woocommerce selectors involved so can’t see why this CSS is not present when the GP Woo module is activated.

Can you reactivate the module so i can see what changes between the two.

[Rob]

Hi

That’s it activated. As you can see it applies primarily to product categories.

regards
Rob

[David]

So this is with GP Woo Addon which uses the standard Woo Templates:

And here is Elementor:

For whatever reason they decided to strip out wc-product-image and inside-wc-product-image wrappers so and applied the specific CSS to the image which has to be direct descendent of the a tag.

Just testing in elementor – and they actually add a disclaimer to the product archive widget that this may be affected by the theme. So hell knows why they chose not to use the Woo standard template structure.

Simplest fix would be for us to give you some CSS to style those widgets. Let me know.

[Rob]

Hi

Thanks for the quick update and explanation. As you say why switch if it ain’t broke but… Might ask the question on their support forum!

It wasn’t critical either way having rounded borders but having the option is useful particularly as the GP Woo option has a better/compact default layout for the checkout page which made it the preferred choice.

Would be great if you could provide the CSS as that would save a lot of hair-pulling (got little enough left) 🙂

Thanks
Rob

[David]

Try this CSS:

.woocommerce ul.products li.product-category a img {
    border-style: solid;
    border-width: 5px 5px 5px 5px;
    border-color: #ffb700;
    border-radius: 20px 20px 20px 20px;
}

Can’t do much about the hair…. i’m fighting a losing battle 🙂

[Rob]

Hi David

Thanks for that! Just got round to adding it to Simple CSS and works like a treat.

Cheers, and unfortunately, it’s a battle unlikely to be won 🙁

regards
Rob

[David]

You’re welcome glad to be of help.

[Author]

Posts