Variable Product Price Display

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.

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

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.

Hello,

Please deactivate your cache plugin and provide site admin access.

Best Regards

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.

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

Ok thank you.

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

Hello,

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

Best Regards

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

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

Hello,

Add this custom CSS to the Theme Settings > Custom CSS > Mobile

body .product-grid-item.col-6 .price {
    font-size: 0;
}

Best Regards

Thank you! That did the trick.

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

Best Regards

[Author]

Posts