How to create and edit an email template for WooCommerce Follow Ups

Here is a quick tutorial on how to create and edit an email template for WooCommerce Follow Ups. Newsletter templates use html tables and the oldest CSS lying around so they can be compatible with a maximum amount of email clients.

In order to create or edit a template for Follow Ups, you should start by creating a new template and then copy over the markup of one of the three default ones.

Create a new template

First get the markup:  Continue reading “How to create and edit an email template for WooCommerce Follow Ups”

Mini-Plugin: WooCommerce Cart Set Subtotal to Total

This is a mini plugin that sets the subtotal in your WooCommerce cart always to the value of the total amount. PHP can have trouble with rounding your price amounts, especially when your shop uses lower, odd price values like 1,99 or 2,73. Add tax calculations to this and you might encounter rounding issues in cart and checkout of your WooCommerce shop. This mini plugin masks this behaviour.


[su_button url="" icon="icon: wordpress"]Download WooCommerce Cart Set Subtotal to Total[/su_button]   Tested with: WordPress 4.7 WooCommerce 2.6.13... Read More

Mini plugin: Display Current Server Date and Time

This is a mini plugin that displays the current server date and time on each WooCommerce Single Product page or by shortcode. I use it for troubleshooting timed events linked to WooCommerce orders. Date and time gets displayed:
  • Automatically on each single product page for Administrators only
  • Manually by using the shortcode [wcdct_show_server_time]


Single Product page: Screen Shot  


[su_button url="" icon="icon: wordpress"]Download Display Current Server Date and Time[/su_button]   Tested with: WordPress 4.8.3 WooCommerce 3.2.3... Read More

How to reset WP Offload S3 when your S3 bucket has changed

I am a fan of speed optimisation and also like to tinker with WP Offload S3 by delicious brains. Recently I found myself in the need of reseting the media library uploads. I had cleared my old S3 bucket and created a new one, however WP Offload S3 still insisted on the old bucket. To reset WP Offload S3 and make it forget the old bucket, do the following.
  • Take a full backup of your database
  • Offload S3 media stores the name of the bucket in full in the wp-postmeta table. This value is set for every uploaded media file.
  • Do a search for “full-bucket-name”. It will find the value in the wp-postmeta table and some other places.
  • Drop all the values found in the wp-postmeta table.
  • This does the same as using the “remove from S3” option in the media library.
  • For good measure you can delete all traces you find of the old bucket name in other tables as well. It should do no harm and if it does, you did take that backup, right?
After this your Offload S3 is ready to start fresh and prompts you to upload all your media files.... Read More

How to fix responsive layout issues in WordPress

Responsive layout is an important factor for your website. In order to be able to fix an issue you first must be certain that this is happening to every visitor and not just you. Most people use their own phone for testing which is fine, but if you are collaborating with somebody else to help you fix an issue in your responsive layout you require common testing ground. A browser based testing tool also rules out any local issue on your phone.

Use WordPress customizer or similar browser tool to test

The quickest way to test your responsive layout is provided by the WordPress customizer. Have a look: [WPGP gif_id="848" width="600"] Too small? View full size GIF in new tab I use Responsinator for extended testing.

Apply CSS for mobile views only

Once you have found the right CSS class to target you need to enter your custom CSS in a way that it targets the correct mobile view. Mobile views are triggered by CSS breakpoints and require media queries. You can either enter the correct CSS with a media query manually into a custom CSS field or use a plugin to facilitate this. I like using Responsive CSS Editor. I hope this information helps you to fix your responsive layout issue.... Read More

Code Snippet: Display WooCommerce highest variable product price only

Here is a code snippet that displays the highest price only for WooCommerce variable products instead of the default price range. [snippet slug=display-woocommerce-highest-variable-product-price lang=php] Need more? Try this post by Anna Schneider: Based on this handy snippet by Gerhard. Not sure how to use this? Here is how to use custom code snippets like this.... Read More

Mini plugin: Disable WooCommerce prices and add to cart for visitors

This is a mini plugin that lets you hide WooCommerce prices and the add to cart button for non logged in visitors of your site. Install and activate to hide the elements site-wide.


Shop overview:   Screen Shot Single Product page: Screen Shot  


[su_button url="" icon="icon: wordpress"]Download Disable WooCommerce prices and add to cart for visitors plugin[/su_button]   Tested with: WordPress 4.8.2 WooCommerce 3.2.1... Read More

How to find the right CSS class to edit to apply custom CSS in WordPress

There are many plugins for WordPress that allow you to apply custom CSS. Most theme have their dedicated sections. However how do you know which class you need to modify?

Use Google Chrome development tools to inspect

I use Google Chrome development tools for this. Here is a quick screencast that shows how to find the right class and edit / apply custom CSS: [video width="1066" height="744" mp4=""][/video]

Here is what I do step by step

  1. The tab titles “Description” and “Reviews” are crammed into the left corner. I want them to move more to the right.
  2. 00:02: I toggle Chrome development tools (dev tools) by right-click, inspect. I right-click on the element I want to change. Clicking on the element I want to edit opens the markup and jumps to the vicinity or right on the element I want to edit.
  3. 00:09: After the dev tools open I realise the layout is now responsive. I need it to be in standard desktop layout. I switch the dev tools from dock right to dock to bottom. This gives the layout more room in width and gets rid of the responsive layout.
  4. 00:17: I click on the elements in the markup until my element is fully selected. At first #tab-reviews looks good, but ultimately reviews_tab is more complete in highlighting my element. You often have to correct the element selection after toggling the dev tools via right-click – inspect.
  5. 00:22: The WooCommerce tabs class has a margin defined. Seems right. I deactivate what is already there to see if anything changes. I then add some on my own and watch for changes. It gets crossed out immediately which means it is getting overwritten. No good, moving on.
  6. 00:34: I move up one class and spot the padding. Editing to see if that changes anything and heureka. The rest is simple try and error.
That is it. I hope it helps you to find your own CSS classes to successfully apply your custom CSS. Feel free to comment with any questions you have.... Read More

How to change ‘select options’ ‘add to cart’ button text in WooCommerce

You can use a filter to change the ‘select options’ button text in WooCommerce like so: [snippet slug=change-select-options-add-cart-button-text-woocommerce lang=php] If you are unsure on what to do with this, read this first: How to use custom code snippets. If I find the time I will turn this into a mini plugin for convenient use. Let me know in the comments, if you would have need of this. This code snippet taps into the “Add to Cart” button for WooCommerce core so it can also be used to modify it. For WooCommerce Subscriptions this is not necessary. Simply visit your settings here at /wp-admin/admin.php?page=wc-settings&tab=subscriptions Screen Shot And as always boys and girls, do not forget to backup.... Read More