Docs

[tomcahill]

I added some css to give additional information on the product listing page and it looks OK.
I used the below css.
The problem is that as soon as you make your selection of product and options, the same text occurs in both the final total and option amount area.
I was trying to find out what the proper css call would be to have it show up only in the top area.
Here is an example of one of the product pages http://johnsbedrooms.ca/product/sapphire-bed-by-mako/
Thank you

.woocommerce .price::before {
content: “Priced from”;
line-height: 24px;
background-color: #f91c21;
color: #fff;
padding: 6px 8px;
border-radius: 0em 0em 0em 0em;
box-shadow: 0 0px 2px 0 #000000;
}
.woocommerce .price::after {
content: “Please make your selection below”;
background-color: #050505;
color: #fff;
padding: 6px 8px;
line-height: 24px;
border-radius: 0em 0em 0em 0em;
box-shadow: 0 0px 2px 0 #000000;
}

[Rupok]

Hi there,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[tomcahill]

Sure, sorry about that.

This page is a good example. When you go to the page you see it only displayed in the top area. As soon as you select size and colors it shows up on the bottom as well.

[tomcahill]

Sorry forgot the page example http://johnsbedrooms.ca/product/sapphire-bed-by-mako/

[Lely]

Hi There,

To prevent it from showing on the bottom prices as well, please update above CSS to this:

.woocommerce .summary>div>.price::before {
    content: "Priced from";
    line-height: 24px;
    background-color: #f91c21;
    color: #fff;
    padding: 6px 8px;
    border-radius: 0em 0em 0em 0em;
    box-shadow: 0 0px 2px 0 #000000;
}
.woocommerce .summary>div>.price::after {
content: “Please make your selection below”;
background-color: #050505;
color: #fff;
padding: 6px 8px;
line-height: 24px;
border-radius: 0em 0em 0em 0em;
box-shadow: 0 0px 2px 0 #000000;
}

Hope this helps.

[tomcahill]

Thank you.. Not only for this one, but down the road as well. Couldn’t see it for looking : )

[Rahul]

You are most welcome, sir!

[Author]

Posts