Add small text below price

  • Resolved gluecklichezwerge

    (@gluecklichezwerge)


    6 years, 8 months ago

    Hi,

    there are a lot of examples, but I wasn’t able to achieve my desired goal.
    I already added a symbol to my prices on categories and single product pages. A short note in the footer area has also been added.
    But now I would like to add text in smaller font size directly below the price on single product pages only (sth like excl. shipping costs). I was able to add the text, but either it wasn’t in smaller fonz size or there was a big gap between price and my text (therefore I removed the text again).
    I don’t want to use a plugin, because I would like to improve on my scripting skills.

    Any hint or help is welcome! ??

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)

  • Something like this:

    .woocommerce div.product .summary p.price::after {
    content: ‘text here’;
    font-size:20px;
    }

    Thread Starter gluecklichezwerge

    (@gluecklichezwerge)

    Hello,

    thanks for your reply. ??
    That added my text right after the price. Not exactly what I was looking for, I’d prefer it to be direct below the price. But I think, because I didn’t came up with another solution yet, I’ll just leave it the way it is now. So, thank you for this snippet.

    Best regards,

    -Bj?rn

    Caleb Burks

    (@icaleb)

    Automattic Happiness Engineer

    WooCommerce > Settings > Tax > Price display suffix is what you are looking for I believe.

    • This reply was modified 6 years, 8 months ago by Caleb Burks.

    To add the text as a separate element below the price, you can use a hook:

    add_action( 'woocommerce_single_product_summary', 'custom_text', 15 );
function custom_text() {
  print '<p class="custom_text">My text here</p>';  
}

    The snippet can go in functions.php for your child theme or you can use the “My Custom Functions” plugin.

    Then to style it you can use:

    .custom_text {
  font-size: 12px;
}

    This style goes at Appearance > Customize > Additional CSS.

    You can also add \A to the content: line above:

    .woocommerce div.product .summary p.price::after {
    content: ‘\Atext here’;
    font-size:20px;
    }

    But the hook in functions.php looks good @lorro – will that just put the text on the product page? What about doing something similar for the products list in a category?

    Cheers

    That code is just for the product page. You can do something similar for the products on category pages. To see the hooks that are available, see
    woocommerce/templates/content-product.php

    A hook can have one or several function calls attached to it. Where there is more than one call, use the priority parameter in the add_action() to set the call order.

    Thanks – I need to read up on these!

    Thread Starter gluecklichezwerge

    (@gluecklichezwerge)

    Hi Lorro,

    thanks for your input, but that’s where I ended up the last time.
    The gap between text and price is just too big and I didn’t brought them any closer.
    I’ll just leave the result for now so you can take a look at it when being online again.
    Example:
    https://www.gluecklichezwerge.de/produkt/schluesselanhaenger-glitzerkrone-stern/

    Thanks for your effort, guys!

    Edit:
    Omg, coming from one topic to another isn’t helpful at all.
    After taking a few minutes I figured it out.
    Add this to Custom CSS to display additional text direct below price

    p.price {
	margin-bottom: 0px !important;
}
Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Add small text below price’ is closed to new replies.