Tagged: , ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • February 12, 2021 at 4:38 pm #1280103
    JohnMYates

    What we would like is to be able to target the price field using CSS in the following way

    RRP: £200.00 OUR PRICE: £150.00

    From the product record:
    £200.00 is the regular price (i.e. the RRP)
    £150.00 is the sale price

    The styling we want for each element of the above is below (shown using a pseudo CSS notation to hopefully make it clear what we are trying to achieve):

    RRP: (
    font-size: 12px;
    color: #000000;
    text-decoration: line-through black;
    )
    £200.00 (
    font-size: 12px;
    color: #000000;
    text-decoration: line-through black;
    )
    OUR PRICE: (
    font-size: 20px;
    color: #ff0000;
    font-weight: 700;
    )
    £150.00 (
    font-size: 20px;
    color: #ff0000;
    font-weight: 700;
    )

    At the same time we would like products that don’t have a sale price and are therefore only showing one price to show as:

    OUR PRICE: £78.00

    where the style for each element is

    OUR PRICE: (
    font-size: 20px;
    color: #ff0000;
    font-weight: 700;
    )
    £150.00 (
    font-size: 20px;
    color: #ff0000;
    font-weight: 700;
    )

    The CSS code we have used so far is shown below. It fails to achieve what we want because we haven’t been able to target the two prices shown separately. We are close but no cigar – so far!

    #top .price, #top .price span, #top ins .woocommerce-Price-amount amount {
    color: red;
    font-size: 20px;
    }

    #top #wrap_all ins::before {
    content: “OUR PRICE: “;
    color: #ff0000;
    font-size: 20px !important;
    }

    #top #wrap_all del {
    color: black;
    text-decoration: line-through black;
    font-size: 12px;
    }

    #top #wrap_all del::before {
    color: black;
    content: “RRP: “;
    }

    February 16, 2021 at 4:55 am #1280696
    Rikard

    Hey JohnMYates,

    Please try the following in Quick CSS under Enfold->General Styling:

    Regular price CSS:

    .price span.woocommerce-Price-amount bdi, .price span.woocommerce-Price-amount bdi span {
  color: green !important;
}

    Sale price:

    .price ins span.woocommerce-Price-amount bdi, .price ins span.woocommerce-Price-amount bdi span {
  color: yellow !important;
}

    Best regards,
    Rikard

    February 16, 2021 at 9:57 am #1280750
    JohnMYates

    Thanks Rikard

    that’s great it solves the first part of the issue completely.

    Is there any way to separately address the price field for all of the Regular Price items (where there is no Sale Price)? So, for those we want to show in Blue for example.

    regards

    John

    February 17, 2021 at 5:59 pm #1281837
    Ismael

    Hi,

    Thank you for the update.

    We could use the unique class name or selector (product_on_sale or sale) for products on sale.

    Regular price:

    
/* regular price */
.price ins span.woocommerce-Price-amount bdi, .price ins span.woocommerce-Price-amount bdi span {
  color: blue !important;
}

    Sale:

    /* on sale */
.sale .price ins span.woocommerce-Price-amount bdi, .sale .price ins span.woocommerce-Price-amount bdi span {
  color: red!important;
}

    OR

    /* on sale */
.product_on_sale .price ins span.woocommerce-Price-amount bdi, .product_on_sale .price ins span.woocommerce-Price-amount bdi span {
  color: red!important;
}

    Best regards,
    Ismael

    February 17, 2021 at 6:56 pm #1281862
    JohnMYates

    Thanks Ismael – but it didn’t work for me

    In case there is doubt about what we are trying to achieve please see edited screenshot of page (link to page is in private content)

    Price colours wanted

    Worth noting that I can’t find the necessary selectors when using the Inspector in Firefox (or Chrome) so I am wondering whether it is even possible.

    Thanks for your help

    regards

    John

    February 19, 2021 at 11:08 am #1282182
    Rikard

    Hi John,

    This CSS which is added to Quick CSS, it currently applying the black colour:

    .price span.woocommerce-Price-amount bdi, .price span.woocommerce-Price-amount bdi span {
    color: #000000 !important;
    font-size: 18px;
}

    If you change that to blue, it’s should apply as expected.

    Best regards,
    Rikard

    February 19, 2021 at 11:15 am #1282183
    JohnMYates

    Hi Rikard

    I made the change but it affects (unfortunatey) both those products which have a sale price and those which don’t – see screenshot

    I am guessing this isn’t possible which is a shame but I will understand if you guys pull the plug on this issue

    regards

    John
    After changing css as instructed

    February 20, 2021 at 2:38 pm #1282471
    Rikard

    Hi John,

    I think we misunderstood you, we thought you wanted to target all the regular prices. Not just the ones which has a sale price as well. Please try this to target the regular prices on products with a sale price:

    .product_on_sale .price span.woocommerce-Price-amount bdi, .product_on_sale .price span.woocommerce-Price-amount bdi span {
    color: blue;
}

    Best regards,
    Rikard

    February 22, 2021 at 11:07 am #1282747
    JohnMYates

    Thanks Rikard

    regards

    John

    February 22, 2021 at 6:57 pm #1282875
    Victoria

    Hi JohnMYates,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

    February 14, 2023 at 11:26 am #1397884
    martinonenvato

    Great, also solved my problem. Thanks!

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Enfold / Woocommerce Price field CSS selectors’ is closed to new replies.