Question 189034 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Adding a prefix to a CSS class using PHP in a WordPress website (using Code Snippets plugin)

I’m working on a WordPress website, using the Astra theme, and I want to add a prefix to a specific CSS class using PHP. The CSS class in question is .woocommerce-variation-price, responsible for displaying the price of product variations on the WooCommerce platform.

I want to dynamically add the prefix "Total Price: " to the value of the .woocommerce-variation-price class so that it appears as "Total Price: $XX.XX" on the front end.

Since I don’t have direct access to the theme’s files, I am using the Code Snippets plugin to add custom PHP code to my WordPress site.

I have tried implementing JavaScript solutions, but they didn’t work in my scenario. Now I am looking for a PHP-based approach using the Code Snippets plugin.

Can someone please guide me on how to achieve this? Specifically, how can I add a prefix to the value of a CSS class using PHP in a WordPress website using the Code Snippets plugin?

Any help or example code would be greatly appreciated.

Here are some images:

I want to change this:

enter image description here

To this

enter image description here

When attempting to add a prefix to the .woocommerce-variation-price CSS class, I tried modifying the functions.php file in my WordPress theme and adding JavaScript code directly. However, these attempts didn’t yield the desired results.

In my modifications, I expected the prefix "Total Price: " to be added to the value of the .woocommerce-variation-price class dynamically. For example, if the original price was "$19.99", I wanted it to be displayed as "Total Price: $19.99" on the front end of my website.

Despite my efforts, the prefix wasn’t added as expected. I’m now seeking guidance on how to accomplish this task using PHP within the WordPress environment, specifically utilizing the Code Snippets plugin. I would greatly appreciate any help or sample code that can help me achieve the desired outcome.

Tags:

2

Answers


  1. 0

    You could use css ::before. Including the following should do the trick, or at least get you on your way:

    <style>
.woocommerce-variation-price::before{
    content: 'Total price';
}
</style>
    Login or Signup to reply.
  2. 0

    You can try the following pure PHP code snippet, that will add your custom text prefix to the product variation price in WooCommerce single variable product pages:

    add_filter( 'woocommerce_available_variation', 'woocommerce_prefixed_get_price_html', 10, 3 );
function woocommerce_prefixed_get_price_html( $variation_data, $product, $variation ) {
    $show_variation_price = apply_filters( 'woocommerce_show_variation_price', $variation->get_price() === '' || $product->get_variation_sale_price( 'min' ) !== $product->get_variation_sale_price( 'max' ) || $product->get_variation_regular_price( 'min' ) !== $product->get_variation_regular_price( 'max' ), $product, $variation );

    if ( $show_variation_price ) {
        $variation_price_prefix       = '<span class="prefix">' . __('Total Price:', 'woocommerce') . '</span> ';
        $variation_data['price_html'] = '<span class="price">' . $variation_price_prefix . $variation->get_price_html() . '</span>';
    }
    return $variation_data;
}

    Code goes in functions.php file of your active child theme (or active theme). Tested and works.

    You will get the following HTML structure:

    <div class="woocommerce-variation-price">
    <span class="price">
        <span class="prefix">Total Price:</span> 
        <span class="woocommerce-Price-amount amount">
            <bdi>
                <span class="woocommerce-Price-currencySymbol">$</span> 1,500.00
            </bdi>
        </span>
    </span>
</div>

    Instead of WooCommerce default one:

    <div class="woocommerce-variation-price">
    <span class="price">
        <span class="woocommerce-Price-amount amount">
            <bdi>
                <span class="woocommerce-Price-currencySymbol">$</span> 1,500.00
            </bdi>
        </span>
    </span>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search