Custom CSS for product price (at thumbnails)

Hi,

How can I change products price (only at thumbnails): size, color and margin bottom like the attached file … I gave an exemple of simple price and sale price …

Tks,

Lucas.

Attachments:

You must be logged in to view attached files.

Hello,

Try this CSS code:

.basel-hover-standard .amount {
    color: inherit;
}
.amount {
     color: inherit; 
}

Add this code Theme setting> Custom CSS > Desctop.

If the code is not workable, send me updated admin access.

Best Regards

Hi,

I’m trying to use this CSS.

/* TEXT ou 3x de */

.woocommerce .wc-simulador-parcelas-parcelamento-info.no-fee, .woocommerce .wc-simulador-parcelas-parcelamento-info.fee-included {
display: block;
font-weight: normal;
font-style: italic;
font-size: 14px;
color: #828282;
margin-top: 10px !important;
margin-bottom: 20px !important;
}

/* FULL PRICE */

.product-grid-item .price {
font-weight: 800;
font-size: 22px;
margin-bottom: 0;
margin-top: 20px;
color: #53c57f !important;
}

/* COR PREÇOS PRINCIPAL E PARCELA */

.basel-hover-standard .amount {
color: #38383e;
font-size: 22px;
}

/* DISCOUNT PRICE */

.price ins>.amount {
color: #53c57f !important;
}

But the point is that I need 5 custom CSS to do this attached layout.

1) CSS for full price;
2) CSS for original price;
3) CSS for SALE price;
4) CSS for ou 3x de
5) CSS for installments price.

Its not full working …

🙁

Hello,

All the prices types you have listed have one and the same class .woocommerce-Price-amount that is why it is impossible to set different colors for all of them.

Best Regards

Hi,

Thanks for your reply… its not exactly the same. I solved it with this CSS:

.woocommerce .wc-simulador-parcelas-parcelamento-info .woocommerce-Price-amount.amount { color: red !important;
}

Now its ok!

Tks!

Lucas.

We are glad you have solved the issue by your own. If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts