Category Archives: WordPress

5 Fool Proof Tips for your WooCommerce store’s conversion rate

Read the forums on any ecommerce platform provider (Shopify, BigCommerce, WooCommerce, etc.) and you will find post after post about poor conversion rates. Online entrepreneurs create their ecommerce stores and then are disillusioned and afraid when they realize consistent sales do not magically happen. In the same way brick-and-mortar store sales do not happen without ongoing effort, so too do ecommerce sales take plenty of hard work and creative thinking. Build it and they will come only applies to baseball diamonds; customers will not immediately flood your online store unless you optimize your business in numerous ways. If you are an ecommerce shop owner in search of dependable sales, following are five actions you can take to improve the profitability of your online business.

Image Optimization

A slow-loading ecommerce site can send potential buyers directly to your competitors. One super simple way to improve your load speed is to compress your product images. Use plugins like Imagify or EWWW Image Optimizer to reduce file size of your uploaded images and you will be astonished at how quickly your store loads on both desktop and mobile devices.

Improve your search

Improving the search function of your ecommerce store can have a significant affect on your ecommerce conversions. Too many merchants rely on the search function that comes with their store’s template instead of upgrading to better search tool like Advanced Woo Search or WooCommerce Product Search. Taking the time to improve your site’s search can impact both conversion rates and customer satisfaction rates too.

Social Media Post Keyword Optimization

While many ecommerce merchants understand the importance of optimizing their website content for search engine discovery, far too few are aware of the importance of optimizing their social media posts for search discovery. When you incorporate terms potential customers might use into your social media posts, you increase your product discovery opportunities. Anything from keyword-optimized Twitter posts (Google indexes tweets) to hashtag-optimized Instagram images can increase the number of customers who find your ecommerce store.

Loalty Program

Consider offering a loyalty program to increase your conversion rates. With thousands of global ecommerce stores at their disposal, buyers like to be rewarded for their patronage. Offer a small incentive to encourage customers to purchase from you on a frequent basis and you can see a significant increase in your annual revenues. Reward customers for shopping with you and they are likely to return (and maybe even tell their friends about your shop).

WooCommerce Related Products

In the same way bloggers showcase related posts on their websites, ecommerce merchants can also highlight related items. When a customer adds an item to their shopping cart, spotlight similar items other shoppers have purchased. This is a great way to move some of your slow sellers and increase your average order size at the same time. WooCommerce already has this build in feature called “linked items” right on the product edit page.

 

Small adjustments on an ongoing basis can greatly influence whether your ecommerce store succeeds or slowly dies. It will take consistent effort on your part, but it is possible to take a slow-selling store and turn it into a thriving online business. Just because your sales start off slow, that does not mean you are destined to struggle to increase your revenues. With attention to detail and a willingness to double-down on conversion rate optimization, you too can be the proud owner of a profitable ecommerce store.

 

Set custom image in FB.ui Facebook Share Dialog in v2.10+

Since Facebook Javascript API removed the picture parameter in v2.10 and 2.9 was shut down on July 17 2017 there’s no easy way to share an image with a link back to your page.

Facebook will always use your og:image no matter what you provide in FB.ui parameters.

Share an image with Javascript API 2.10

Here is my workaround:

  • I append the desired image as an URL parameter
  • Then I use filters from WordPress SEO by Yoast to write the Open Graph meta data according to the URL parameter
  • Facebook detect’s each of the URLs as individual page so it has to scrape each one individually

Here is my HTML Code: a wrapper containing the image and a share button:

In my Javascript code I simply get the page url and the image url ans put them together with URL parameter og_img

Facebook gets a separate URL for each of my images now.

The next step ist to customize the Open Graph data according to the URL parameter. I use WP SEO by Yoast but you could also output the OG data manually.

Add this to your functions.php

Note: You should not use a share-counter on this page because when each image has its own URL your base URL share counter wont increase.

 

All In One WordPress E-Mail Templates

The general appearance of WordPress emails is generally left to each plugin. All WordPress core messages like New Account Notification, Password Reset, Comment Moderation are just simple text messages whilst many plugins have their own email templating system.

 

WordPress Plugin E-Mail Templates

Some typical examples of plugins sending emails are contact forms and stores. Some of them have their own email templates sometimes as premium add-ons.

But if you use a contact form AND a store on your site there’s no chance to find one template for both plugins email notifications. To have one single template in your corporate design for all your outgoing mails.

 

wp_mail() and WooCommerce email template files

If you want to solve this issue the hard way there are some points to get started. All WordPress emails are sent with wp_mail() and there’s a filter in this function where you can add your custom code to load a html template.

If you use WooCommerce for example you can override the default email code in your theme, but for this kind of customization you should plan a few days of work. When I did this myself I decided to create a plugin so I don’t have to do this ever again.

So I created the free WP HTML Mail plugin.

Tutorial: Your own WordPress email template in 2 minutes

WP HTML Mail form plugin support

NinjaForms

NinjaForms send quite simple mails, without any template. You can customize the content with placeholders for each form field to create a personalized “Thank you” mail and a more structured admin notification.

WP HTML Mail supports NinjaForms notifications out of the box without any add-ons.

Find out more in this article: Send beautiful WordPress Ninja Forms notifications to your customers

 

 

Contact Form 7

With Contact Form 7 you can also customize your message content and add placeholders for your form submissions. The interface is not so comfortable as the NinjaForms UI but it works.

The free WP HTML Mail plugin also works with CF7 email notifications.

 

Caldera Forms

Caldera Forms also has a nice user interface and some nice features. You can configure individual email notifications for customers admins and whoever you want.

In contrast to the plugins mentioned above Caldera Forms has it’s own email templates for 75 USD. If you use WP HTML Mail it is completely free.

 

WPForms

WPForms and WPForms-Lite has a template system where you can add your own HTML template files. But if you also want them to be responsive and work on your mobile devices it’s getting really tricky.

I created an WP HTML Mail add-on for WPForms and the free version WPForms-Lite. There are no additional setting to configure, just install the add-on and your WPForms mails work with your WP  HTML template.

view WPForms Add-On

WP HTML Mail Shop Support

Easy Digital Downloads

EDD also has its own email templates but they only work for EDD mails and not for any other mails used on your site.

When you used the WP HTML Mail EDD Add-On you can use your general email template for EDD without any more troubles.

view EDD Add-On

 

WooCommerce

WooCommerce has an awful default mail template so I really had to create an add-on for my customer projects.
I heavily extended this add-on during the last two years. Now you can even edit all contents and the products table of your store mail right from the WP HTML Mail WooCommerce Add-On.

view WooCommerce Add-On

 

More supported plugins

If you want to use WP HTML Mail for plugins not listed above please add them to this list or vote them up.

Localize NinjaForms THREE Pikaday Datepicker

Since the release of THREE NinjaForms uses Pikaday as a new datepicker instead of jQueryUI, so I had to update my datepicker localization script.

I had no experience with BackboneJS, MomentJS, Marionette and all these new libraries used in NinjaForms 3 so it took me some time to find out how to customize the frontend.

Triggers: WordPress Hooks for JavaScript

NinjaForms offers some specific triggers so we can hook in our custom code as we would normally do in PHP.

When the datepicker initializes it fires an init  trigger in pikaday  channel. There’s an example in the NinjaForms developer docs.

Translate DatePicker and Date Format

To translate Pickaday as well as the return value we can use built in localization of moment.js:

 

WooCommerce redirect loop when cart and checkout on the same page

I just launched a website with a single page checkout process which works fine if there’s at least one product in the cart.

The problem is if cart an checkout is on the same page and a user tries to access this page without any products in his cart, woocommerce redirects to the cart again and again.

To solve this problem I found this solution:
https://wordpress.org/support/topic/cart-checkout-on-same-page-redirect-loop-problem/

But when an order is finished the cart is empty again so this script redirects again to the home page instead of the order confirmation page.

I improved the script and want to share it with you:

 

Enable Email customization for WooCommerce Shop Managers

WP-HTML-Mail adds a new options-page in your WordPress backend to customize all your email settings and create a nice template.

Options pages only accessible by administrators but you can move these setting to make them available to Shop Managers as well.

Just paste the script below to your themes functions.php to get a new main menu entry “Email template”

 

A quick way to add customers phone number to WooCommerce emails

WooCommerce email notifications contain a single block called “billing data” by default. If you want to add some additional fields e.g. a phone number you can either learn hooks and filters or if you use WP HTML Mail WooCommerce you can follow this easy steps:

Add custom billing fields to WooCommerce in 3 simple steps

1. Change the Template Edit Mode

If you haven’t already done switch your template edit mode to “Customize each email individually”

set-individual-mode

2. Open the your WooCommerce email for editing

Click on the edit icon next to one of your emails to open the MailBuilder

Email_‹_My_Demo_Store_—_WordPress

edit-email-template

3. Replace the Billing Address and Shipping Address

Click the content area containing the billing address and delete the placeholder [BILLING_ADDRESS].

Then add each of the fields you want to show individually from the placeholders menu.

add-phone-number

A simple way to add related products to your WooCommerce customer emails

Cross selling is an important feature in every professional WooCommerce store. Just add some related products to your items to increase your sales.

With WP HTML Mail WooCommerce 2.0 I added the MailBuilder feature to  customize the content of all store emails.

Each notification message consists of multiple content elements now. One of these new content element is the “Related Products” element.add-content

There’s a button at the end of the MailBuilder to add new blocks of content.

  • Click this button
  • Choose “Related Products
  • Select a data source for the related products (either cross selling products from product setting or just newest item or a few random products)
  • and customize the columns as you already did with your products table.

related-products

Disable WP-HTML-Mail template for specific emails

WP HTML Mail is a free WordPress plugin to customize all your outgoing emails. In most cases the plugin just wraps a container around existing emails and applies some nice styling.

For some plugins like WooCommerce and Easy Digital Downloads it offers advanced styling features.

But many other plugins already use their own template system. WP HTML Mail can’t detect these other templates, but it has a filter to manually disable the template for some emails.

Just add one of the functions below to your themes functions.php

Disable Email Template by subject keyword

Disable Template if message contains a specific string

You can change the functions to use receiver, attachment or anything else to detect your email.

How to translate NinjaForms labels

NinjaForms is already translated to several languages, but as soon as you save the message labels your entries are saved as static text.

NinjaForms-Labels

WPML String Translation

I tried to translate the labels with WPMLs string translation feature. WPML finds the labels, allows translation, but doesn’t display the changes in frontend.

I had a look at the NinjaForms source code and found a general flexible solution.

NinjaForms Filters

NinjaForms uses filters for each of the labels so we can override every field value in our code and of course allow the values to be translated.

To even simplify this step I don’t use own translations but the contained translations from NinjaForms.  For future projects I’ll just copy these lines to the functions file and my labels are already translated to all available languages.