Posted on by — Leave a comment

How To Backup WooCommerce Database Quickly

backup woocommerce database

As you run your store, one issue comes up very early that how do you prepare for the worst case scenarios: your site got hack, the server is corrupted…

The most intelligent thing that a site owners do is to have his site backed up. No one can say that your site will never get hacked or your sever will never be corrupted. Those risk may be small, however, it still happen to people every day.

So, WooCommerce users, how do you backup your database quickly?

WooCommerce is a part of your WordPress site

As you may know, WooCommerce is a plugin that you install on WordPress. Thus, backing up WordPress is a much easier and safer way to backup your store. You don’t backup WooCommerce individually (though doing so is possible but it would cost you a lot more time than backup the whole WordPress site).

How to backup your WooCommerce site manually

If you want to actually experience the backup job, you have a few options. In case you have ssh access to your server (if you don’t know what this mean, skip to the next section), you can type the following command:

mysqldump -u your_database_user_name -p your_database_name > backup.sql

Hit enter, the server will ask for your database password, type it in and you are done.

If you use hosting services like bluehost or hostgator, you will have access to a tool called phpmyadmin. It’s a web app that let you backup your databases quickly.

Let’s watch the following video to learn how to backup WordPress database in less than 30 seconds:

how to backup woocommerce database with phpmyadmin

There you go, by backing up the whole WordPress database, you also backup WooCommerce database too.

Backup WooCommerce Database Automatically

While manually backing up your database is easy and quite fun to do, I would prefer something that is automatic. No one want to do this task every single day (daily database backup is vital, especially when you run your store, new data is added quite frequently and you don’t want to lose such precious information). Luckily, there is a free tool called UpdraftPlus that let us make backing up WordPress automated and easy (both database and your fileds).

Let’s go to Plugin->Add new to add the plugin. If you search updraft, you will see the plugin comes that the first place:

updraft plus woocommerce backup tool

Click on install now, then activate to make it available on your site. After that, you will see there is an option called UpdraftPlus backup under Settings:

updraft plus option in your site

Click on that then you will see the following screen:

updraftplus dashboard

Let’s click on Backup now to start configuring the backup.

updraftplus backup options

There you can see, the options are quite simple and easy to understand. Normally, I would keep these settings as default. The plugin allows you to setup a remote storage (dropbox, google drive) to store your backup, which is super cool!

Let’s click on backup now to start the process.

Next, let’s configure the frequency of the backup job.

How To Backup WooCommerce Database Quickly 1

As you can see, there are quite many options for you to select in terms of frequency. There isn’t one settings for all site. It depends on how frequent you have new data on your site. If your store get many purchases everyday, it is wise to set the backup to every hour. However, if it doesn’t get much sales, running twice daily seems to be a good choice.

Next, click on settings tab to setup your remove storage.

storage options for storing woocommerce database and files

As you can see, there are many options to select. Usually, I choose the free services such as Google Drive or Dropbox. The setup of those service is very straightforward and I have no doubt you can do it on your own.

Conclusion

As you can see, backup WooCommerce database (actually, backup your whole site database) is very important. Fortunately for us, the actually job is quite simple. You can either do it manually or use tools like UpdraftPlus backup to get the job done. Personally, I prefer UpdraftPlus since I can set it once and let the plugin does the backup automatically.

Posted on by — Leave a comment

WooCommerce Composite Products – #1 Way To Sell Custom Built Products

selling woocommerce composite products

WooCommerce Composite Products are a custom product type in WooCommerce that let you sell kits, custom built product with ease. One good example is computer shops that let their customers select the parts to build a computer. Another good example is a printable T-Shirt shop that let customers select the plain color shirt then select the art work to print. If you need something similar to that, read on. You’ll find your answer here.

Get WooCommerce Composite Products plugin

The first step is to get WooCommerce Composite Products plugin. As I mentioned above, this is a custom product type (thus, it’s not available by default.

Get WooCommerce Composite Products Plugin

Let’s create a composite product

In this post, I’m going to create a custom built phone that has three parts:

  1. The screen
  2. The case
  3. The battery

I know that a smartphone actually has more parts than this. However, to keep the example simple and easy to follow but still comprehensive, three parts should be enough.

Create selections for each part of your WooCommerce composite product

After deciding that the phone should have three parts, I will need to create options for each part so our customers can select. For each part, I’m going to create three options.

One option is one simple product. I also group the parts in their categories so I can select them easily later.

create options for woocommerce composite products

As you can see, I’ve created three categories with 3 products in each category. Now, I’m ready to create the composite product so my customers can start building their favorite smartphone.

Create WooCommerce Composite Products

Now, let’s go to Product->Add new and select product type as composite product:

select composite product type to create woocommerce composite product

As you switch the product type to composite, you’ll notice that there is a new tab called component appears:

components tab in composite product

This is where we add the component to the main product (the custom built smartphone). Let’s click on Add component to add screen, battery and case.

After clicking on Add component button, you’ll see this screen appears:

configure one component in composite product

The fields are quite straightforward, don’t you think? You enter component name and description in field 1,2. Then component’s image in field 3. In field 4, as mentioned earlier, the reason I created and group components in categories is here. I can simply select a category instead of selecting individual product.

additional fields to configure woocommerce composite products

The next fields let you further customize the display of the component. You can set the component as optional, set default option, min, max quantity and shipping and pricing option.

One note about pricing. If you have one price for all variation (that means the total price doesn’t change if the customer change parts, this option doesn’t work in this case though), then you can set the price at the general tab. However, if the price of the WooCommece composite product equals the sum of all selected components, you will need to check “priced individually” at the bottom of the component option page.

As I’m done setting up the components, let’s publish the product and see how it looks.

As you can see from the video, I can easily select the option for each component. The price at the bottom updates as we select different parts for the phone.

You may wonder, what is the number $620 at the top. That’s the sum of all parts initially. I’m quite surprise that this number doesn’t update as I change the parts. Only the number at the bottom get updated. This is a bug that should be fixed by the plugin developer.

Setting scenario for WooCommerce composite product

If you have bought a desktop computer before, you may know one fact: Not all motherboards work with all CPU. One simple example is if you get an Intel CPU, you cannot use it with a motherboard that supports AMD’s.

As the store owner, you definitely want to guard your customers from buying incompatible parts. Luckily, WooCommerce composite products plugin let you create scenarios where only certain products can be bought together.

For our example, I’m going to create a scenario says that expensive screen must come with high capacity battery. Customers cannot buy expensive screen with cheap battery because the cheap battery may not be possible to handle the power-hungry high end screen.

Let’s switch to the scenario tab to create that rule:

create composite product scenario names and description

The first two fields in the Scenarios tab let you set name and description. Next, there are fields for you to configure the rules:

configure the way components can be bought together

So, as you can see that, my rule says: if the screen is the most expensive one, the battery must not be the cheapest model. Also, I don’t need to set rules for all components. In this case, I omit rules for case.

Let’s update the product and check its page:

As you can see, if I select the screen to be the most expensive one, the option for the cheapest battery is not available.

Conclusion

As you can see, WooCommerce composite products plugin is great for you to create custom built items for your store. There are some minor issues such as:

  1. The price at the top isn’t updated as the customers change the component
  2. It is not possible to exclude categories in the scenarios tab

However, with the job it does, it is still a decent plugin and could serve you well in case you need WooCommerce composite products.

Posted on by — 1 Comment

Easy Ways To Remove WooCommerce Breadcrumbs

breadcumbs

WooCommerce breadcrumbs are a piece of information that display at the top of every product page indicating the hierarchy of the product. Usually, it shows the product’s parent categories. This widget is quite helpful for customers to navigate your store. However, if you have other way to help your customer do that, the breadcrumbs would be redundant. In this post, I’m going to show you two easy ways to remove WooCommerce breadcrumbs that you can complete within a few minutes.

Method 1: Remove WooCommerce breadcrums using CSS

This is the easiest and safest way to remove WooCommerce breadcrums. You don’t need to enter PHP code, thus minimize your risk of breaking your own site.

Most of the time, your breadcrumbs has this CSS class: woocommerce-breadcrumb.

So, in order to hide it, you will enter this block of code inside: Appearance->Customize->Additional CSS

.woocommerce-breadcrumb { display: none; }

Publish the change and you should see the breadcrumb is gone.

If you prefer, I made a video tutorial here.

Method 2: Actually remove WooCommerce breadcrumb from the page

You can see that, in method 1, we only hide the breadcrumb, not actually remove that. If you want to really remove WooCommerce breadcrumb, you will need to put some code in your theme functions.php. I would recommend you create a child theme for this purpose.

For most themes, you can enter the following code at the end of your child theme’s functions.php to get the job done:

/**
 * Remove the breadcrumbs 
 */
add_action( 'init', 'bc_remove_wc_breadcrumbs' );
function bc_remove_wc_breadcrumbs() {
    remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
}

Specifically, if you use storefront theme, you can enter the following code:

/**
 * Remove breadcrumbs for Storefront theme
 */
add_action( 'init', 'bc_remove_storefront_breadcrumbs');

function bc_remove_storefront_breadcrumbs() {
  remove_action( 'storefront_before_content', 'woocommerce_breadcrumb', 10 );
}

Save the file and you should see the breadcrumb removed.

Conclusion

There you have the two effective methods to remove WooCommerce breadcrumbs. If you use method 1, make sure you copy the code when you change your site’s theme since you will need to paste it again in the customize CSS box. Actually, you may need to do the same when you use method 2.

Posted on by — 1 Comment

How To Identify Big Files On Your Site

How To Identify Big Files On Your Site 2

One of the most important steps a webmaster need to do to improve his site’s speed is to find out what are the files that takes a long time to loads. Most of the time, those resources are big files (images, css, js files…). A simple audit can help you identify then remove or resize those files to improve your site speed.

Finding big files is quite simple nowadays with the help of your browsers. Modern browsers all support this feature so you can perform this audit on any browser that you prefer. In this post, I’m going to perform the task on Chrome.

Disable minify, caching plugins on your site

This step if very important. Minify, caching plugins (such as W3 Total Cache, WP Super Cache…) usually combines file together to reduce the number of requests. While those tools are nice in helping your site load faster, they hide the actual requests made by individual files.

Open your site in a browser tab

Next, open your site in a new tab. You can open a page, a post on your site if your goal is to inspect that single page/post.

Inspect the large files

Now, right click anywhere on the browser window and select inspect. In some browsers, this option is named inspect elements and it appears nearly at the bottom of the context menu.

inspect the page to audit

You should see a new window appears. On that window, locate the Network tab:

Switch to network tab

Then, finally, reload your page.

You can then see a list of requests that your browser made to your site’s server. When your site finishes loading, click on the Size tab to sort the size of the request in order. It is best to sort the size in decreasing order since you can identify the requests that cost most at the top:

sorting the sizes of the request

As you can see from my image, the top request cost 789KB, which is very large. It is an image. So, I will consider replacing this one with a smaller image or I can make its size smaller.

Next on the list, you can see that the file epo.min.js is 350KB. It’s a javascript file. When you click on that file, you’ll see its full path:

Finding the plugin of the file

From the file path, I can tell that it is a plugin (since it’s in wp-content/plugins folder) and its name could be WooCommerce TM Extra Product Options.

You can search for that in your plugins list and see if that plugin is vital to your site. If it isn’t, you should consider deactivating it to save your site from loading a big file.

You can continue this process to the end of the list. Normally, I don’t inspect all items but some resources that have significant size. Something that is over 50KB is worth inspecting (images are exception, I usually start inspecting images when their size exceed 200kb).

Conclusion

Now you know a quite useful technique to find the large files that cause your site to load slowly. It’s time to start working on your site to improve its performance.

Posted on by — Leave a comment

Easiest Way To Install Google Fonts In WordPress

wordpress add google fonts

Google fonts is a great way to enrich your web typography. There are thousands of fonts available for free. If you have been using new WordPress themes or plugin, you may see that many of them let you pick fonts from Google repository and add to your site. However, you don’t have to use a theme or a plugin to get Google fonts. In this post, I’m showing you the easiest way to install Google fonts in WordPress. You’ll be surprised at how quick it is.

Select a font in Google fonts

The first step, obviously is to select a font form google fonts. Let’s head to https://fonts.google.com/ and pick the fonts you prefer:

fonts available on google fonts

As you can see, there are many fonts available. Simply click on the orange plus icon to add it to your list of select fonts.

add fonts to selection

As you can see, I have added three fonts to my selection. The plus signs were turned to minus so you can remove those fonts in case you need it.

A black box appears at the bottom right of the screen showing the information of the fonts that were added. If I click on that box, there will be a bigger window slide up contains some useful information as well as the installation instructions:

show list of fonts were added

There is one important thing to notice here. There is an orange box says “Load time: Moderate”. This isn’t a good sign because it tells us if we add all these fonts, it will negatively impact our page load time significantly (Adding more fonts, even just one will slow down your site).

Try to remove the fonts you don’t really need. Normally, I select at most two fonts. Let me remove one font so I can get load time: fast.

improve load time by selecting less fonts

Before installing the fonts to our site, let’s click on the customize tab.

selecting font weight in customize tab

Here, you can see a list of font-weight and style that you can add. I currently have the regular font weight for both fonts. Adding more styles let you pick more variations for your fonts. However, similar to font family, adding more font styles adds time to site load time. So, you should be very frugal when picking more styles.

How to install Google fonts in WordPress

Let’s head back to the embed tab and grab the installation info:

copy google fonts snippets to install on website

First, you need to switch to the @import tab. Installing the fonts using the snippets in the standard tab takes more time and require a bit of coding skill (though not much).

Let’s copy the code in first box but excluding <style> and </style>.

Where to put this code? You may ask. Well, let’s go to our site’s dashboard and go to Apperance->Customize-> Additional CSS and paste the code there:

import google fonts to wordpress in the theme customize.png

Now, for the second part, let’s copy it. However, before you can paste it, you need to know where do you want to use those fonts. For example, in my case, you want to use Raleway for the whole site, you need to write this in the Additional CSS box:

body { font-family: 'Raleway', sans-serif; }

If you want to use Raleway for body text and Montserrat for the headings, you can place the rules like this:

body { font-family: 'Raleway', sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; }

If you want to use, say Raleway for the sidebar only, you would put this rule in additional CSS box:

.widget-area { font-family: 'Raleway', sans-serif; }

If you want to apply a specific font for the content body only, you would like to put something like this:

.content-area { font-family: 'Raleway', sans-serif; }

These rules will work in most case (if your theme adhere to WordPress theme structure standards). However, you can easily use the inspector tool on your browser to find the CSS selectors to apply the fonts.

Conclusion

Now you know how to install Google fonts in WordPress. However, while it is easy to install those pretty fonts, it is also easy to add many fonts and make your site load slowly. It is best to select one or two fonts and strive for the load time: fast for the best results.