Show Different Prices on Home Page and Product Page

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

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

Author

Posts
November 7, 2019 at 2:24 pm #155458

cagrikucukel
Participant

Hello,

Home page, product category page I want to show 1 qty price of the product. But I do not want to see 1 qty price in the product page.

I will sell my products in packs of 44, 132 and 288.

I’ve tried it on product variations. I’ve been successful on the home page and the product category page. But not on the product page. 1 qty piece option also comes out.
So…
How do I hide the first product variation on the product page?

November 7, 2019 at 3:06 pm #155471
Elise Noromit
Member
Hello,

The default Woocommerce does not provide the option to show one price per item in the grid and price per pack in the product page.

The way out is the variable product, where you can create one variation is per unit and other variations per pack in a different configuration. Then you can hide the bigger price with custom CSS:
```
body .product-grid-item .price{
	font-size: 0;
}
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;
}
@media (max-width: 576px) {
    body .product-grid-item.col-6 .price {
        font-size: 0;
    }
}
```
Add this code to the Theme Settings > Custom CSS > Global

Best Regards
November 7, 2019 at 4:46 pm #155503

cagrikucukel
Participant

No. What I want to do is in the product page. Hiding the first variation option. (not be removed)

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

November 7, 2019 at 8:08 pm #155542
Elise Noromit
Member
Hello,

If you want to hide only on the product page and show in the grid, replace the code with this one:
```
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 .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;
}
```
There is no other option. You will have to find a plugin or developer who would customize
woocommerce.

Best Regards
Author

Posts