Find woocommerce and wordpress hook




Function reference:

Woocommerce hooks:

Visual guide:

Securing wp-config.php

There is a clear case for moving the file out of the public directory: see the following stackexchange thread

Just move wp-config.php one level up outside the public directory and wordpress will be able to look for it on its own automatically and you’re all set.

If you have installed several wordpress site in different subdomain, the option might not work for you. In that case, follow the instruction below taken directly from the aforementionned stackexchange thread:

How to move wp-config.php to any location on your server

WordPress will automatically look one directory above your WordPress installation for your wp-config.php file, so if that’s where you’ve moved it, you’re done!

But what if you’ve moved it somewhere else? Easy. Create a new wp-config.php in the WordPress directory with the following code:


/** Absolute path to the WordPress directory. */
if ( !defined('ABSPATH') )
    define('ABSPATH', dirname(__FILE__) . '/');

/** Location of your WordPress configuration. */
require_once(ABSPATH . '../phpdocs/wp-config.php');

(Be sure to change the above path to the actual path of your relocated wp-config.php file.)

If you run into a problem with open_basedir, just add the new path to the open_basedir directive in your PHP configuration:

open_basedir = "/var/www/vhosts/;/var/www/vhosts/;/tmp/"

That’s it!

How to set wordpress admin in a different language than the front end language

It may happen that you work with a woocommerce site that is set in a different language than your native tongue which can make navigating the wordpress admin panel very confusing depending on your level of command of the said language.

Solution: Fortunately enough the solution is realyy simple. 

Go to users

click on your user name.

under language, select the language that fit your need

Save and you’re done! WordPress is now the desired language only for you. All other user see the language as set as in Settings -> General -> Site language

Use JCH optimize with woocommerce


JCH optimize might cause issue with the checkout page with certain payment plugin. A loading circle appear and don’t seem to go away anytime soon.


To sort that out simply exclude some files related to the checkout page from optimization in jch optimization dashboard. I have excluded …/assets/css/frontend.css from Exclude these CSS files and our payment plugin css: 
checkout-maksukavat.css in  Exclude CSS files from these plugins

Resizing social media picture : Form factor

Just a quick bookmark here: we probably all look here and there for the correct form factor for our facebook cover picture or profile pic, and then again for every over social media platform. Well, of course, someone has develop a tool to help us with that so here you go:

I have not checked that the form factor currently used on the site are up to date with the latest standard for each platform.


Text lisibility: color contrast

Here are some references I gathered during my search.

I got to go through them but they shall be useful for anyone paying attention to text/background contrast for legibility: 

Contrast text background lisibility tester:

Another tool:

Does noreferrer tags pass page rank

Actually it does pass link juice according tho this article in forbes:

The good news is that the noreferrer tag has zero impact on SEO. Simply put, it operates on the analytics/browser level, not the search engine level. 

Indeed we can read in w3 consortium website:

 noreferrer: Requires that the browser should not send an HTTP referer header if the user follows the hyperlink


Where as nofollow is clearly a link to an unendorsed document. A typical exemple is an advertisement link.

Batch convert images in webp

In case your server doesn’t allow Webp Express to auto generate webp images, or for any other reason, you might want to bulk convert images in webp.

On windows the best solution I found was to use

I needed to add some batch scripting to allow for bulk conversion 

I tested this code with the inconvenience that the file name retains .jpg and get appended with the webp extension, which is not suitable for my case use. I corrected that with a python script that I had ready at hand for batch renaming files. Here is the batch script:

cd C:\Users\Admin\Documents\webptest\2018\09
dir /B /A-D > list.txt
FOR /F “tokens=* delims=” %%x in (list.txt) DO magick convert %%x %%x.webp

While looking for a solution to remove the file extension, I found this nice code from stackoverflow that I modified to suit my needs:

@echo off
for /R “C:\Users\Admin\Documents\webptest\2018\10” %%f in (*.jpg) do (
magick convert %%f %%~nf.webp

Tested and working. The file are saved in the directory containing the batch script.

Serve webp and JPEG 2000 in wordpress

Last time we saw different methods to serve webp or JPEG 2000 pictures to our users. Now let’s see how we can implement this in wordpress

We might work something out thanks to our previous work on changing the wrapping of thumbnails:

We shall also do the same operation on any other images be it post, product pages, background images, header images etc…

But let’s start with the thumbnails: the following code assume that our webp version of the images are in the same folder and have the same name than the jpg version, beside the extension.

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);

if ( ! function_exists( 'woocommerce_template_loop_product_thumbnail' ) ) {
function woocommerce_template_loop_product_thumbnail() {
echo woocommerce_get_product_thumbnail();
if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) { 
function woocommerce_get_product_thumbnail( $size = 'shop_catalog', $placeholder_width = 0, $placeholder_height = 0 ) {
global $post, $woocommerce;
$output = '</div class="imagewrapper"></picture>'; if ( has_post_thumbnail() ) { 
$image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), $size);
$image_url =$image_url[0];
$webp_url= str_replace('jpg', 'webp', $image_url);
$output .= '<source srcset="'.$webp_url.'">';
$output .='<img class="lozad" data-src="'.$image_url.'" alt="">';
$output .= '</picture ></div>';
return $output;

With further research and the sudden realization that there might be a plugin already doing this (although, where is the fun in that?) I found the following plugins:

Webp express which is a free plugin

and Optimus which comes with a fee as far as webp conversion and serving is concerned.

While testing Webp express, it occurs that my virtual hosting does not allow for automatic conversion*. So I have written an article on how to batch convert pictures into webp

The author of Webp Express also made a php script to serve webp to supporting browser with .htaccess redirect which is a pretty elegant solution. Check the github page of the project

*My web host implemented imagick on the server after I inquired about it :) . No need to batch convert but it seems Imagick does not handle files containing a space in their name.

Next-gen image format browser support

Google page speed insights encourage you to use next-gen image formats.

One question that should arise immediately is the one of compatibility. Google has already tried to push its highly efficient image format webp since launch in 2010 the 30th of September,   but without compatibility by competiting browsers such as safari, firefox or internet explorer and edge,  webmaster did not adopt it as it required browser detection to serve the proper image format to the corresponding browser or load a javascript file to insure compatibility.

Nowadays it is not one but three so-called “next-gen” format that are available on the market, each compatible with a single major browser. Although things are about to change for webp.

JPEG 2000: Safari and Safari Mobile, Chrome Mobile, Facebook on IOS, Google search app. about 14% market share all device included.

JPEG XR: internet explorer and edge

WebP: Chrome, Edge and Firefox 65 in 2019.  with

61.51% and soon 66% with Firefox compatibility.

As we can see the compatibility range for webp has increased although Apple format JPEG 2000 is perfectly at ease in mobile environment but represent only 14% market share globally.



Now that we have some information on the different picture formats market share, we need a  way to share the right image to the correct browser. You can achieve this by using srcset

Use srcset to select each file type. Srcset is an image property that lets you toggle between images based on various criteria, such as high-resolution displays which are typically only seen on newer laptops and mobile phones.”

We could ponder on the inability of the industry to make changes and agree on the adoption of a new single format required by the exponential rise of data transiting in our network and the corresponding needs of space in servers for caching and indexing those data, but I’d like to reflect on the opportunity to adopt not one but two or three of those format.

The strategy would be to take the advantage of lazy load to take the time to get the device browser and fetch the proper image version only when required, those keeping the page load time low.

To get the screen resolution with javascript:

window.screen.width *window.devicePixelRatio  window.screen.height * window.devicePixelRatio


Knowing the screen resolution, we can then serve the best suited pictures.

Actually a better way to serve different picture depending on screen resolution would be to use srcset introduce with hml5:

<img alt="my awesome image"
  srcset="banner-HD.jpeg 2x, banner-phone.jpeg 640w, banner-phone-HD.jpeg 640w 2x">

“The above would serve banner-phone.jpeg to devices with viewport width under 640px, banner-phone-HD.jpeg to small screen high DPI devices, banner-HD.jpeg to high DPI devices with screens greater than 640px, and banner.jpeg to everything else.”


The syntax I currently used is the following:

  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">

The advantage here is to be able to use the media attribute and instead of the width use the screen resolution in dpi:

resolution Specifies the pixel density (dpi or dpcm) of the target display/paper.
“min-” and “max-” prefixes can be used.
Example: media=”print and (resolution:300dpi)”

And the good news is that it works with amp-img elements too:

<amp-img alt="Hummingbird"
  srcset="images/hummingbird-wide.jpg 640w,
            images/hummingbird-narrow.jpg 320w">


last but not least it seems to work out of the box for webp with src picture as fallback:

<source srcset="img/awesomeWebPImage.webp" type="image/webp"> 
<source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> 
<img src="img/creakyOldJPEG.jpg" alt="Alt Text!"> 

according to:

why it works :

HTML5 <picture> element

HTML5 supports a <picture> element, which allows you to list multiple, alternative image targets in priority order, such that a client will request the first candidate image that it can display properly. See this discussion on HTML5 Rocks. The <picture> element is supported by more browsers all the time.


For high dpi screens, you will get the best results by serving pictures that are twice their size on screen and heavily compressed with image quality down to 20. The picture will look crispier on high dpi display than the uncompressed picture served full-size. The loss of quality on standard display will be minimal so you can even go with generalizing the process for all platform. The advantage on top of the crispiness on high-dpi is that the picture is actually lighter than the original.

But even more important in our case, we want to know what image format the browser supports.

As I plan to use implement amp, I looked at info about device detection and amp, and this stackoverflow pop-up and was quite satisfying:

Here is an async example code for webp:

async function supportsWebp() {
  if (!self.createImageBitmap) return false;
  const webpData = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
  const blob = await fetch(webpData).then(r => r.blob());
  return createImageBitmap(blob).then(() => true, () => false);

(async () => {
  if(await supportsWebp()) {
    console.log('does support');
  else {
    console.log('does not support');


a similar example is given in the google webp source given above.

Last thing to see will be the use of CSS sprite and we will have a complete overview on the question.