image optimization Tag Archives - Page 2 of 2

13 Routine Maintenance Tasks that You Should Do on WordPress and WooCommerce

April 2, 2018 By John Leave a Comment

Maintaining a WooCommerce store is a lot of work. There are a lot of routine maintenance tasks for WordPress and WooCommerce that need to be done on a regular basis. In this post, we list down the most important tasks that you should do on your WooCommerce store.

1. Create Regular Website Backups

Creating regular site backups is critical. It is your first fallback in case something breaks on your site. While you can make backups manually, it is important to make regular automated backups. Check with your hosting provider if they create regular backups of your database as well as a complete backup of your site. You can also install a backup plugin such as Updraft Plus or BackWPup and set it up to make regular automated backups for you. We still recommend creating manual backups before doing major work on your WooCommerce store though.

2. Update WordPress, WooCommerce, Themes and Plugins

Updating all elements of your WooCommerce store should be done on a regular basis. Do this weekly if you have the time. If not, monthly updates are good enough. Updates include updating WordPress Core, themes, WooCommerce and all other installed plugins. Remember to backup up your site before proceeding with updates since updates could cause your website to break. If you have a development site, it would be best to test the updates first on this staging environment. Then, do some user testing to make sure that there are no errors. After that, you can proceed to update your live site. When that’s done, you will need to do another round of testing. Some important elements to test include checkout, add to cart, contact form emails, opt-in forms and other customizations that were done on the site.

3. Update WooCommerce Template Files

After updating WooCommerce, you will sometimes get an error notifying you of outdated WooCommerce template files. This just means that your theme has not updated to include the latest WooCommerce template files. In some cases, this could cause some formatting issues on your store. If there are no errors on your store, you can simply wait for your theme to release an update that includes the most recent template files. Or you can also fix this manually by following the steps in this documentation from WooCommerce.

4. Change User Passwords

It is important to use strong passwords. However, it is just as important to change passwords on a regular basis. There are times when security breaches can go undetected for a long time. Changing your password regularly blocks out these security breaches that you might not realize are there. You should change your password for WordPress admin, FTP, database and cPanel. And a pro-tip, never use “admin” as your username. This is the first username that hackers try out when brute forcing into websites.

5. Optimize Your Product Images

We’ve always emphasized the importance of optimizing images for your WooCommerce store to keep your site running fast. If you have uploaded any product image that is more than 100KB in size, it might be a good idea to replace that image with an optimized product image. To learn more, you can check out our blog post on how to optimize images.

6. Approve and Respond to Product Reviews

If you are not asking your customers for product reviews then you might want to reconsider. Most people who buy online look for product reviews before they decide to purchase something. One study found that 85.57% of users read reviews before they purchase. And if you are asking your customers for product reviews, then you will need to approve reviews on a regular basis. A word of advice, do not remove negative reviews of your products. Instead, make it an avenue where you can show good customer service. Respond to the negative review. Offer a replacement for a defective product or offer a refund. People reading reviews will want to see some negative reviews to get a well-rounded picture of your product. When moderating reviews, you only need to remove the spam reviews.

7. Approve and Respond to Blog Comments

If you have a blog that is made to drive customer engagement, then your blog will most likely attract comments. Same with product reviews; don’t delete the negative comments. Rather, address them positively. Remove any spam comments as this will negatively impact the user experience of your blog. If you are using Akismet: Anti Spam plugin, this will block out most spam comments. However, some spam comments can still get through and you will need to manage them manually.

8. Test Your Contact Forms and Email Opt-in Forms

Every now and then, you will need to make sure that your contact forms and email opt-in forms are working. Just fill in your forms and send. If you receive it in your email, then you’re all good. But if you don’t, there’s something wrong and you need to do something about it. Have your developer look into it.

9. Optimize Your Database

Over time, your database accumulates a lot of gunk and you need to clean it to make sure your website runs fast. Before you go about this task, make sure you create a backup. You can choose to clean your database manually if you are comfortable and familiar with working on your database. Otherwise, you can use a plugin to do the optimizations for you. Notable plugins include WP-DBManager and WP-Optimize. You can check out our guide on how to clean your database.

10. Test Your WooCommerce Store’s Speed

If you have not yet made optimizations to your WooCommerce store’s speed, you should consider doing it now. Site speed has become increasingly important for WooCommerce store owners. Google now considers site speed as a ranking factor for SEO. Also, if you have a slow site, this will negatively impact the customer’s experience on your site. It is easy for your customers to buy instead from your competitors. You can test your site speed on Google’s Page Speed test and Google will provide you with recommendations on how you can improve your site’s speed. Other notable tools that you can use to test your site are Pingdom Website Speed Test and GTmetrix.

11. Scan Your Site for Malware

One way to keep on top of your website’s security is to regularly test your site for any malware. If you are connected to Google Search Console, it will let you know if malware is detected on your site. If your site has been found to have any form of malware, Google Chrome will actually alert your visitors that your site is dangerous. This can have devastating effects on your traffic and conversion rate. No one will want to enter their payment information on a site that has malware. In extreme cases, Google may block your site from appearing in the Google search results page. You want to prevent this from happening. It would be best to invest on your site’s security by installing a security plugin such as Sucuri Security and WordFence. Even if you have those plugins installed, it is still a good idea to a manual scan. You can scan your website at Sucuri’s Website Malware and Security Scanner, or at SiteGuarding. If any manual scans detect anything malicious, you can contact your developer to fix the issue. You should get it fixed before Google applies any penalties. Wooassist also offers a security hardening service to improve the security of your site so you can prevent this from happening.

12. Fix Broken Links

Broken links are bad for user experience so check your site regularly for any broken links. You can use W3C Link Checker or any other similar tool to check for broken links. Once you’ve found the broken links on your site, you can start fixing them. You can either remove the links or points the links to a new relevant URL.

13. Test Your Checkout Process

Last but definitely not the least; you should regularly test your checkout process. If you suddenly experience loss of sales, it’s a good idea to test your checkout. There might be an error that prevents your customers from checking out. Testing also gives you a feel of what your customers go through so you can optimize your checkout. Once you’ve determined that your checkout has problems, you can check out our post on how to fix the most common checkout problems in WooCommerce.

Final Notes

By doing these tasks on a regular basis, you can keep yourself on top of any issues that may occur on your WooCommerce store. If you find yourself overwhelmed by the all these, you can hire someone else to do it. You can also contact us and our team will be glad to assist with any of these tasks.

Are there any other routine maintenance tasks for WordPress and WooCommerce you think should be done on a regular basis? Do you have any suggestions? Let us know in the comments.

How to Add a Hero Image in Storefront

July 1, 2016 By John 36 Comments

The idea of using hero images came about because of issues caused by homepage sliders. Using a homepage slider is discouraged as it will slow down your WooCommerce store and it doesn’t have good conversion rates. If your WooCommerce store running on Storefront has sliders and you are looking for a good alternative, you should consider using a hero image instead.

What is a Hero Image?

To better explain what a hero image is, let’s define what is the “fold” and “above the fold content”. Originally, the fold is a term used in the newspaper industry. Since newspapers are normally folded in half, the upper half of the front page will be the part of the newspaper that is exposed. This is where the most important content is featured, hence the term “above the fold content”. In web design, this is the area of the page that can be seen without scrolling down.

A hero image takes up most of the space above the fold. The trend is to make it large, attractive and relative to the content of the entire site.

It is important that you provide a complete overview of what your company/site is about with just a glance of your hero image. 90% of the time, the hero image has a large text in the center that is related to the branding of the site.

Preparing Your Images

Before you add your image, make sure you have it optimized for web use. You’d want to have the best image quality for the hero image, but you have to take into account the image size as well. As of 2016, the most common screen resolution is 1920x1080px. You should try not to go over this mark. Any excess is just a waste of page size and will just slow down your page load time.

Once you get the right resolution, try to further reduce the image size by down-scaling the image quality. You can actually reduce the image quality without having noticeable pixelation in the image. This is because the human eye can only see limited minute differences in the color changes. Try to strike a balance between having a small image size and having a good looking image. Check out this other post on how to optimize images. Once you are done preparing your image, just upload it to your WordPress site.

Adding a Hero Image in Storefront

To add a full-width hero image in Storefront, we need to use Storefront’s extensive hooks. We’ll just need to insert a few lines of code.

If you are comfortable working with code, you can paste the code below in the functions.php of your child theme. If you are a novice user, we recommend using My Custom Functions plugin to insert the code. Note that one error can cause your entire site to crash.

Copy and paste the code below. Just replace the “/wp-content/uploads/imageurl.jpg” with the URL of the image you uploaded earlier. Width set to 100% makes your image responsive to different screen sizes.

add_action( 'init', 'woa_add_hero_image_init' );
function woa_add_hero_image_init () {
   add_action( 'storefront_before_content', 'woa_add_hero_image', 5 );
}
function woa_add_hero_image() {
   if ( is_front_page() ) :
      ?>
         <div id="hero-image">
             <img src="/wp-content/uploads/imageurl.jpg" width="100%">
         </div>
      <?php
   endif;
}

Your hero image should now appear on your homepage below the main navigation.

If you want to add a link to the shop page or any other url on your image, copy and paste the code below. Just replace the “http://change_me_to_your_url” with the URL you want to link to.

add_action( 'init', 'woa_add_hero_image_init' );
function woa_add_hero_image_init () {
   add_action( 'storefront_before_content', 'woa_add_hero_image', 5 );
}
function woa_add_hero_image() {
   if ( is_front_page() ) :
      ?>
         <div id="hero-image">
             <a href="http://change_me_to_your_url"><img src="/wp-content/uploads/imageurl.jpg" width="100%"></a>
         </div>
      <?php
   endif;
}

Final Notes

Hero images are more effective than sliders in terms of aesthetics. You don’t have to keep using sliders if it’s slowing down your site. Explore more options. Keep your site simple and fast.

If you are still using sliders, you are most likely hurting your site speed. And a slow WooCommerce store will convert less. Your Google rankings could also suffer as a result. It’s time to do away with the slider. Go with a hero image instead.

Was this tutorial helpful? If you have any questions or anything you’d like to add, please let us know in the comments.

Optimize Images on Your WooCommerce Store Before It’s Too Late

October 27, 2017 By John 2 Comments

A lot of WooCommerce store owners complain about their website loading slowly. While a slow website can be optimized to run faster, sometimes optimization can only on do so much if you don’t have the foundations for a fast website. Site speed optimization is not a one-off process. It should be done from the moment the website is created and implemented on a regular basis.

Optimize All Your Images before Uploading

Before you go and use an image on your website, it is important to have these images optimized. Take note where you will use your image and resize it to the actual size of image placeholder. Your image should be no bigger than the size that the image placeholder permits. Anything more than that is just unnecessary load on your server and a few milliseconds of extra page loading time.

It is also important to use an image editing application like Photoshop to remove image metadata and further optimize the image file size. For more information on optimizing images, you can read our guide on how to optimize images for the web. You can also use this online tool to help you optimize your images.

Also, make sure to use descriptive file names. This will help boost your SEO compared to default image files names containing number strings such as IMG20182708 or Image 1.

What If I Did Not Optimize My Images Before Uploading?

If you did not optimize your images before uploading them on your site, it is not too late. There are certain plugins that can help you. The WP-Smush plugin optimizes images as you upload them on your site. It can also optimize your images in bulk. However, the plugin can only do so much if you uploaded very large images.

If the images you uploaded are too large, it might be best to reupload an optimized version of that image. If you’ve had your site for years, this could mean a lot of work. There are no shortcuts but you can start with the images on the most important pages on your site. These include your home page, other landing pages, and best-selling products. Should you need help optimizing your site’s images, you can contact the Wooassist team to help out.

Optimizing Your Product Images

In optimizing your product images, you will need to strike a balance between file size and image quality. Better images will have a bigger file size. The importance of image quality has especially been highlighted since WooCommerce started to implement the zoom functionality when hovering over product images. You now have to test zooming in on your images if they would still look good when zoomed. You don’t want your customers seeing a pixelated image when they try to zoom in on your product. Not all stores are alike so you will need to test what level of quality will work for your store.

Do Away with the Image Sliders

If you have large image sliders on your home page, you might want to consider removing them. Image sliders are resource-intensive and can really slow down a site. Combine that with unoptimized images, and your site will be a top contender for the slowest site on the web.

Sliders do not help your site convert. In addition, it is bad for your site’s user experience. There is an overwhelming amount of data that back this claim. Just check out these articles below.

What Should I Use in Place of Sliders?

Image sliders can cause banner blindness especially when your sliders look too much like ads. You can replace your image sliders with a single hero image with a large call-to-action. Compared to a slider which overwhelms your visitors with multiple calls-to-action, a single hero image will contain just one call-to-action. This means it will be easier for you to convince your visitors to take the action that you want them to take. When creating the hero image, make sure it does not look too much like an ad. Otherwise your visitors will just ignore it. The Wooassist team can help you set up a hero image on your store.

You can now start optimizing the images on your WooCommerce store. If you have any questions, you can contact us or let us know in the comments below.

Conversion Rate Optimization for WooCommerce – An Infographic

August 24, 2017 By John Leave a Comment

As a WooCommerce store owner, you want to make your store as profitable as it can be. This is where conversion optimization comes in. We created this easy-to-follow infographic to help you optimize your store’s conversion rates. Should you ever need help getting some of these things done, just send us a message and we can help you out.

If you want to share this infographic on your site, just paste the code below on your site’s text/HTML editor.

<a href="https://wooassist.com/conversion-rate-optimization-for-woocommerce-an-infographic"><img class="aligncenter wp-image-3020 size-full" src="https://wooassist.com/wp-content/uploads/2017/08/Conversation-Rate-Optimization-for-WooCommerce-An-Infographic-by-Wooassist.png" alt="Conversion Rate Optimization for WooCommerce - An Infographic by Wooassist" width="700" height="4428" /></a>

How to Outsource Creating Products for WooCommerce

October 14, 2015 By John Leave a Comment

Outsourcing tasks can make your e-commerce store more profitable. When managing a WooCommerce store, you will need to add new products regularly. Sure you can do it yourself but shouldn’t you be doing more important things? When you outsource creating products for WooCommerce, you save precious time.

outsource-creating-products

Before you outsource creating products for WooCommerce, you have to get your information organized. This ensures that the task will be done properly.

Here are a few things you should prepare before handing over any WooCommerce product creation task.

Documentation

You need to have a “workspace” where can you document all the elements of the products. This can be in project management software like Asana or Basecamp or a Google doc. We at Wooassist have created a spreadsheet template that you can use for handing over product creation tasks to a WooCommerce expert. You can download it here. Just fill it with the information on the products that you want to add to your WooCommerce store.

After you have the same contractor do this for you a few times and they are starting to get comfortable with your product range, they will be able to fill out a lot of this spreadsheet themselves. You will be able to just send them the links to suppliers and competitors sites and save you even more time.

Optimizing Images for Product Pages

When selling online, having good images is crucial, since people need to see what they are buying. Your contractor should have intermediate image editing skills.

optimizing-images

It is best practice have uniform image sizes on your site. When you set product image dimensions in WooCommerce settings, always keep your images to that same resolution and have this written clearly on your product creation documentation. Check out this post to learn more about optimizing images for web.

Writing Persuasive Copy

If you are at all serious about selling your products online, then you should have persuasive copy. We recommend outsourcing a professional copy writer. Putting a great deal of attention to writing persuasive copy for your products will help you convert more. For creating good product descriptions, you can check out our post on how to write persuasive copy.

persuasive-copy

You can give your product creation contractor a go at creating the copy and you might be pleasantly surprised, but more than likely you will need the help of a professional. Once you find a copy writer you are comfortable with, your product creation contractor can manage this specialist saving you time.

Different Types of Woocommerce Products

In WooCommerce, there are different product types: Simple, Grouped and Variable products. If you are not familiar with these product types, you can check out the WooCommerce Documentation for Managing Products.

Simple Products

Simple products include: product name, SKU, inventory, price, sale price (if you are offering a discount), category, product tags if any, long and short product description, and any specific instructions.

simple-product

Upload your images to a file sharing website and be sure to include the download link in the spreadsheet. Before you do that, make sure you use folders and appropriate file names for easy identification. There is a field where you can put the link in the spreadsheet we created. For sharing files, we recommend Dropbox or Google Drive.

Grouped Products

For Grouped Products, it becomes a bit more complex as this involves grouping two or more simple products. However, the information that you need to provide is no different from the information required for simple products.

grouped-products

If you are going to set the simple products as “not viewable individually”, you won’t need to provide images or descriptions for each simple product. You only need to state the product name, price and inventory for the simple products. All the other information should go to the grouped product.

If you are going to make each simple product viewable then it makes sense to outfit each simple product. And that means complete images, complete product descriptions and everything else necessary.

Variable Products

Variable Products deal with different product attributes. When sending information to your WooCommerce product expert, you should include the attributes for the product.

variable-products

For example, if you are selling shoes, you can have several product attributes such as size, color or type (laces or straps). That will result in multiple variations of the product. You need to provide information for each product variation. In some cases, different product varieties will have different prices. So make sure you include the price for each product variation. If you downloaded the spreadsheet we prepared, you just need to fill in the details.

Recommended Websites to Outsource Work

There are a lot of websites out there that provide freelance services and they have a lot of WooCommerce experts. We can recommend Elance and Upwork, formerly known as Odesk. And of course, we also highly recommend our team of WooCommerce experts at Wooassist. Our expert team from the Philippines can help you out with whatever problems you are having with your WooCommerce store.

Summary

This process takes time to develop. Clear documentation is the key, followed closely by developing a good relationship with a Woocommerce product expert. The better and more familiar your contractor is with your products the easier it will be for you to create the documentation.

It will take you longer to create these processes than to do the task yourself initially, but will save you hundreds of hours in the long run. I have 2 Woocommerce stores that sell physical products and I have not created a product myself for over 3 years. I plan on keeping it that way.

1. Create Regular Website Backups

2. Update WordPress, WooCommerce, Themes and Plugins

3. Update WooCommerce Template Files

4. Change User Passwords

5. Optimize Your Product Images

6. Approve and Respond to Product Reviews

7. Approve and Respond to Blog Comments

8. Test Your Contact Forms and Email Opt-in Forms

9. Optimize Your Database

10. Test Your WooCommerce Store’s Speed

11. Scan Your Site for Malware

12. Fix Broken Links

13. Test Your Checkout Process

Final Notes

What is a Hero Image?

Preparing Your Images

Adding a Hero Image in Storefront

Final Notes

Optimize All Your Images before Uploading

What If I Did Not Optimize My Images Before Uploading?

Optimizing Your Product Images

Do Away with the Image Sliders

What Should I Use in Place of Sliders?

Documentation

Optimizing Images for Product Pages

Writing Persuasive Copy

Different Types of Woocommerce Products

Simple Products

Grouped Products

Variable Products

Recommended Websites to Outsource Work

Summary

Get started today

Get 2 Hours of FREE SUPPORT

Free eBook

Quick Links

Wooassist

Connect