binarycarpenter, Author at WordPress - Web Dev

Finally A Browser Without Cache – Web Developer Dream!

If you are reading this post (not by accident), I can safely assume that you share with me the frustration with browser cache. For normal users, browser cache is great since it speeds up website loading, save bandwidth…

But for web developers, it’s something different:

Well, imagine you have changed some CSS to your button, you reload your browser, nothing changed!

Despite the fact that you have:

Open developer tools, check clear browser cache
Installed the best cache browsing addon/extensions you can find and clicked the clear cache button hundred times
…

Still, your new style doesn’t show.

Browser cache is to blame.

If you feel the pain, read on.

I understand why browser makers implement caching. But, I wondered if there was a browser that doesn’t have cache so I don’t have to spend hours working on my code, wonder why it isn’t working only to realize that there is nothing wrong with my code but browser’s cache?

The browser without cache didn’t exist, until now

I tried to find that browser but it didn’t exists (during my search). So, accidentally, I think of selenium. It’s a browser automation tool that let us do a lot of cool things with browsers. (SEO guys are more familiar with this concept). It turned out, selenium is the solution to my problem.

I ended up creating a small javafx app to let me spawn browsers without cache to load my development websites.

And it worked perfectly.

Let me show you how it works.

How does the browser without cache work

This is the application:

Main interface

Settings interface

As you can see that, on the main interface, you can enter your URL, select the browser you want to spawn and click on start browser. You have two choices of browser, Chrome or Firefox.

On the settings panel, you need to set the path to Chrome driver and Firefox driver. What are they? You can download Chrome driver here:

Download Chrome driver

And Gecko driver (Firefox) here:

Download gecko driver

Make sure you select the right version for your OS.

The favorite URL box is where you can enter list of URLs that you want to appear on the box on the left. Later, you can just double click on those URLs to open the browser.

Where to download the app

You can download the app here:

Download no browser cache app

If you want to develop further, feel free to get the source code here:

https://github.com/datmt/NO-FUCKING-CACHE-BROWSER

Questions and suggestions are welcome.

How To Add Extra Text To WooCommerce Price Field Without Using A Plugin

By default, WooCommerce only shows the price of the product on the product page (a long with the currency symbol). In most case, this info is enough. However, there are cases you want to add some extra details to the price field. For example in the case below, you want to add “per kg” after the price:

If you think that you can enter text into the price field of the product, you will be surprised to find out that is not possible. We can only input number in the price field of the product. This is for a good reason.

So, what can you do?

The easy way to add extra HTML content to WooCommerce price field, without using a plugin

Let me show you how to achieve this. First, you will need to create a child theme. If you don’t know how, read my post on how to create child theme here. It’s short and to the point.

Why do you need a child theme? It’s because we are going to add some custom code and using child theme is the best way to add additional code to your WordPress website.

Now, let’s go to Appearance->Theme Editor and select the functions.php file of your child theme. Make sure it’s the active theme.

Here is the code we are going to add at the end of the file:

add_filter( 'woocommerce_get_price_html', 'binary_carpenter_add_extra_price_content', 10, 2 );
add_filter( 'woocommerce_get_variation_price_html', 'binary_carpenter_add_extra_price_content', 10, 2 );

function binary_carpenter_add_extra_price_content($price, $product)
{
  return ($price) . " per kg";	
}

Or, what is it look like on my site:

And that’s done! That’s how I added the “per kg” text after the price. Make sure you don’t forget the dot (.). Without it, the code will not work.

As you can see, you can add the text before or after the price. It’s all depend on you.

Conclusion

This is a quick method to add additional text to the price field on your WooCommerce product page. This method is suitable for a quick fix or a store that have few products, or that all the products share a common way to calculate the price. The text you add here will appear on EVERY product page so be careful when you use this method.

If you want a per product approach, it’s probably best to use a plugin. If you need for advanced functions that the plugin I mentioned doesn’t cover, please let me know.

Thanks for your interest in the post. Have a good day!

March 19, 2019By binarycarpenter WooCommerce Tutorials woocommerce extra price field text, woocommere extra price fieldLeave a Comment