Variable Product prices shown as "from $20"

Hi, I would like to show the price for Variable Products not as the default (for example “$20 – $200”) but instead like this: “from $20”.

An example for that can be found here: https://www.cgiplaygrounds.com/

Do I need custom CSS for that ?

Thanks

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

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;
}

@media (max-width: 576px) {
    body .product-grid-item.col-6 .price {
        font-size: 0;
    }
}

Best Regards

Hi Elise,

thank You for the very quick answer !

This almost fixed it for me, just one more question:

I would love to have the word “from” in front of the price of every variable product on the Shop Page as well as on the product page itself, when You haven’t chosen a usable variation yet.

Is that possible ?

Thanks in advance
Florian

Hello,

It is not possible to do with CSS, as it will insert “from” before all the prices even for simple products. Such modification requires Woocommerce customization what is not covered by our support.

Best Regards

HI,

thanks again, I understand.

Since ALL my product will be variable products, could You send me the CSS, where the word “from” is positioned in front of every price only for the Shop page ? This Should work for me.

Thanks in advance
Florian

Hello,

Please add this code to the Page Settings of the Shop page in WP Bakery page builder

body .product-grid-item .price > ins, body .product-grid-item .price:before {
        content: "from ";
	      font-size:15px;
}

Best Regards

[Author]

Posts