Show price next to the variations in WooCommerce 6.7 - Formatting Price

Question

I wanted to show the price next to all the variations in WooCommerce and this code from another Stackoverflow thread helped me (Thanks to @Rune Kristoffersen).

However, I now want to customize the price formatting. Basically the " - ( ৳ XX )" portion. I'm not seeing any extra class of id to customize that, since the code doesn't add any extra wrapper. And I'm not very good at customizing these loops with extra attributes.

Screenshot: https://saifulislam.info/drive/screenshots/Screenshot%202022-07-24%20105208.JPG

If anybody can guide me on how to achieve this, I'll be really grateful.

Here is the code:

// Add the prices next to the variations in WooCommerce 

add_filter( 'woocommerce_variation_option_name', 'display_price_in_variation_option_names' );
function display_price_in_variation_option_names( $term_name ) {
   global $wpdb, $product;

   if ( is_product() && $product instanceof WC_Product && $product->is_type( 'variable' ) ) {

      foreach ( $product->get_available_variations() as $variation ) {

         foreach ( $variation['attributes'] as $variation_attribute_name => $variation_attribute_value ) {
            $result = $wpdb->get_col( "SELECT slug FROM {$wpdb->prefix}terms WHERE slug = '$variation_attribute_value'" );
            $taxonomy = str_replace( 'attribute_', '', $variation_attribute_name );
            $term = get_term_by( 'slug', $variation_attribute_value, $taxonomy );

            if ( $term_name == $variation_attribute_value ) {
               $product_price = wc_price( $variation['display_price'] );
               $product_price = strip_tags( $product_price );

               return $term_name . ' - (' . $product_price . ')';

            } else if( is_object($term) && $term->name == $term_name ) {
               $product_price = wc_price( $variation['display_price'] );
               $product_price = strip_tags( $product_price );

               return $term_name . ' - (' . $product_price . ')';
            }
         }
      }
   }

   return $term_name; 
}

Thank you.

Does this answer your question? [Overriding properly WooCommerce function WC\_Price() in a clean way](https://stackoverflow.com/questions/45108717/overriding-properly-woocommerce-function-wc-price-in-a-clean-way) — Luuk, Jul 24 '22 at 07:13

score 1 · Answer 1 · answered Jul 27 '22 at 07:11

I was able to find a solution to this. You can add this script to find and replace the variation price with a tag along with a class for you to customize.

// Adds customization support on the variable price

add_action( "wp_head", "function_to_woo_script" );

function function_to_woo_script () {
    ?>
    <script>
jQuery(function($){
    jQuery('.variable-items-wrapper li .variable-item-contents .variable-item-span').html(function (i, html) {
        return html.replace(/\|(.*$)/, ' <span class="variationspricebysaif">$1</span>')
    })
})
    </script>
    <?php 
}

Here is the full revised code: ( Just changed " - ( " and " ) " with " | " and "" in the returned term name )

// Add the prices next to the variations in WooCommerce 

add_filter( 'woocommerce_variation_option_name', 'display_price_in_variation_option_names' ); 

function display_price_in_variation_option_names( $term_name ) {

global $wpdb, $product;

if ( is_product() && $product instanceof WC_Product && $product->is_type( 'variable' ) ) {

        foreach ( $product->get_available_variations() as $variation ) {
            foreach ( $variation['attributes'] as $variation_attribute_name => $variation_attribute_value ) {
                $result = $wpdb->get_col( "SELECT slug FROM {$wpdb->prefix}terms WHERE slug = '$variation_attribute_value'" );
                $taxonomy = str_replace( 'attribute_', '', $variation_attribute_name );
                $term     = get_term_by( 'slug', $variation_attribute_value, $taxonomy );
                if ( $term_name == $variation_attribute_value ) {
                $product_price = wc_price( $variation['display_price'] );
                $product_price = strip_tags( $product_price );
                return $term_name . ' | ' . $product_price . '';
                } else if( is_object($term) && $term->name == $term_name ) {
                $product_price = wc_price( $variation['display_price'] );
                $product_price = strip_tags( $product_price );
                return $term_name . ' | ' . $product_price . '';
                }
            }

        }

    }
return $term_name; 
}

// Adds customization support on the variable price

add_action( "wp_head", "function_to_woo_script" );

function function_to_woo_script () {
    ?>
    <script>
jQuery(function($){
    jQuery('.variable-items-wrapper li .variable-item-contents .variable-item-span').html(function (i, html) {
        return html.replace(/\|(.*$)/, ' <span class="variationspricebysaif">$1</span>')
    })
})
    </script>
    <?php 
}

Thank you.

Show price next to the variations in WooCommerce 6.7 - Formatting Price

1 Answers1