Turbocharge your WooCommerce store load times

Today we take a look at some of the most effective ways to speed up your WooCommerce powered store.

Let me get straight to the point. For most people, WordPress is slow. And WooCommerce is even slower. Why is that? A few reasons:

  1. Lack of caching in core – by default, WordPress reads all content from the database. Same goes for WooCommerce. You mighn’t notice this too much when you just have a small blog with a couple of posts. But throw in WooCommerce and a couple of hundred products and you’ll start to see things slow down.
  2. Underpowered, shitty shared hosting – we’re on a bit of a mission to get WooCommerce store owners to stop using shitty shared hosting providers for their WooCommerce stores. You get what you pay for – and you’ll really feel the pinch if you skimp on hosting when it comes to eCommerce.
  3. Bloated WordPress installs with tons of plugins and bloated themes – It’s not really the number of plugins that’s the problem. It’s more store owners and WordPress users in general feeling like it’s ok to just install any old plugin without realizing that it could be a complete dog, full of bugs, poorly written and causing performance bottlenecks on your website. You need to develop a really good sense for detecting if a plugin is impacting on the performance of your website. Know your average load times and know them well. When you install a new plugin see if it makes any difference to your load times. Same goes for themes. A lot of themes are not very well coded when it comes to WordPress standards and can cause significant performance issues for your website.

It’s important to remember that WordPress itself can be made to run very very fast. Heck WordPress.com gets approx. 131 MILLION unique visitors per month which makes it one of the most visited websites on the planet. The problem is that the default experience for most people is not this superfast traffic devouring machine. It’s a slow, easily broken mess. Managed WordPress hosting goes some way to helping solve this problem. Managed hosting services are putting in place hosting infrastructure similar to that used by WordPress.com so that the rest of us can enjoy the kind of speed that WordPress.com has. Speed is important for any website. But especially so for eCommerce websites.

EgJAfE8

 

Speed is one of the most important aspects of a highly successful eCommerce website. Think about it. When was the last time anyone complained that placing an order on Amazon was slow? Pretty much never. In fact, if anything, it’s almost too damn easy and quick to place an Amazon order 🙂 Studies have shown that if you’re site is loading any longer than 4 seconds, you’re losing orders and lots of them. Once load times go up to 10 seconds, you’re losing well over 90% of your traffic. If you’re losing this much traffic, think about what that is doing to your conversion rate. For many, the simple act of getting a decent web host can significantly increase conversion rates, simply because you’ve made it easier and quicker for customers to complete orders! So let’s assume you sort the hosting issue, what else can you do to turbocharge your WooCommerce site?

Minify all the CSS

If you’re using one of our WooCommerce themes, we’re already minifying Javascript by default for speed optimization. But if you’re looking to shave some additional time off your page load you need to install BWP Minify. Better WordPress Minify is one of the better WordPress minification plugins available.

Configuring BWP Minify for the Captiva theme

Just to take the example of how we tune our demo speed with BWP Minify.

  • Open BWP Minify -> General Options.
  • Deselect “Minify JS files automatically” – by default Captiva minifies all js files that can be minified. If you leave JS minification active in BWP Minify this may cause your site to malfunction.
  • Select “Minify CSS files automatically?”

Here’s a screengrab of our General Options config:

bwp_settings

Click to view larger version of settings page.

 

  • Go to -> Manage enqueued files
  • Scroll down to “Managed enqueued CSS files”
  • Add a full list of CSS handlers to not be minified under the “Styles to NOT minify”
    • admin-bar
    • dashicons
    • layerslider-group-css
    • cap-captiva
    • js_composer_front
    • background-style
    • aio-tooltip
    • cap-responsive
    • ultimate-headings-style
    • stats-counter-style
    • info-box-style
    • timecircle
  • Doing so will ensure your site continues to load correctly after minification is complete.
  • And you’re DONE!

I’ve seen minification alone knock 5-6 seconds of page load speed for some websites. So go forth and minify! We’ll be back soon with more tips on how to turbocharge your WooCommerce website.

 

 

 

 

 

Quick Tutorial: Translating Captiva

With eCommerce truly global it goes without saying that there is increasing demand for online shopping in your own language.

It’s a question we get asked a lot – “How do I go about translating Captiva?”. This is a quick run through of the steps to take.

1. Add a Language Pack to WordPress

WPMU Dev have done a terrific job in summarizing this step so check out the process!

2. Translate Captiva’s English strings

Now that WordPress is running in your language you’ll need to translate the English strings in Captiva to your own language.

This is done using the included ‘.po’ file within wp-content/themes/captiva/languages

  1. Install Poedit.
  2. Download the captivalang.po file from wp-content/themes/captiva/languages
  3. Open in Poedit and save as nl_NL.po (in this example – Dutch). Your language file name needs to match one on this list. Updatethis is an easier place to find your language code
  4. Translate your strings.
  5. Save your new nl_NL.po AND nl_NL.mo file and upload them to the /captiva/languages folder
  6. Add this to wp-config.php:
    define (‘WPLANG’, ‘nl_NL);
    The name MUST match your .mo file precisely (including being case sensitive)

3. Video Tutorial

You could also check out this excellent tutorial by AJ Clarke on the translation process.

Remember you can purchase our WooCommerce theme Captiva today over on ThemeForest. If you’re a WooCommerce newbie we also provide a free installation service to get you up and running with your own WordPress powered online shop in no time!

Starter Child Theme for Captiva released

Using a child theme is the best way to ensure you can easily update our WooCommerce themes when new versions become available. Today we’ve released a child theme for our first WooCommerce theme, Captiva.

For those new to WordPress the concept of child themes can be a bit confusing. You finally find a theme you like and want to make some tweaks to it to personalize it for your requirements. You should just jump in and start making changes to the theme itself right? WRONG! This will cause you a world of pain in the long run. Let’s assume you do go the way of making changes to the theme itself. Let’s then assume that the developer then releases some major fixes a month later – perhaps even fixing some major security bugs that you can’t simply ignore. What then? Your only course of action at that point is something like the following:

  • Backup your current version of the theme that includes your changes
  • Download the latest version with the fixes from the theme developer
  • Merge back in your customizations
  • Re-apply to your live site
  • Pray that everything still works correctly. SPOILER – it probably won’t!

Now imagine having to do that every. single. time. there’s a new release of your favourite theme. Surely there has to be a better, smarter way of keeping your customizations while being able to update the theme painlessly I hear you say?

Enter WordPress Child Themes

WordPress child themes solve the problem scenario outlined above. Simply put, a child theme is a completely separate WordPress theme that allows you to override files in your favourite theme which is known as the parent theme. The child theme inherits all the functionality of it’s parent by simply declaring that it has a parent in the main style.css of the child theme.

A really simple child theme consists of just one file – style.css

Consider a simple example child theme for the Twenty Fourteen theme.

/*
 Theme Name:   Twenty Fourteen Child
 Theme URI:    http://example.com/twenty-fourteen-child/
 Description:  Twenty Fourteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfourteen
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fourteen-child
*/


@import url("../twentyfourteen/style.css");


/* =Theme customization starts here
-------------------------------------------------------------- */

Simple right? The key line here is the Template: twentyfourteen

This is the magic sauce that tells WordPress that this theme is a child of the twentyfourteen theme. So while our child theme simply has a style.css file, it will actually inherit every single file in the parent theme.

For simple css changes it’s now simply a case of adding your custom css to style.css in the child theme. At load time, WordPress will first load the main styles in the parent theme and then load your child themes CSS file. Now when you need to update the parent theme you can do so safely without having to worry about the messy and time consuming steps we outlined earlier.

Taking child themes a step further with a child functions.php and template overrides

Suppose you wish to extend the parent theme within the child theme with your own custom code – how do we go about doing that? Simples. Just add a functions.php file within your child theme. Your child theme functions.php works a little bit different from the child style.css. It will not override the contents of the parent functions.php – rather, it will extend it. Why is that important? Let’s say for example you have a function in your parent functions.php called get_comments(). If you add a function of the same name to your child functions.php, the parent get_comments() will still be called. On load, WordPress will first execute the parent functions.php file. This can catch out a lot of people when they’re first getting started with child themes. In that scenario where you wish to change or override the parent function you would ideally use WordPress hooks and filters which we’ll explore separately in the future.

Template overrides

Let’s assume you wish to change some markup in the parent header.php. How would we do that in a child theme? The good news is that it’s as simple as copying the parent header.php file into your child theme directory and boom! you’ve got yourself a template override! You can start making changes safely within the child theme straight away. My advice is to keep an eye on your parent theme changelogs with new versions so as to not miss out on any critical fixes to parent templates that you should be bringing into your child templates. Which is why it’s important to only override the templates you really need.

Captiva Child Theme

Our first WooCommerce theme Captiva just passed the 300 sales milestone on themeforest! To celebrate we’re releasing a starter child theme for Captiva which should help you get up and running with a child theme straight away.

As you can imagine with a commercial WooCommerce theme there’s a little bit more to child themes than with a simple WordPress theme. The child theme makes extensive use of wp_enqueue and wp_dequeue to re-order parent stylesheet rendering order to make your child theme as simple as possible to create. In addition there are a number of Visual Composer templates also required to be bundled in your child theme to ensure your child theme renders correctly.

Download Captiva Child Theme 1.0

 

 

 

Keep Captiva up to date with the Envato Toolkit

We try to keep our WooCommerce theme Captiva up to date by regularly releasing updates which include bug fixes, compatibility resolutions and new features.

Here is a quick tutorial on keeping Captiva and indeed any other theme on ThemeForest up to date.

1. Download the Envato WordPress Toolkit

git-envato

We’ve included this with Captiva so you probably won’t need to worry about this step – it will be pre-installed. But if you are looking for it you’ll need to download it from GitHub as it’s not available in the regular WordPress Plugin Repository. Then go to Plugins > Add New and upload the zip file.

Activate the Envato Toolkit Plugin and an option for it should appear on the dashboard left hand side menu.

2. API Key

api-key

Next you’ll need to create an API key to connect your WooCommerce site to your ThemeForest account. Login to ThemeForest, hover over your username and click on “My Settings” and click on “API Keys” on the left hand side menu. Generate a free API key from this screen.

3. Update Captiva

envato-plugin

Now when you click on the Envato menu item you can enter your ThemeForest username and API key you’ve just generated.

On the following screen there should be an option to automatically update Captiva to the latest version.

And if you want to do this manually?

You can of course simply unzip the latest version of Captiva and upload it, overwriting the old. But make sure you’re using a child theme! If not, modifications you’ve made to any files will be lost.

Captiva Theme Options are saved to the database so don’t worry – they won’t be overwritten with any update.

Managing WooCommerce settings with Captiva Theme Options

Todays video tutorial is a follow up to yesterdays initial Introduction to Captiva Theme Options. Today we dig a little deeper into how to manage WooCommerce settings within the Captiva Theme Options panel.

In case you haven’t figured it out yet, we’re huge fans of WooCommerce 🙂 Within the core of WooCommerce there are just enough settings to not put off first time users to get a store up and running quick smart with minimum fuss. Compare this to Magento where you’ll need about a week to figure out some of the basics! WooCommerce subscribes to the same ethos of WordPress itself which is to keep the core as light as possible and use plugins and extensions to customize things to your specific requirements.

With that in mind, we’ve baked in some additional configuration options for WooCommerce within the Captiva theme that help store owners to finely tune their WooCommerce store as quickly as possible.

When creating our WooCommerce theme options we tried to group settings into categories that we felt would make sense to store owners. These categories are:

  • WooCommerce General Settings – these are settings that are not specific to one WooCommerce page template. Think of these as global WooCommerce settings that use a series of WooCommerce hooks and filters under the hood to change and tweak WooCommerce behavior. This includes things like Catalog mode, price and category display and credit card icon display.
  • WooCommerce Product Details – these are settings all to do with the single item view or as we like to call it, the Product details page. This includes things like whether you would like to display a Size Guide, your Returns policy, social sharing icons and your up sell title.
  • WooCommerce Product Listings – these are settings that change your product listings view which includes things like the number of items per page, the number of product columns, grid/list layout and whether you wish to display Shop announcements (which is unique to Captiva via our Captiva Toolkit plugin).

Remember if you like what you see in today’s video you can purchase Captiva today over on themeforest. If you’re a WooCommerce newbie we also provide a free installation service to get you up and running with your own WordPress powered online shop in no time!

If you prefer to go through the install and setup process on your own, be sure to read the documentation that comes with the theme and check out our other Captiva videos over on our Youtube channel.

Anyway on with today’s video tutorial – we hope you enjoy it!

Captiva WooCommerce WordPress Theme

Well it’s been a busy month at CommerceGurus towers – we’ve launched our first WooCommerce theme, Captiva on ThemeForest and we’ve been thrilled by the reception it has been getting.

From the outset, we wanted to create a modern WooCommerce theme with style, functionality and unmatched versatility.

It can be used for any kind of business and brand with fantastic customizable options which allow you to change layouts, typography and colours so that it matches your brand perfectly.

Captiva


Powered by WooCommerce

woocommerce-productsWe wanted to make it easy to get selling right away.

We’ve designed Captiva with WooCommerce in mind so whether you’re selling shirts or sombreros you’ll have the power of a system that fuels 15% of eCommerce sites on the net.

With a large community behind it and hundreds of plugins  it’s a great choice to power your shop.


Easy Layouts with Visual Composer

vc-result

Visual Composer and the result below

We incorporated Visual Composer so you have drag and drop control over elements. Need two columns or three? Five rows or none? You’ll have fine grain control over the content so it’s just how you like it.

Beautiful Pages

We spent the time fretting over the small details so you don’t have to. All our product pages are beautifully designed and we’ve made sure that common templates such as About Us, Services and Contact have a gorgeous ready-made layout so you’ll be up and running quickly.

captiva-pages-01

captiva-pages-02

Plus lots more…

We’ll be exploring in more detail over a series of blog posts lots of more features including our mega menu and how to use the theme options to customize Captiva.

You can purchase Captiva today over on themeforest. If you’re a WooCommerce newbie we also provide a free installation service to get you up and running with your own WordPress powered online shop in no time!

An Introduction to Captiva Theme Options

Today’s video tutorial will introduce you to one of the most important parts of the Captiva WordPress theme, the theme options panel.

About the Captiva Theme Options panel

Most commercial WordPress themes today (and many free themes now too) will ship with some form of Theme Options panel. Personally, I’m not a huge fan of huge, bloated theme options panels as I believe it introduces a much higher learning curve to using a theme. But they do have their value and do help customers who have limited technical skills to make changes to their site quickly without having to learn how to code. I think there is a balancing act to providing just enough theme options to let customers control the things that matter most to them, while letting the theme designer and developer solve the bigger design challenges that make the theme unique in the first place. That’s been our ethos since we started building Captiva. We also listen carefully to what our customers are asking for when it comes to releasing new versions of Captiva and extending the theme options based on customer feedback.

Remember if you like what you see in today’s video you can purchase Captiva today over on themeforest. If you’re a WooCommerce newbie we also provide a free installation service to get you up and running with your own WordPress powered online shop in no time!

If you prefer to go through the install and setup process on your own, be sure to read the documentation that comes with the theme and check out our other Captiva videos over on our Youtube channel.

Today’s video provides a short introduction to the more general aspects of the Captiva Theme Options panel and how to make big global changes to your site like your layout preferences, typography and color scheme. Tomorrow’s video will introduce you to more in-depth options covering WooCommerce specifically.

Enjoy the video folks!

 

 

 

 

How to setup WooCommerce Mega Menus with the Captiva theme

In todays video tutorial we walk through the process of creating a Mega Menu for your WooCommerce shop with our brand new WooCommerce theme, Captiva.

The concept of a “Mega Menu” has become one of the most popular features on eCommerce websites over the past few years.

Mega Menus are a great way of letting your customers see the full breath and depth of your catalog without having to click around lots of different sections of your shop.

Setting up a WooCommerce Mega Menu with the Captiva theme

WooCommerce does not provide a way of creating mega menus by default. But seeing how popular they have become, we took the time to create a pretty simple way of creating a Mega Menu within the Captiva theme. The video below walks you through the process from start to finish.

Before watching this video

Some things you have done before you watch this video

  • Setup WordPress and WooCommerce
  • Purchased and installed the Captiva theme. Not purchased it yet? Get it now from themeforest.
  • Install the demo data xml that comes with the theme

Once you’ve done the 3 tasks above, everything in the video below should make sense. Just in case you’re wondering there’s no audio on this tutorial. Let us know if you’d like us to add audio to our future video tutorials.