Variable Product show only lowest price

Hello, On shop page, i want to show only lowest price of variable product, how to do ?

Thanks

Hello,

Please try to add the 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;
}

If code does not work, please provide your site shop page URL, now it is not working

Best Regards

It doesn t work.

Hello,

Please copy this code from the forum and add 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

Thanks it works

Attachments:

You must be logged in to view attached files.

help !

First of all, thank you for the solution.

I want to hide the price that highlighted like on attached file. Only on signle product page.

Thanks

Attachments:

You must be logged in to view attached files.

Hi your following code not works for mobile browser, is it normal ? Please check on your mobile device, please.

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

Please look at “small onion” example attached file, i sent you mobile and desktop version.

Thanks

Attachments:

You must be logged in to view attached files.

Second attached file

https://drive.google.com/file/d/1w4sem5s7U0pXgPIaOPxEUmi3lNtG6o0V/view?usp=drivesdk

Hello,

It is not possible to hide the price only on the simple product. Please provide the page URL with the problem

Best Regards

Sorry i was not clear.

I different behaviour of displaying lowest price on grid view.
On mobile i have both price.
But on laptop, it shows like i want, only lowest price.

Look at below attached:
Laptop version:
https://drive.google.com/file/d/1w4sem5s7U0pXgPIaOPxEUmi3lNtG6o0V/view?usp=drivesdk

Mobile version
https://drive.google.com/file/d/1ULibaP0EKzu35GXEBrb62v-DR69eEr0c/view?usp=drivesdk

Problme solved !

Thanks

[Author]

Posts