CODEWITHSUNDEEP
htmlcsswordpresswoocommerce
Павел Иванов
Павел Иванов

Reputation: 1913

Place one div with price above another one

I have a small eStore powered by wooCommerce plugin on default Wordpress theme "Unite".

I'd like to modify a default price layout which looks like this for now:

enter image description here

Css snippet:

<span class="price">
    <del>
        <span class="amount">2,200.00&nbsp;руб.</span>
    </del> 
    <ins>
        <span class="amount">1,500.00&nbsp;руб.</span>
    </ins>
</span>

I need to place both prices in one row that it wouldn't break the grid. For now, it renders list of watches this way:

enter image description here

How could I modify css rules to place all prices in one row using css and pseudo-elements? Thank you!

Upvotes: 1

Views: 354

Answers (2)

Aaron
Aaron

Reputation: 10450

This should do it, but you'll need to change the font sizes so they don't exceed the width of your product container... /* Added a imaginary width to the span.price, not sure how wide your products are? */ 

span.price {
  width: 220px;
  display: block;
}
span.price del,
span.price ins {
  float: left;
}
span.price del {
  width: 35%;
  font-size: .7em;
}
span.price ins {
  width: 65%;
  font-size: 1.4em;
}
<span class="price">
    <del>
        <span class="amount">2,200.00&nbsp;руб.</span>
    </del> 
    <ins>
        <span class="amount">1,500.00&nbsp;руб.</span>
    </ins>
</span>

Upvotes: 2

mahyar alirezaei
mahyar alirezaei

Reputation: 19

you can use Float or displat:inline-block for show in line spans ... discount label : Float:left/right Price label : Float

Upvotes: 0

Related Questions