Display of Product Price

This topic has 7 replies, 3 voices, and was last updated 6 years, 1 month ago by Elise Noromit.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
October 17, 2018 at 4:24 am #83124

dreamzspl
Participant

Hi, question is attached in screenshot..

Thank you.

Attachments:
You must be logged in to view attached files.

October 17, 2018 at 6:14 am #83137

Artem Temos
Keymaster

Hi,

We can give you a CSS code to hide one of these prices but you can’t move them. Which one do you want to hide?

Regards

October 17, 2018 at 8:41 am #83202

dreamzspl
Participant

Hi Artem,

Hiding one is ok, but the one that remains needs to show the updated price depending on the variation attribute chosen for the product. Is this workable?

I wish to keep the price that is above (in the screenshot).

By Default, it just shows a range “$8.00 – $15.00”
Once i choose the attribute variation, the price will update accordingly to eg. “$15.00”.

Thank you.

Attachments:
You must be logged in to view attached files.

October 17, 2018 at 9:01 am #83214

Artem Temos
Keymaster

Only the bottom price is changed when you select the variation. So you can hide the top one only.

October 17, 2018 at 10:28 am #83236

dreamzspl
Participant

Is it possible then to keep the top one by default, and change to show the variation price when selection is being done?
Meaning,
1) By default, show top price range
2) Select product options
3) Top price disappears and replaced by variation price (Bottom price shifted to the top, just below product title)

Its quite important and hope this can be done.

Thanks

October 17, 2018 at 11:57 am #83264

Artem Temos
Keymaster

Sorry, but there is no such option in WooCommerce and we don’t have an instruction for this customization.

October 17, 2018 at 1:29 pm #83308

dreamzspl
Participant

Ok, can you provide the code to remove the bottom price please? Thank you.

October 17, 2018 at 2:38 pm #83333
Elise Noromit
Member
Hello,

In order to hide the bottom (right price) add this code to the Theme Settings > Custom CSS:

body .product-grid-item .price,
body .single-product-page .summary-inner > .price {
font-size: 0;
}
```
body .product-grid-item .price del,
body .single-product-page .summary-inner > .price del {
        margin-right: 3px;
}

body .product-grid-item .price span:first-child {
        font-size: 14px;
}

.single-product-page .summary-inner > .price span:first-child {
        font-size: 22px;
}
```
Best Regards
Author

Posts