WooCommerce: How do you add text before the price

Question

I have managed to successfully get text to show up before the price and before the sale price, but the text is being considered part of the price not separate from it.

Placing:

ins:before{
  content: "Betty's price: ";
  color: #000;
  font-size: 14px;
}

in my custom CSS file successfully puts "Betty's price: " before the new "sale" price. The problem is that Betty's Price: is now underlined and clickable and its part of the same link as the price text.

I'm trying to get this text inserted before the price, and not be part of the price. I don't want this text to be formatted along with the price, either.

The same situation applies to the original price:

del:before{
  content: "Retail: ";
  color: #000;
  font-size: 14px;
}

PS: I'm also hoping to add a new line character in addition with the "Betty's price " bit so that that line can go below the retail price, if that changes anything.

Answer 1

Method 1

You have the woocommerce plugin installed. In order to overwrite the woocommerce page templates you need to create a folder called "woocommerce" in your theme's folder. Go to your website's "wp-content/plugins/templates" and copy the file content-product.php to "wp-content/themes/your-theme/woocommerce/". If you're theme is called "mytheme" you will have this path: "wp-content/themes/mytheme/woocommerce/content-product.php".

You can edit the file content-product.php as you want. This file is the one that displays the products on the category pages. You can see that your product is displayed inside a < li >.

Right now, the content-product.php looks like this:

<li <?php post_class( $classes ); ?>>

<?php do_action( 'woocommerce_before_shop_loop_item' ); ?>

<a href="<?php the_permalink(); ?>">

    <?php
        /**
         * woocommerce_before_shop_loop_item_title hook
         *
         * @hooked woocommerce_show_product_loop_sale_flash - 10
         * @hooked woocommerce_template_loop_product_thumbnail - 10
         */
        do_action( 'woocommerce_before_shop_loop_item_title' );
    ?>

    <h3><?php the_title(); ?></h3>

    <?php
        /**
         * woocommerce_after_shop_loop_item_title hook
         *
         * @hooked woocommerce_template_loop_rating - 5
         * @hooked woocommerce_template_loop_price - 10
         */
        do_action( 'woocommerce_after_shop_loop_item_title' );
    ?>

</a>

<?php do_action( 'woocommerce_after_shop_loop_item' ); ?>

</li>

You can see that after the title it's included this function: do_action( 'woocommerce_after_shop_loop_item_title' );

That function is defined in: plugins/woocommerce\includes\wc-template-hooks.php, so we won't touch it, I consider it a core file. You should edit only the templates files, because, if there will be an update to the plugin, you will loose your settings.

So I suggest you to replace the above code with this one:

<li <?php post_class( $classes ); ?>>

<?php do_action( 'woocommerce_before_shop_loop_item' ); ?>

<a href="<?php the_permalink(); ?>">

    <?php
        /**
         * woocommerce_before_shop_loop_item_title hook
         *
         * @hooked woocommerce_show_product_loop_sale_flash - 10
         * @hooked woocommerce_template_loop_product_thumbnail - 10
         */
        do_action( 'woocommerce_before_shop_loop_item_title' );
    ?>

    <h3><?php the_title(); ?></h3>

       <span>Enter Your Text Here!</span>

    <?php
        /**
         * woocommerce_after_shop_loop_item_title hook
         *
         * @hooked woocommerce_template_loop_rating - 5
         * @hooked woocommerce_template_loop_price - 10
         */
        do_action( 'woocommerce_after_shop_loop_item_title' );
    ?>

</a>

<?php do_action( 'woocommerce_after_shop_loop_item' ); ?>

</li>

You can see that I've added a span after the title. You can add a class or a style attribute to that span, or you can change the span to a div in order to modify it as you wish. But the solution will work.

Method 2

When you want to add some texts/images after or before a Woocommerce zone, you need to add a hook. First of all, you need to know how hooks works, so please read about Wordpress actions and filters here.

Now that you know how to add an action or a filter, read about Woocommerce hooks here.

You will have to create a filter in your theme's functions.php file and there you'll add your text before or after the price.

Next time when you have a question regarding the Wordpress CMS, please post it here: https://wordpress.stackexchange.com/