Price Calculator for WooCommerce

Hi,

To achieve the styling changes you described for the Price Calculator in WooCommerce, you can use custom CSS and potentially some JavaScript or jQuery depending on the structure of the HTML. Here’s how you can make these changes:

1. Lowercase ‘Yard’ and Remove Extra Space: To lowercase ‘Yard’ and remove the extra space between ‘Yard’ and the parenthesis, you can use CSS to target the specific element that contains this text. The exact CSS selector might vary depending on your website’s structure, but it could look something like this:

   /* Lowercase 'Yard' and remove extra space */
   .your-element-class {
       font-size: inherit; /* Reset font size to inherit from the parent */
       text-transform: lowercase; /* Transform text to lowercase */
       margin-right: 0; /* Remove extra space on the right */
   }

Replace .your-element-class with the appropriate CSS class or selector for the element containing ‘Yard’.

2. Lowercase ‘Price’ without Changing ‘Total’: If you need to lowercase ‘Price’ without changing ‘Total’, you can use JavaScript/jQuery. You’ll first need to identify the specific element containing the text ‘Price’. Here’s an example of how to do this with jQuery:

   jQuery(document).ready(function($) {
       // Find the element containing 'Price' and lowercase it
       $('.your-price-element-class').text(function(index, text) {
           return text.replace('Price', 'price');
       });
   });

Replace .your-price-element-class with the appropriate CSS class or selector for the element containing ‘Price’.

Make sure to include this JavaScript/jQuery code in your theme or child theme’s JavaScript file or within a custom JavaScript file if your theme allows it.

Remember to clear any caching if you’re using a caching plugin to see the changes immediately. Additionally, ensure that you use the correct CSS classes or selectors to target the specific elements you want to modify.

Thanks @owadud655! The js worked great ?? I couldn’t get the css to work, but tried it with js and it did the trick! I appreciate your help.

Hi @nixonnotes

You’re welcome! I’m glad to hear that the JavaScript worked well for you and helped solve the issue.

Have a great day!

@nixonnotes

I’m going to mark this thread as resolved, but please don’t hesitate to start a new topic if you have any more questions down the line.

Have a fantastic day!