Help editing html/css

Mpire · Oct 5, 2016

Hi, I'm doing some changes to my woocommerce site and i don't know how to make these changes

Atm my product page price looks like this:

1. How can I change the color of $30.00, also how can I delete the .00 if the normal price doesn't have decimals
2. How can I delete or move down the second $ (or both) symbol

This is how i changed my prices

Code:

del {
  font-size: 42px;
}
.woocommerce-Price-amount.amount {
  color: #e10013;
}

Btw if there is a way to not show the regular price as big on the rest of the website except on the product page (ex. not display it as big on my widget Other/recommended products or so..)

Thanks in advance

Samwise89 · Oct 5, 2016

It's going to be hard to help you without seeing the site. We'll need to know the actual full CSS. You could link to your theme so you aren't exposing your site.

Removing the last decimal places isn't going to be HTML or CSS. It'll be a PHP function.

It looks like you already found the spot to change the color of the big price. The $ sign will need a around it with a CSS class so you can do something like...

position: relative;
top: 20px;

That should push the $ sign down relative to it's own container.

Mpire · Oct 5, 2016

Samwise89 said:
The $ sign will need a around it

How can I add a on that symbol?
because if I add
position: relative;
top: 20px;
to .woocommerce-Price-amount.amount { ---- It moves all $ symbols all over my site
My Theme is flatsome from themeforest

Samwise89 · Oct 5, 2016

You add the in the right PHP template.

Mpire said:
How can I add a on that symbol?

Sounds like you might need to pay someone to help you out or ask a buddy if you have one to login for you and do it. This might be over your head at this stage, based on you asking that question. It's going to be a combo of things you need to do in the CSS file, the PHP templates, adding HTML to PHP, etc. Lots of interconnecting things.

Mpire · Oct 5, 2016

just fixed it:
.product-summary .woocommerce-Price-currencySymbol {
vertical-align: bottom;
margin-bottom: .45em;
}
Looks good now, thanks