WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce - excelling eCommerce
[resolved] Any way to make the price bigger on the product page? (18 posts)

  1. Thabto
    Member
    Posted 1 year ago #

    I think the price in the product page is too tiny. Is there a way to make it bigger?

    http://wordpress.org/extend/plugins/woocommerce/

  2. jameskoster
    Member
    Plugin Author

    Posted 1 year ago #

    Sure. Try adding some custom css to your theme;

    .single-product .summary .price {
    font-size:3em;
    }

    That should make it plenty big.

  3. Thabto
    Member
    Posted 1 year ago #

    That did not work. Where does it go? in my theme CSS in the editor? Or do I have to go into the CSS outside of WordPress?

  4. Stacy (non coder)
    Member
    Posted 1 year ago #

    Added it like this in the style.css ..nothing

    /* 7.2.1 Single Product */
    .product {
    position: relative;
    font size: 20em;
    }
    .onsale {
    position: absolute;
    top: 0;

  5. Stacy (non coder)
    Member
    Posted 1 year ago #

    ..wow just changing that line and then changing back has messed up the mobile theme. As usual random kinks even when the code is changed back..

    Have to delete and re-upload , which whenever I do, all settings must be redone..

    (free woo theme )

  6. jameskoster
    Member
    Plugin Author

    Posted 1 year ago #

    @Thabto it goes in your themes style.css file.

    @Stacy your code will have made _all_ the product content huge as you applied it to the .product class. You need to apply it to .price class as depicted in my original snippet ;-)

    Thanks

  7. MoonDog
    Member
    Posted 1 year ago #

    That's not how I did it. I went into the woo css and revised two files.

    wp-content/plugins/woocommerce/assets/css

    Make your revisions to the woocommerce.css and woocommerce.less files.

    /* Price */
    span.price, p.price {
    color: @highlight;
    font-size: 1.4em;
    font-weight: bold;

    Boom. It works.

  8. Thabto
    Member
    Posted 1 year ago #

    Found the solution. I'm posting my code below that worked for me. I had to go into my wp-content/plugins/woocommerce/assets/css/woocommerce.css to do it.

    .woocommerce div.product span.price,.woocommerce div.product p.price,.woocommerce #content div.product span.price,.woocommerce #content div.product p.price,.woocommerce-page div.product span.price,.woocommerce-page div.product p.price,.woocommerce-page #content div.product span.price,.woocommerce-page #content div.product p.price{color:#85ad74;; padding-top: 10px; padding-bottom: 10px;}

    Be sure to add some padding to it as it will overlap the title when you increase the font size.

    @MoonDog, your suggestion made the prices bigger in the store listings grid. I needed to change that as well so thanks. But above is the code that made the price bigger in the individual product listing.

    Thanks to all who have helped.

  9. Aglea
    Member
    Posted 1 year ago #

    James's solution worked fine for me in the custom.css (actually wanted the price smaller) but I had to add !important:

    .single-product .summary .price {
    font-size: 1em !important;
    }

  10. recessionwhackers
    Member
    Posted 1 year ago #

    Hi Folks,

    I've been trying to figure things out with the font size and I must say that it's a struggle. I'm not a coder, but I'm the kind of person who dares to fool around with the .css files by opening them and looking for 'font-size', and I try to experiment and see if things work. However, I've spent a long time doing this to no avail.

    Please look at this link:
    http://gharfurnish.com/shop/

    How can I fix the font sizes on the prices in green font? (I did manage to do something to the other ones in grey font).

    Thanks in advance.

  11. recessionwhackers
    Member
    Posted 1 year ago #

    PS: I need specific instructions, as I'm kind of a newbie to this. All the help appreciated.

  12. vark
    Member
    Posted 1 year ago #

    @recessionwhackers -
    put this line at the bottom of your theme css file, should do the trick:
    ul.products li .price ins span {font-size: 1.4em;}

  13. recessionwhackers
    Member
    Posted 1 year ago #

    Hi Varktech,

    I'm using Headway 2.14.

    How do I do that? Should I edit the .css file there?

    Thanks.

  14. recessionwhackers
    Member
    Posted 1 year ago #

    Hi Varktech,

    Thanks. I used your code in the Visual Editor in Headway as "Live CSS" and it worked perfectly!

    Thanks again. Problem solved.

  15. recessionwhackers
    Member
    Posted 1 year ago #

    Hi folks,

    I've made a bit of progress.

    I've got one more problem:

    How do I change this font size?

    http://gharfurnish.com/shop/black-poly-magnum/

    Please look at the description font towards the bottom. That's really small.

    Thanks again.

  16. recessionwhackers
    Member
    Posted 1 year ago #

    I also need the tabs at the bottom to look slightly bigger - description and reviews.

    Thanks.

  17. Stacy (non coder)
    Member
    Posted 1 year ago #

    @varktech.com's line worked, but not for the "was" price.

    @jameskoster . There were 22 places in the stylesheet that said "price". I put it under /* 7.2 Products */ instead

    }
    ul.products li.product .price {
    display: block;
    color: #9f9693;
    font-size: 10em;
    margin-bottom: 1em;

    @recessionwhackers You might find the "firebug" addon tool for firefox browser helpful. It allows you to see where to edit the code for a specific item in the visual.

  18. Skoad
    Member
    Posted 4 months ago #

    bumping an old post because having similar issue with latest updates.

    When viewing all the products on the grid style page, the $-$ is too small. I want to make it larger/bolder but have gone all through the style.css file for my theme and tried editing tons of different font sizes dealing with products/pricing.. no luck.

    Also added the code mentioned by james to my style.css but noticed no changes. Guessing some things were changes in the newer woocommerce updates?

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.