I previously commented that WordPress is the Visual Basic of Web Portals because it is simple, doesn’t do too much out of the box, but has a giant market for extensions known as plugins (functionality) and themes (designs).
- Some of these extensions are brilliant, even in their free editions.
- Many paid versions are also excellent value for money – but buying all of them could be relatively expensive compared to packaged solutions such as Shopify.
- Many/most extensions are also deficient in code quality (though in some cases still ‘fit for purpose’). For this reason open-source is essential: reviewable code and an open issues list/support forum is very helpful in product evaluation. If a component is paid only and the code and support boards are not open, purchasing the component is a bet against long odds.
- Many extensions including WooCommerce core regularly release breaking updates.
- Many plugins include unnecessary visual design elements
- Many themes include functionality customisations which will result in software incompatibility issues
- The sheer number of plugins means that each piece of functionality is a mini product-selection exercise: it’s still quicker and cheaper than writing it all inhouse but some effort and some integration will be required. It’s not necessarily cheaper than purchasing a more complete ready-integrated solution but it is more flexible.
This article considers the setup for inkston.com to create a performant and functionally rich site with top SEO rankings, integrating store, forums and directory in a multi-lingual multi-currency setup with a strong bias towards free open-source code.
WooCommerce is a great basic tool, but as per WordPress itself, there’s a lot that it doesn’t do and a lot of extensions available. Out of the box it works for a simple installation with single language, single currency and single inventory pool, and a limited range for product types and product linking options.
Multi-language and multi-currency
The two biggest enhancements in inkston.com scenario were:
- Multi-language: WordPress doesn’t natively support multilingual content and therefore WooCommerce and most of the extensions to WooCommerce also do not.
- Polylang which provides a lightweight way to link translated copies of posts together to help manage the translation (lightweight compared to WPML which works similarly but has a lot more options and workflow).
- Hyyan WooCommerce Polylang Integration to extend this for WooCommerce.
- Loco Translate: allows easy adding of custom translations to design-time text compiled in .mo/.po files
- additional customisations to support translation of all the various extensions to WooCommerce which need to be handled separately for example if they add extra fields which may need to be translated or copied to translated versions.
- Client-side currency switching – out of the box, WooCommerce is single currency… though thankfully the Orders do support a currency.
This means that customisation can be complex, because the various filters in the system for number formatting and display and the extension components are unaware what currency any particular number is in, whether it has been converted or needs converting, so in attempting to filter and override the output there are lots of possibilities for double-conversion or non-conversion.
There was no perfect solution to this so it was customised:
- currency rate information are output in a script block
- number formatting uses the locale formatting from the current site language (customisation added to Hyyan WooCommerce Polylang Integration)
- prices are output with specific html tags
- on first visit, ajax call detects user country by ip and maps that to currency and stores in a cookie (user can also switch currency at any time)
- if the page is not already pre-cached it is rendered and cached in the user currency
Other WooCommerce specific enhancements include:
- Abandoned Cart reminders: if a visitor got as far as entering their email address but didn’t complete their checkout, you can remind them. Abandoned Cart Lite for WooCommerce free version does the job pretty well showing full details of abandoned orders and a limited range of reminder email options which is expanded in the Pro version.
- Order status management: WooCommerce has good order failure and payment management but very little management for order processing, orders are either paid and received (Processing) or Completed. You might want to add, ‘Awaiting stock’, ‘Shipped’ etc according to your process. The custom code for this is not too difficult or just use Custom Order Status for WooCommerce plugin.
- Rewards: a rewards scheme can encourage people to come back to the site. We integrated the rewards system with bbPress, WooCommerce and coupon extensions to ensure that rewards could be earned for participation across the site and linked reward levels to coupon entitlements. The underlying reward code is based on:
- BadgeOS which despite being the apparently ‘leader’ does have some shockingly bad bugs affecting interaction with other components and correspondingly some deservedly poor reviews. Fortunately these can be fixed fairly easily.
- BadgeOS Community Add-On (customised for bbPress), BadgeOS Award Role Add-On, Members and a customised Multisite Role Sync: allows custom roles to be awarded and synchronised across the site family, where they can be associated with custom coupon entitlements.
- Bundles: there are several bundle tools available, some customization is needed for multi-lingual and multi-currency capability to ensure the translated components are correctly attached to the translated bundle and that the bundle component and total prices and discount are calculated correctly when switching currencies.
- Invoices: WooCommerce PDF Invoices & Packing Slips provides a simple solution for .pdf output. The free edition didn’t support chinese characters but otherwise was trouble free.
- Coupon Enhancements: WooCommerce Extended Coupon Features PRO allows automatic issuing of free products or free product selection, coupons restricted to role membership, automatic adding of coupons when eligibility conditions are met.
This is a rare case where we paid the €29.00 for the full version after liking the free version.
- Gift Vouchers: we reviewed several solutions before contributing to the github project WooCommerce Sell Coupons which is adequate for purpose and with one more round of enhancement would be releasable to the wordpress repository.
- Wishlists: we used WooCommerce Wishlist Plugin with customisation to eliminate its incessant ajax calls which we hope they soon accept…
For the community section we used:
- Forums – bbPress The software is solid though development is slow – 2.6rc5 seems stable and in use widely although the beta process has taken over a year. Despite bbPress status as a featured plugin with Matt Mullenweg as a listed author, real contributions seem to be made by 1-2 people in their spare time.
Additionally various plugins specific to the forums such as:
- Directory – Business Directory Plugin – a straightforward directory as a customised post type with tags, categories and a secure contact form
- Front-end translation: since we were not planning human translation of the user provided content on the community site we wanted an easy way of front-end language switching so the captions and help texts would be translated without duplicating/translating the content. So the solution used:
- Language Switcher: JSM’s User Locale, lightly customized to integrate with the Polylang language cookie to detect the preferred language of the user coming from the main site
- Inline translation of forum messages: JM Buddy Translate – developed as part of a previous project this adds a translate button to bbPress and BuddyPress messages which calls google translate for an automatic translation to the current site language. And a link if that didn’t work well.
Signup & Social Media Integration
Login and Registration
For login we redirected all login to the main WooCommerce My Account area, disabling the standard WordPress login/registration as WooCommerce has a particularly smooth sign-up process.
The solution is:
- disable the scripts except specifically where they are needed on the login pages
- code customisations for redirection so that everywhere you need to login, you get returned back to where you were so you can carry on
- don’t use the fancy script versions of sharing buttons on every page when a link will do the job fine
In addition to the smooth signup we also wanted to add a visual avatars to the user comments and posts, the final solution for this with a bit of filter priority adjustment was:
- User-uploaded image if available – implemented in Basic User Avatars
- Social media avatar if available – via Super Socializer
- Badge icon if user has earned a badge
- A cute cat from Cat Generator Avatars as a fallback
Social media publication
Automatic publication of site content is very helpful but doesn’t replace manual care of your social media channels.
Initially we used NextScripts: Social Networks Auto-Poster which does allow a lot of flexibility and control over publication – and some fancy features to pull back in comments from facebook – but our paid enhancement to that stopped working after we switched to Multisite and we reverted to publication via RSS listeners on Zapier and IFFT – and custom enhancements to our RSS output.
Since the site was art-focussed, graphics handling was a priority. Initial versions were entirely navigated by photo, until it became obvious that a range of 80 very similar looking photos of white paper was not a very effective navigation tool.
- Popup lightbox/slideshow: after being very happy initially with RoboGallery, we decided to switch to Photoswipe ahead of WooCommerce3 release to consolidate on a consistent lightbox for both woocommerce and non-woocommerce photos. Initially we contributed to the existing Photoswipe Masonry plugin but unfortunately they completely restructured it after accepting about 70% of our enhancements so we kept on a customized fork which we further enhanced for handling bbPress images etc.
Other image handling enhancements used included:
A large WooCommerce site is relatively heavy-weight and loads a lot of code and information for each request. This can be mitigated by separating the Shop and other areas of the site into separate sub-sites.
Subsites have their own tables (except shared users table and multisite configuration tables). Installation is shared but different plugin code can be run on different sites: for example wooCommerce and related extensions can be turned off on the separate subsites for support forum etc.
When your site family is structured as subdirectories it’s easy to share user login sessions and cookies to provide an integrated user experience, as if all is part of the same site.
Points for customization include:
- My Account areas: a bit of styling and template work to integrate say WooCommerce account home page and Forums account home page.
- Dynamic indicators like Shopping Cart and Wishlist: with a bit of integration and cookies, you can also show these indicators on non-WooCommerce areas of the site, for visual consistency and to pull users back into the site.
The Basics: Security, Backup, Performance
- HTTP2: should be standard now from your hosting provider.
- Page output caching: one of the most significant optimizations is to not run code at all, instead serve static pages to site visitors using a plugin such as WP Super Cache.
- Multisite: a large WooCommerce site is not necessarily super speedy: one of the fastest ways to separate out other areas of your site is to use WordPress multisite. By having the shop as a main site
- PHP7: in different benchmarks PHP7 is between 2 and 10 times faster than PHP5, if you need to use PHP make sure you have it.
- Pagespeed: Google pagespeed can filter requests and perform various optimizations on the output, especially CSS, JS and images which naturally give great results on pagespeed analysis.
- CDN: if you can afford it, get a good CDN. Cloudflare is good, it can have the effect of a CDN while also providing intermediate page output caching. Just be aware that the free plan level may route everything via the USA, which may not be ideal in all cases also Cloudflare accelerated sites may not be available in China – that’s common to other CDNs though, you really need a separate china installation if you want good performance inside of china as well as outside.
- Query Monitor: available as a separate plugin, to enable on your non-production environment, this analyzes all the queries run by the application and the code and helps identify pain points for you to fix and/or report back to the respective component owners.
Websites are not only under continuous attack but continuously under different types of attack. Without going into details we recommend multiple layers of security at eg:
- application layer
- http layer
- operating system layer
Each layer is capable of auto-updating from vendor to respond to changing threats.
Each layer can also occasionally give a false positive so be aware of how to diagnose and test these.
Again a multiple-layer approach is taken:
- application layer tool with offsite backup, also available to the website manager
- server level application backup scripts and auto-restore to DR server
- server backup
Of these the second is the most useful, the others are security in case of a failure or omission in the scripts or in case of total server failure and restore.
Some miscellaneous highly recommendable plugins we used:
- Admin Bar Toggle – stop the WordPress Admin bar interfering with your review of the design but keep it handy to use when needed
- Ajax Load More – infinitely scrolling dynamic loading of search results. You could write this yourself but why bother.
- Max Mega Menu – big pop out menus, used in this case for sitemap
- MailPoet 3 (New) – simple mailing list handler from within the site, good layouts and easy to add site content
- Relevanssi – WordPress search is pretty deficient, Relevanssi provides an enhanced search which works with enough configuration options for most purposes even in the free version, and Mikko provides very responsive support.
- Smart Slider 3 – it might be passé now to add sliders everywhere but this has the best responsive visual designer which we could do with seeing everywhere for page layouts etc