WooCommerce: How do you add text before the price and before sale price?

1 comment

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/woocommerceincludeswc-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/

   Log in to Reply