Site logo

Archived topic

Related Product widget (Elementor) sale price styling

6 replies · Started by Sophie on September 27, 2021

Viewing posts 1–7 of 7

Hi,

For the related products on my site I'm using Elementor and their Related Products widget, but it says the styling is picked up from the theme for some sections and in their widget there doesn't seem to be a way to style the sale price.

Is there anyway I can adjust this as part of the theme or via CSS so it matches the rest of the site styling?

Here's the current widget: https://prnt.sc/1tw8m5t

& How it looks on the rest of the site: https://prnt.sc/1tw8s24

Hi Sophie,

I've inspected the site and the CSS is coming from Elementor.

The color if the price is coming from this CSS:

.elementor-672 .elementor-element.elementor-element-64d2c1b.elementor-wc-products ul.products li.product .price ins .amount {
    color: var( --e-global-color-eab6e39 );
}

Which is an Elementor CSS using a global color value.

The font size is coming from Elementor as well which is this CSS.

.elementor-672 .elementor-element.elementor-element-64d2c1b.elementor-wc-products ul.products li.product .price {
    color: var( --e-global-color-eab6e39 );
    font-family: "Josefin Sans", Sans-serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 1px;
}

It's using Elementor default values. It's the global settings. You can change it from there. :)

Hi Elvin,

Thanks for getting back to me so quickly.

There are settings weirdly for the price and regular price (eg price crossed out and regular price) which are working ok, but it's the sale price (eg $20) which there isn't an option to update. The above CSS I think is referring to the other price settings (as the font weight is the correct one), but the $20 sale price part is where I want to change. I've realised though too as I'm using other widgets from Crocoblock for the other styling it's just Elementor product widgets which don't have this functionality - so I'll try see if I can find an answer there!

Thanks so much for your time anyway :)

Both prices actually use the same font color but the regular price is lighter because it's less opaque.

The lighter one has 0.5 opacity but they use the same color: var( --e-global-color-eab6e39 );. The 20% is darker because it uses the actual shade of the color as it has full opacity (1).

Regardless, all of them are from Elementor. The exact path is here.
https://[omitted URL]/wp-content/uploads/elementor/css/post-672.css?ver=1632800836

Thanks - it's actually neither of those prices though I'm wanting to update (as I can set those in the settings for the regular and crossed out price weirdly) but it's the sale price (the $20) that I want to update to be like the other eg (in the orange tone)

It's an elementor widget thing/limitation though I think - you can only set the colour for the regular price and the crossed out price (not the actual sale price to be different).

Here's the version I want for context with the other pricing (using Crocoblock widget): https://prnt.sc/1u0pj3v
& the Related Products one with the basic Elementor one: https://prnt.sc/1u0pwdr

All of the styles are coming from Elementor from what I can tell.

Have you checked with their support team first?

This archived topic is closed to new replies.