WooCommerce Update Checklist

WooCommerce is a powerful but complex system, and larger installations often have some additional plugins or custmisations.

After updating the WooCommerce plugin, or any other related plugins, it’s important to test your store to ensure everything works as expected and any bugs are identified and fixed.

Here’s a handy list to help get your store back online quickly and without issues.

Post Update Checklist

After updating WooCommerce run through these tasks

  1. Add a product to the cart, but add more than 1 of the item – sometimes the data structure changes and it’s important to ensure multiple products can be added at once.
  2. Complete a checkout – ensure everything works as expected and all of the emails are received.
    Tip: Pay by Cheque or Enable Cash on Delivery to avoid having to make an actual payment.

How to Disable WordPress PHP Error Messages

Sometimes even with the WP_DEBUG setting set to false you will see PHP error messages. This is normally because of the PHP setup configuration on the server.

If you are seeing warnings that are causing issues with your theme add the code below to your wp-config.php file and all errors will be hidden.

ini_set('display_errors', 'Off');
ini_set('error_reporting', E_ALL );
define('WP_DEBUG', false);
define('WP_DEBUG_DISPLAY', false);

How to change menu items to sentence case in WordPress

// Update menu items to sentence case
add_action('wp_loaded', 'fl_update_menu_items_case');
function fl_update_menu_items_case() {

  // Get all of the menu item posts
	$all_posts = get_posts([
		'posts_per_page' => -1,
		'post_type' => 'nav_menu_item',
	]);

  // Loop each one setting the title case
	foreach ( $all_posts as $single ) {
		wp_update_post([
			'ID' => $single->ID,
			'post_title' => ucfirst( strtolower( $single->post_title ) ),
    ]);
	}

}

Add Cache Version Number to editor-style.css

You can add a custom style sheet to format the WordPress editor using add_editor_style.

A frustrating problem with this technique is that browsers will typically cache this css file pretty hard, and so it’s tricky to see that changes you made appear in the editor.

This is how you would typically add a custom style sheet.

add_editor_style('editor-style.css');

Add the code below to you theme’s functions.php file and the editor-style.css will be given a version number that changes each time the file is saved, and avoiding any caching issues.

// Change cache suffix on editor-style.css
function my_tiny_mce_before_init( $mce_init ) {

  // Get the timestamp of the file  
  $time = filemtime(get_template_directory().'/editor-style.css');

  // Add the timestamp  
  $mce_init['cache_suffix'] = 'v='.$time;

  return $mce_init;
}
add_filter( 'tiny_mce_before_init', 'my_tiny_mce_before_init' );

Change Default Image Size on Visual Composer Single Image

The Visual Composer Single Image component defaults the Image Size to ‘thumbnail’. This really isn’t very useful, especially if your clients are using Visual Composer to build pages.

An Image Size of ‘large’, ‘medium’, or even a custom image size, is much more useful. If you’ve set ‘large’ to be the same width as your main content area, the image will fit perfectly, and will also be great in smaller responsive areas.

Here’s the code to re-map the Image Size default to ‘large’

// Re-map VC Single Image parameters

add_action('init', function(){

  // Get VC Single Image shortcode config
  $single_img = WPBMap::getShortCode('vc_single_image'); 
  
  // Loop over config to find the param we want to change
  foreach($single_img['params'] as $key => $param) {
    
    // This is our param
    if($param['param_name'] === 'img_size')
    {
      // Add standard value for image size
      $single_img['params'][$key]['value'] = 'large';  
    } 
     
    // VC doesn't like the thought of you changing the shortcode base, and errors out, so we unset it.
    unset($single_img['base']); 
     
    // Update the parameter
    vc_map_update('vc_single_image', $single_img);

  }
}, 100);

Set src using just CSS

Sometimes we need to change the src of an <img> element, but we don’t have access to the HTML, like when styling a plugin.

But, CSS is our friend here, and we can use the url pseudo element to set the <img> src.

<style>
.my-class {
content:url("https://imgur.com/SZ8Cm.jpg");
}
</style>
<img class="my-class">

Check out this JSFiddle. Should work in IE9 and all new browsers.

Show PHP error or debug log in VS Code terminal window

Monitoring your PHP error log is a great way of tracking any errors or debug information when working on your site.

Showing the log file in the VS Code terminal window is a great way of keeping an eye on any log entries as they appear.

The tail command can be used to show the latest log entries.

In the example below I am showing the php_error.log file from MAMP, showing the last 100 entries, and any future entries (-f).

tail -f -n100 /Applications/MAMP/logs/php_error.log