Variable Product Price Display

This topic has 11 replies, 2 voices, and was last updated 6 years, 2 months ago by Elise Noromit.

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

Author

Posts
December 14, 2018 at 5:06 pm #96180

Schuifdeurexpert
Participant

I would like to make some adjustments to the price display of variable products. (see image)

1. I would like to remove the price range, and only show the minimum price
2. Can I also do this on the category page?
2. I would like display the ‘original price’ at the top, right before the minimum price (just like simple products price display)

Could I fix this with CSS code?

Regards,
Roel

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

December 14, 2018 at 6:16 pm #96205
Elise Noromit
Member
Hello,

Please add this code to the Theme Settings > Custom CSS
```
body .product-grid-item .price,
body .single-product-page .summary-inner > .price {
        font-size: 0;
}
.single-product-page .summary-inner > .price > span:first-child {
   font-size: 22px;
}
.single-product-page .summary-inner > .price > small {
    font-size: 18px;
    margin-left: 6px;
}
body .product-grid-item .price > ins,
body .product-grid-item .price > span:first-child {
   font-size: 14px;
}
body .product-grid-item .price > del {
    font-size: 12px;
    margin-right: 3px;
}
body .product-grid-item > .price > small {
    font-size: 12px;
    margin-left: 4px;
}
body .single-product-page .summary-inner > .price > ins,
body .single-product-page .summary-inner > .price > span:first-child {
   font-size: 22px;
}
body .single-product-page .summary-inner > .price del {
    font-size: 22px;
    margin-right: 6px;
}
```
Best Regards
December 14, 2018 at 7:17 pm #96219

Schuifdeurexpert
Participant

Thank you for your reply.

Unfortunately this only made the minimum price smaller.. I would like to remove the price ‘170’ and place price ‘129,90’ right before 69,95 on the top

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

December 15, 2018 at 8:19 am #96265

Elise Noromit
Member

Hello,

Please deactivate your cache plugin and provide site admin access.

Best Regards

December 17, 2018 at 10:08 am #96509

Schuifdeurexpert
Participant

I had some other CSS code overwriting the code in this topic.
It deleted the maximum price, thats good.

But I still have the ‘old’ price (in grey) above the ‘add to cart’ button instead of above the short product description before the ‘minimum’ price.

December 17, 2018 at 10:55 am #96518

Elise Noromit
Member

Hello,

The code we have provided has hidden the highest variation price http://prntscr.com/lvz4bn

The sales price is the different functionality. This is dynamic price and it cannot be hidden with CSS.

Best Regards

December 17, 2018 at 11:02 am #96520

Schuifdeurexpert
Participant

Ok thank you.

The highest variation price is still shown on mobile view. Could I remove this one also?

December 17, 2018 at 12:32 pm #96535

Elise Noromit
Member

Hello,

Here is the screen on mobile http://prntscr.com/lw0m5v there is the lowest price only.

Best Regards

December 17, 2018 at 1:48 pm #96549

Schuifdeurexpert
Participant

Sorry I wasn’t clear enough. What I meant was the lowest price on the Category page:

https://schuifdeurexpert.nl/product-categorie/schuifdeursystemen/

December 17, 2018 at 3:58 pm #96581
Elise Noromit
Member
Hello,

Add this custom CSS to the Theme Settings > Custom CSS > Mobile
```
body .product-grid-item.col-6 .price {
    font-size: 0;
}
```
Best Regards
December 17, 2018 at 7:15 pm #96636

Schuifdeurexpert
Participant

Thank you! That did the trick.

December 17, 2018 at 8:27 pm #96641

Elise Noromit
Member

You are welcome! If you have any questions please feel free to contact us.

Best Regards
Author

Posts