Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #19267

    Hi, again me,

    sorry, but it is really hard for a beginner :-|

    On the product page the price is just below the product title (it’s a product with variants all the same price) left aligned and very small in size. Following suggestions from another post here, I figured out with firebug, that there is following structure

    the price is inside of an span with the class .amount

    wrapped arround is a paragraph with the class .price

    this both are wrapped by a div without id or class, which seems to me is just for microdata purposes (i.e. google rich snippet?)

    however, I want to make the price bigger cause I don’t need to hide it :) the css I found in woocommerce-mod.css line 405, so I made a copy of it to put it into my custom.css, it carries this css where I can change the price font-size:

    #top .price, #top .price span, #top del, #top  ins{
    display:inline;
    text-decoration: none;
    font-size: 12px;
    line-height: 18px;
    font-weight: bold;
    }

    But for the allignment of the price to the right I need to touch the paragraph (p) since I can not allign inline elements. Inspecting it further, I believe to found the p elment in the backend custom style modifications area directly in the pages source code, which comes after the custom.css, so overwriting it.

    So this does not change anything:

    p.price { text-align: right; }

    Also a margin-bottom is ignored. Where can I get this done?

    Thanks for hints

    Tom

    PS: nearby, hint for the next version:)

    * the add to cart button is missing its lower border (caused by 1px too much vertical padding)

    * with woo shareThis enabled, the sku, category and reset selection line is sticking to close to the shareThis buttons (product_meta missing border-bottom)

    #102982

    Hi gsTom,

    To prevent other styles from overwriting the style you made in custom.css or Quick CSS, try using the !important. For, example in your code above font-size doesn’t change, try to change your code to this:

    #top .price, #top .price span, #top del, #top  ins{
    display:inline;
    text-decoration: none;
    font-size: 12px !important;
    line-height: 18px;
    font-weight: bold;
    }

    For the margin-bottom not working, try to change your display value from inline to inline-block. Hope this helps.

    Regards,

    Ismael

    #102983

    Hi Ismael,

    the font-size change is working well in custom.css also without !important declaration.

    Unfortunatley it also changes the font size in the archive page (where all products are listed) :(

    The alignment of the price tag to the right I could still not accomplish

    Thanks

    Tom

    #102984

    Hi,

    Try to add this then

    .archive #top .price, .archive  #top .price span, .archive #top del, #top  ins{
    display:inline;
    font-size: 10px !important;
    }

    Change the font-size value.

    Regards,

    Ismael

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

The topic ‘replete styling of the product price at product level’ is closed to new replies.