I still haven’t been able to figure this out. Does anyone here know how to style prices?
I am not a PHP expert nor a coder myself,
but I can say that the code snippet you provide is correct
and it works with a little modification,
which depends on where you “put” it …
For a test, I made it to work on the Single Product Details page,
to differ the PRICE value into 2 parts.
In order to achieve this,
I modify the file:
…/woocommerce/templates/single-product/price.php
I add the first part into the top/php area as:
global $product;
$parts = explode('.', $product->get_price());
and then changed the lines in the HTML output/creation area as:
<p class="price"><?php echo "$parts[0].<sub>$parts[1]</sub>";?></p>
That makes the PRICE value output as 2 parts, the cents displaying in sub style, etc.
As far as I can understand, it depends on getting that “price” value into the code and later output that into usage…
For a site-wide general usage, maybe you have to put those in the functions.php or inside a child themes’ docs etc…
Hi ManusH,
Thanks for your help! I’ve got it working. It’s a bit of a hack, but I now have different classes for both the individual product and catalog pages so I can style the prices to my content.
Here’s the code for single products, on the THEME/single-product/price.php page:
global $product;
$parts = explode('.', $product->get_price());
if ( $product->is_on_sale() ) { ?>
<p class="single_regular_price"><?php echo $product->get_regular_price(); ?></p>
<p class="single_current_price"><?php echo "$parts[0].<sup>$parts[1]</sup>";?></p></p>
<?php } else { ?>
<p class="single_current_price"><?php echo "$parts[0].<sup>$parts[1]</sup>";?></p></p>
<?php } ?>
<meta itemprop="price" content="<?php echo $product->get_price(); ?>" />
<meta itemprop="priceCurrency" content="<?php echo get_woocommerce_currency(); ?>" />
<link itemprop="availability" href="http://schema.org/<?php echo $product->is_in_stock() ? 'InStock' : 'OutOfStock'; ?>" />
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
</div>
And for the catalog page, I created this function for the functions.php page:
function price_text($price, $product) {
$parts = explode('.', $product->get_price());
if ( $product->is_on_sale() ) { ?>
<p class="cat_regular_price"><?php echo $product->get_regular_price(); ?></p>
<p class="cat_current_price"><?php echo "$parts[0]<sup>.$parts[1]</sup>";?></p></p>
<?php } else { ?>
<p class="cat_current_price"><?php echo "$parts[0]<sup>.$parts[1]</sup>";?></p></p>
<?php }
}
add_filter('woocommerce_get_price_html','price_text', 100, 2);
It works great. Bear in mind I haven’t tested this with variable products, as I don’t have any at this point.
The only problem is with the superscripting of the price on the catalog page. A price of $9.50 displays as $9.5. It displays correctly on the individual product page, and both functions use the same code. Any idea why the explode function isn’t displaying two decimal places on the catalog page?
Thanks!!
Hi, I have a similar request. I want to make the ® character superscript across my entire Woocommerce site.
Someone on another forum suggested this code:
var replaced = $(‘body’).html().replace(‘®’, ‘<sup>®</sup>’);
$(‘body’).html(replaced);
But I don’t know what file it should be added to? I’m using a child theme if that makes any difference.
That’s jquery. The best way to handle that is to save it in a .js file and enque the script in your functions file.
Otherwise you can try placing that code between <script> tags in your header file. I would also first put that code between:
jQuery(document).ready(function($) {
//do jQuery stuff when DOM is ready
});
To avoid conflicts.
Hi,
I pasted the code into the header.php file and it worked, but caused a conflict with something else so I had to remove it:
[ Moderator note: code fixed. Please wrap code in the backtick character or use the code button. ]
<script>
jQuery(document).ready(function($) {
//do jQuery stuff when DOM is ready
$("body").html(
$("body").html().replace(/®/gi, '<sup>®</sup>').replace(/®/gi, '<sup>®</sup>')
);
});
</script>
I’ve tried putting it into the child theme functions file but I can’t get it to work.
This is the script I put in at the end of the child theme functions.php file:
<?php
function wpb_adding_scripts() {
wp_register_script('specialcharacter_script',
get_template_directory_uri() . '/js/specialcharacter.js',
array('jquery'),'1.1', true);
wp_enqueue_script('specialcharacter_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>
And this is the code inside the specialcharacter.js file:
jQuery(document).ready(function($) {
//do jQuery stuff when DOM is ready
$("body").html(
$("body").html().replace(/®/gi, '<sup>®</sup>').replace(/®/gi, '<sup>®</sup>')
);
});
I tried changing ‘get_template_directory_uri()’ to ‘get_stylesheet_directory_uri()’ but that gave me a white screen.
The specialcharacter.js file is in a folder called ‘js’ which is a sub directory of the child theme folder, so I believe I’ve got the path right, but just can’t get it to work!
