Utilize CSS exclusively for formatting decimal points in WooCommerce

I am in search of a function that can assign unique CSS classes to the decimal positions in my Woocommerce prices. This will enable me to style the decimals differently from the rest of the price values. My website is multilingual and supports multiple currencies.

I came across a code snippet that achieves what I need, however, it was specifically designed to replace the currency symbol with the Brazilian symbol. Unfortunately, since I lack coding skills, I struggled to modify the code to suit my requirements.

Thank you in advance for any help.

csswoocommercestyleswpml

Answer №1

Include a <span> tag with a specific class for the decimals:

HTML :

<div name="price">
    &#36; 99.<span class="decimals">99<span>
</div>

CSS :

.decimals {
    /* Customize the style of the decimals here */
}

Answer №2

To customize the price format in WooCommerce, use the formatted_woocommerce_price filter as shown below. Modify the code snippet by replacing sub with any HTML element and your desired class.

add_filter( 'formatted_woocommerce_price', 'style_decimal_price', 10, 5 );
function style_decimal_price( $formatted_price, $price, $decimal_places, $decimal_separator, $thousand_separator ) {

    $unit    = number_format( intval( $price ), 0, $decimal_separator, $thousand_separator );
    $decimal = sprintf( '%02d', ( $price - intval( $price ) ) * 100 );

    return $unit . '<sub class="custom-decimal">' . $decimal_separator. $decimal . '</sub>';
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Center the cropped image within a div container

Is there a way to set a maximum height for a div containing an image and hide the parts of the image that exceed this height, while keeping it centered vertically inside the div? For example, if the browser width is 1200px and the image aspect ratio is 4:3 ...

cssimagehtmlcentercrop

Expand the image size when hovering using CSS

I want to make a simple image link button that enlarges when I hover over it. The code below accomplishes this, but I also want to move the paragraph when the image gets larger. Any suggestions on how I can select and move the paragraph when I hover over ...

htmlcss

Having trouble with Google font displaying on React site but not on mobile devices?

After importing a Google font that appears perfectly on desktop and cross-browser, an issue arises on mobile where default fonts are shown instead. Below is a snippet from my App.css file: @import url("https://fonts.googleapis.com/css2?family=Turret+Ro ...

javascripthtmlcssreactjs

Utilizing Jquery for draggable/droppable functionality in combination with custom overflow styles

Encountering a challenge with a drag and drop system that utilizes CSS overflow properties to enable vertical scrolling of a list of values. The issue arises when dragging an item between selected and unselected areas, causing the dragged item to disappear ...

jquerycssjquery-uidrag-and-drop

How do I eliminate excess space following the resizing of the Material UI Drawer component?

I adjusted the size of my MUI drawer to a specific width and now I am facing an issue where there is extra space left after resizing. This results in a margin-like space between the drawer and the Lorem Ipsum text content. My goal is to eliminate this rema ...

cssreactjsmaterial-uinavigation-drawerwhitespace

Experience mind-bending timing functions in CSS animations with IE11

Despite working perfectly on Firefox, Chrome, and Edge, the animations on my website seem to have erratic timing on IE11. To see the animation as intended: However, on IE11, the animation behaves differently: I've attempted adjusting the animation- ...

htmlcssinternet-explorer-11ie11-developer-tools

After selecting a subitem, the side menu will automatically close

I designed a side menu that expands to reveal submenus. However, when I click on a subitem within a submenu, the entire list closes. The HTML, CSS, and JavaScript code all appear to be correct as the template is functioning properly. But as soon as I ins ...

javascripthtmljquerycssmenu

CSS: targeting the final item within a two-level menubar structure

I am facing a challenge with my multi-level menu, where the menu line consists of items separated by '|' and some items have dropdown lists. The issue is with the CSS pseudo-class last-child capturing the wrong item, and I need it to target a spe ...

htmlcssdrop-down-menucss-selectors

Turn off base64 encoding for background URLs in the Minify package

When I use the minify tool to compress my js and css files, I noticed that the files containing background:url(...) statements actually increased in size. This happened because the urls were encoded to base64. I tried to disable this base64 encoding featu ...

cssnpmbase64node-modulesminify

When rotating, the SVG ellipses move towards the upper left corner

Why does my animated lp end up in the top left corner instead of centering? I've tried using transform-origin: center; but it's not working. Any help would be greatly appreciated. Thank you in advance. #Component_6_2{ -webkit-transform-orig ...

htmlcssanimationsvgtransform

Flipping and expanding cards with CSS3

I am attempting to create a layout with a collection of cards/divs within a container. When a card/div is clicked, it should flip horizontally and expand to occupy the entire space within the container (essentially resizing to 100% x 100% when clicked). I ...

javascriptjqueryhtmlcss

Purge the cache of CSS and JavaScript in your browser

Is there a way to clear JavaScript and CSS cache in ASP MVC without having to clear browser history? ...

javascriptcssasp.net-mvc

Stop child elements from spilling out of the parent container without using fixed height measurements

I am in the process of creating an angular component with a header, buttons, a table, more buttons, and a footer. However, I am facing some challenges with the layout. <my-component> <div>Header Section</div> <some-stuff class=&quo ...

htmlcssreactjsangularsass

Bootstrap glyphicon not in sync with input field alignment

Having an issue with aligning the upper border of a search input field when using Angular with Bootstrap and adding a glyphicon next to it. div.input-group(ng-show='feeds.length > 0') span.input-group-addon.glyphicon.glyphicon-search in ...

cssangularjstwitter-bootstrap-3pug

Two interdependent select fields

I am currently working on creating two select fields where, upon selecting an option in the first field, some options in the second field should be hidden. I have almost achieved this, but my script is unable to locate certain options in the first select f ...

javascriptjqueryhtmlcssselect

Retrieve an image using screen resolution parameters [using only HTML]

During a recent interview, the interviewer posed an interesting question regarding 2 images: There is one large resolution image that needs to be displayed on laptops and desktops. There is also a small image that should only be shown on mobile devices. ...

javascripthtmlcss

What is causing the HTML sub menu to appear in the incorrect position?

I'm working on an HTML and CSS menu. I'm trying to center the sub-menu relative to the main menu (ul.menu). Why is there extra space appearing on the left side? The styling for ul.menu li:hover ul already sets left: 0, and its closest parent i ...

htmlcssmenu

Addressing three visual problems with an html form input, dropdown menu, and clickable button

Currently, the output of my code looks like this: https://i.stack.imgur.com/pl5CJ.jpg The first box (squared) represents an <input>, while the second box (rectangled) is a <select>. There are several issues that I am facing: The text entered ...

javascripthtmlcssvue.js

What could be causing my CSS background image to not display properly?

For some reason, I can't figure out why it's just displaying a blank screen. This is what I'm seeing: https://i.sstatic.net/0gDIK.png Here is the structure of my files: https://i.sstatic.net/GDToF.png The CSS code looks like this: *{ ...

htmlcss

Is it possible to dynamically change the color of text based on its position using CSS, JS, or JQuery?

I am currently working on a corporate website and have been tasked with creating a unique design for a specific page. The design includes the following elements: A body background gradient that transitions from their primary color to white in a top-to-bot ...

javascriptjqueryhtmlcss