How to Add Different CSS styles through a Code Snippet to the Price texts (Suffix & Prefix) using the ELEX WooCommerce Product Price Custom Text plugin?

The  ELEX WooCommerce Product Price Custom Text plugin is used to set before and after text in the price field for a product on the shop page. This text helps customers to arrive at the purchase decision quite quickly, with any relevant additional details. The better visibility of the text has the potential to drive customers to decide upon whether to purchase the product or not.

Adding custom product price texts using CSS styles

This article explains how to add different CSS styles through a snippet code to the texts (suffix & prefix) using our ELEX WooCommerce Product Price Custom Text plugin.

Note – In this article, I am using font-size but the same can be done using different CSS functions for a style like font, colour etc.

To enable the Custom Text & Discount tab, please go to the below settings of this plugin:

Now once I enable the Custom Text & Discount option, I will be able to add Prefix or Suffix as per my requirement.

In our code snippet, we have taken an example of changing the font-size of the Suffix.

Suppose I have a Suffix as “FIXED” defined in the settings of Custom Text & Discount as follows:

So, without the code snippet, Suffix appears on the store as below which ideally has a default font-size.

Now, the code snippet which we will be adding in our functions.php file in the Theme editor is given below:

add_filter('woocommerce_get_price_html', 'elex_ppct_display_price_text',10,2);

function elex_ppct_display_price_text($price,$product){

    //add property for after text class

    wc_enqueue_js(

        "(function($){

            $('.elex-ppct-after-text' ).css('font-size','50px'); //described below

        })(jQuery);"

    );

return $price;

}

Through the highlighted code, you can also add other styling CSS functions like .css(‘color’,’ red’); – This will add red font color to the Suffix.

Example:  You need to replace the line  $(‘.elex-ppct-after-text’ ).css(‘font-size’,’50px’); with  $(‘.elex-ppct-after-text’ ).css(‘color’,’red’); to change the Font color to red similar CSS styles can be used.

With this code snippet, you will be able to increase/decrease the font-size. So in my example, I have added the font-size as 50px so my Suffix appears as below on the store:

This is how you can easily style your texts with different CSS functions through the above code snippet.

To know how to display custom texts before and after the product prices using the ELEX WooCommerce Product Price Custom Text plugin, and submit it to the Merchant Center.