WooCommerce Tag Archives - Page 10 of 15

7 Things You Can Do to Increase the Trust Rating of Your WooCommerce Store – An Infographic

August 23, 2017 By John Leave a Comment

We listed down the 7 things that you can do to increase the trust rating of your WooCommerce Store in one handy infographic.

If you want to share this infographic on your site, you can use the code below and paste it in your HTML/text editor.

<a href="https://wooassist.com/7-things-you-can-do-to-increase-the-trust-rating-of-your-woocommerce-store-an-infographic"><img class="aligncenter wp-image-3017 size-full" src="https://wooassist.com/wp-content/uploads/2017/08/Increase-Trust-Rating.jpg" alt="Increase the Trust Rating of Your WooCommerce Store - An Inforgraphic by Wooassist" width="700" height="2030" /></a>

How Often Should I Update My WooCommerce Store?

July 20, 2017 By John Leave a Comment

How often should I update my WooCommerce store? We get that a lot from our clients. The ideal answer is that site updates should be done whenever there are critical security updates to keep your site secure.

For regular scheduled site updates, we have found that monthly updates are ideal. Weekly updates may be too frequent. There usually isn’t a lot to update in one week’s time. Every two or three months is way too long that the site remains vulnerable to security threats. Monthly updates are just about right. Note that even if monthly updates are being done, site owners must promptly update their WooCommerce stores should a critical security update come up.

Should I Even Update my WooCommerce Store?

We sometimes get this question too. It is true that updating your WooCommerce store can break your site. However, not updating your WooCommerce store can also eventually break your site. So essentially, it is still best to do the updates.

How to Prevent Issues When Updating My WooCommerce Store?

There is no sure-fire way to know if there will be any issues on your site as a result of updates. The best you can do is to test the updates first on a development site to see if any errors would occur. Also, you can stay on top of what the WordPress and WooCommerce developers are doing. You can sign up to newsletters or follow developer blogs to stay updated. You can check out the WooCommerce changelogs and the WordPress changelogs too.

When major updates are released, it might be ideal to wait a few weeks before updating your site. This is to give WordPress, WooCommerce and other plugin and theme developers sufficient time to update anything that was broken during the update.

What to Do Before Updating My WooCommerce Store?

There are a few steps you can take before updating your WooCommerce store. First, you can test your site updates on a development or staging site. Many hosting providers, such as WPEngine, provide their clients a staging environment for testing site updates. If your hosting provider does not provide a staging environment, don’t worry. You can still create a staging site manually.

After applying the updates on the development site, the next step is to check if the site has any broken features. Some important elements to check are:

Home Page Formatting
Product Page Formatting
Product Image Gallery
Add to Cart and Checkout Process
Contact Forms
Email Signup Forms

If you find that anything is not working, you can proceed to fix or forward to your developer to fix. If you do not have an in-house developer, you can contact us and we can help you fix the problem. If there are no problems, you can proceed to the next step.

The third step is to back up the live site. WPEngine features a one-click backup. You can also use a plugin for creating backups. We recommend Updraft Plus plugin which also features a quick restore feature in case something goes wrong.

Once you have created a backup, you can proceed to update WooCommerce, all other plugins, themes and the WordPress core. When that’s done, you need to check if anything is broken on the live site. If everything is working and there are no formatting issues, then that’s it. You have successfully updated your site. If something gets broken, you can attempt to fix the problem or restore your backup.

What to Do When Something Breaks When Updating Your Site?

The WordPress infrastructure makes updating your WooCommerce store easy. But dealing with the complications that come with updates can be very daunting, especially if you are not a developer. As such, we recommend working with a developer when doing your site updates so that any issues can be resolved quickly. If you do not have a full-time developer on board, you can contact us so we can get our experienced WooCommerce developers to help fix any issues.

How to Change Fonts in Storefront Theme

April 13, 2016 By John 8 Comments

UPDATED 19/06/2017: Revised steps in adding Google Fonts

By default, Storefront theme uses the Helvetica Neue font. This default font is simple and simple is good. However simple may not always fit the design that you are aiming for. You may want to use a different font. But how do you go about changing the theme’s font? In this post, we’ll teach you how to change fonts in Storefront theme using Google Fonts.

What Type of Fonts Should I Use?

There are fonts that are expressive and stylish. There are some that just work in a lot of situations. Even though you would want to express yourself with a certain type of font, you would also want to use the font type suitable for your needs. The key is to find the right balance.

Four Basic Types of Fonts

Serif

Serif fonts are characterized by small lines attached to the end of a stroke. These small lines are called serifs. In general, they are thought to be traditional font types. Serif fonts are easier to read in print so they are preferred for use in print.

Sans-serif

Sans-serif literally means ‘without serifs’. These fonts are modern and minimalistic. Sans-serif fonts are recommended for web publishing.

Scripts

Also called cursive font types, Scripts mimic the cursive handwriting. They generally have connecting letters. This type is often portrayed to be feminine and elegant.

Decorative

Halloween fonts, Christmas fonts or the iconic Star Wars font, there are a lot of fonts out there that fall under the decorative type. They are novelty, used for specific purposes. As the name suggests, decorative fonts should only be used as for decoration and never for the main copy.

Serif vs Sans Serif?

It’s best to choose fonts wherein readers won’t notice the font but the message. Decorative and scripts type fonts can be a distraction when reading content. Hence, serif and sans-serif fonts are typically used in the body or in the copy.

Let’s break down the difference between Serif’s and Sans-serif type fonts.

The purpose of the serif is to guide the horizontal “flow” of the words. These little decorations increase the contrast of the spacing. The serif helps the eyes and the brain in distinguishing each chunk of words as one making it easier to read.

This is not the case for texts made for the web though. Because of the limited dot per inch (DPI) in our monitors, the thick and thin lines of the serif types may not be as recognizable in small texts. This is why a simplified font is needed. Minimalist, modern and simplistic sans-serif is suitable for this purpose.

Serif fonts are good for reading that’s why it is mainly used in books, newspapers magazines and other print media. On the other hand, online publishing favors the use of sans-serif fonts because of the DPI limitations.

In some cases Serif works just fine even for online publishing. A good example for of a website using Serif fonts is the The Guardian. We can say the serif font type fits the news site’s identity as an online newspaper. The key to maintaining readability when using a serif font for online publishing is the proper use of font sizes and line spacing. This removes DPI problem.

So what font should you use for your WooCommerce store? The correct answer would be a sans serif font and this is true in most cases. However, you should not let this limit your design choices. If you think a serif font will work towards your purpose, then use it by all means.

What is Google Fonts?

Google Fonts is a free service by Google that makes it easier for websites to use custom fonts. If you want to use a particular font from the Google Fonts directory, you only need to copy a piece of code and Google will host the font for your website. If you want to change your font easily, Google Fonts is one of the best solutions out there.

Google Fonts Pros and Cons

The Pros

Google Fonts are released as open source and can be used for any commercial or non-commercial project for free.
It is easy to install and set up.
Analytics show most popular fonts by usage across the web

The Cons

The font is hosted outside your site. Meaning, it could add a slight page loading time. Actually, Google displays a gauge for each font’s impact on page load time.
Open source fonts can have some quality issues. Except for the popular ones, most of the fonts in the directory are made by the community. Some may have been poorly executed. Issues like bad scalability, fonts not showing on iOS, and missing glyphs may arise depending on the font.

How to Find the Right Google Font for You

To help you choose the right font for your WooCommerce site, just go to Google Fonts then use the extensive font preview. You can preview the fonts as a word, sentence, paragraph or as a poster. This will help you decide what font to use.

Check a font type’s readability using the Paragraph preview. Here is Lato (a Sans-serif type) with Slabo (a Serif type) previewed in a paragraph.

For headings and other large texts, use the Poster preview.

If you are looking for font pairs that look good together, click the ‘pop-out’ button, then the Pairings tab. Google offers a lot of suggestions there and you can preview it in multiple layouts.

When you have decided what fonts you want to use, add them to your collection and click ‘Review’. Go to the ‘Test Drive’ tab and see your selected fonts in action.

How to Add Google Fonts in Storefront

Implementing Google Fonts on your website is as simple as copy and paste. Here is a step-by-step instruction.

Choose a font that you want to embed. Select the standard code and copy.
Add a hook function to your child theme’s functions.php. Note that using a child theme is important here. If you don’t use a child theme, the changes you make will be lost when you update Storefront. Alternatively you can use the My Custom Functions plugin and paste the code snippet there.
```
add_action( 'storefront_header', 'jk_storefront_header_content', 40 );
	function jk_storefront_header_content() { ?>
		// Replace this line with the copied google font code here
		<?php
	}
```
*Note the part where you need to insert the code you got in Step 1.

After this, your WooCommerce site is now capable of using the fonts you’ve selected.

How to Apply the Fonts on the Contents

You still need to add the font to your CSS for the fonts to be live on your site. The code below will replace the default font in Storefront to ‘Open Sans’. You just need to replace the font name with the font that you added in the previous section and then paste the code to your child theme’s styles.css. You can also use Simple Custom CSS plugin to add the CSS to your site and not have to worry about it disappearing when you update your theme.

h1, h2, h3, h4, h5, h6, body, button, input, textarea {
	font-family: 'Open Sans', sans-serif;	
}

If you want to use a different set of fonts for your headers, use the code below instead. In this case, the headings will have the Slabo font and the rest will have the Open Sans font. Just replace the font name with the fonts that you added.

body, button, input, textarea {
	font-family: 'Open Sans', sans-serif;	
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Slabo 27px', serif;
}

Note that the above codes may not work if you are using a child theme that uses a more specific selector. It will give more priority to Storefront’s default selectors. You will need to update the selectors with the selectors used in your child theme. Check out this neat guide for a firm understanding on how CSS specificity works. You may need to apply a few more custom CSS codes to get the right look and feel for your site.

And that’s how you change Storefront theme’s font. Hope this article helped you out. If you have any questions or if this didn’t work for you, let us know in the comments. We’ll do our best to help.

How to Revert to the Old WooCommerce Product Gallery in WooCommerce 3.0

April 11, 2017 By John Leave a Comment

WooCommerce 3.0 is now live. In this version of WooCommerce, the product gallery receives a major overhaul. This includes zooming on product images, more intuitive behavior, improved mobile view and function, and the ability to display the image’s true size on click.

The updates are promising as you can see from the video below. However, the zoom functionality poses a problem for many WooCommerce store owners.

Many WooCommerce Stores Don’t Have Hi-Res Images

The zoom function for the product gallery in single product pages can become a problem for low-res images. Many WooCommerce store owners would not have high-resolution images uploaded to their WooCommerce stores. This is because high-resolution images are bad for page load speed. Large images can slow down a site. Hence, when the zoom function rolls out, low resolution product images will appear grainy and pixelated when zoomed.

How to Revert to the Old WooCommerce Product Gallery Zoom Function — Zoom function upon mouseover in WooCommerce 2.7

To solve this problem you can choose to revert to the old product gallery. While you use the old gallery, you can work on adding high-resolution product images to your store.

old-gallery_How to Revert to the Old WooCommerce Product Gallery — Old product gallery

Reverting to Old WooCommerce Product Gallery

Reverting to the old WooCommerce product gallery can be done by using the Revert WooCommerce Image Gallery plugin. Simply install and activate the plugin and your WooCommerce product gallery will automatically revert to the old product gallery. There are no complicated settings to tweak.

How to Update to the New Product Gallery

When you finish uploading high resolution images, simply deactivate or uninstall the plugin. The product gallery will automatically update to new product gallery. You can also choose to just keep the plugin if you want to keep the old product gallery.

We hope this tutorial is helpful.

Is your store ready for WooCommerce 3.0? Do you have questions about the WooCommerce 3.0 update or the Revert WooCommerce Image Gallery plugin? Let us know in the comments.

Custom Development for Your WooCommerce Store

March 20, 2017 By John Leave a Comment

One of WooCommerce’s best-selling points is its customizability. But as extensive as the WooCommerce plugin database is, sometimes it’s still not enough. That’s where custom development for your WooCommerce store comes in. With custom development, we open a whole new world to your website’s capabilities. Still, as powerful as it is, it doesn’t come without its challenges.

Customizability

What exactly do we mean when we say custom development? Well, it’s like a custom tailored suit – it is tailoring code according to your exact specifications. With that, we’ll have precise control of the end-result. It is making changes to your website using configurations beyond what the software or plugins are originally capable of.

Sometimes you may find that WooCommerce is lacking a certain functionality that you require. You search for a plugin and there’s no viable plugin for it. In cases like these, we can custom code to add that functionality to your WooCommerce store. If you don’t like how a WooCommerce plugin works, we can add custom code to tweak it and make it work the way you want it to.

However, this does not come without its challenges.

Compatibility

In a vacuum, programming is predictable. For example, if you only had to deal with WooCommerce and you wanted to change something, it is simple and straightforward. However, in reality, a website exists as a combination of different software working together. What should be a straightforward change to WooCommerce could become unpredictable. Other installed plugins may behave differently as a result of the custom code.

These complications can create additional work but solving them is a necessary step in custom development.

Iterative Nature

Other obstacles to custom development are unexpected bugs and simple errors.

Custom development is adding short pieces of software to the site. And as with all software, the first release rarely turns out as perfect from the get-go. Even with thorough testing, not all cases can be tested. In some instances, the bugs can pop up at an irrelevant area of the website.

Errors are also common, especially with complex customizations. At Wooassist we have tested over 500 developers in our recruitment program and trialed almost 100 of them. We are left with the cream of the crop and have 3 solid developers. They are the top one percentile, but they are not machines. They are not perfect. These unexpected bugs and mistakes go hand in hand with custom development. To get things right, several iterations may be necessary.

More meticulous testing is advised, but it will also cost more. It is up to the client to set the balance between testing and cost.

Maintenance Costs

Another challenge for custom development is its dependency on the parent software. This includes – either WordPress itself, WooCommerce or the other plugins you have installed. There’s the possibility that updates and new software versions will affect your custom development.

This is because the custom code has been specifically designed for the current setup at the time. If the setup changes, then the custom code needs to be modified as well. This means that custom development is not a build-it-and-leave-it process. It needs regular maintenance to keep up with the updates of the original technology.

So should you still get custom development for your WooCommerce store?

It depends.

Most of the time, the ready-built plugins and extensions for WordPress and WooCommerce are enough to get a website up and going. There are thousands of extensions, both free and paid. Chances are, the functionality you are looking for might already be available. If it comes down to a choice between a paid plugin and custom development, sometimes the paid plugin is more advisable. It is much safer and easier to adjust your expectations and solution compared to custom code.

Business owners can be guilty of coming up with less than optimal ideas and then investing in development to implement these. A much better process is to invest more in researching the problem and the range of solutions available. Find some experts, send them the objective, the problem and your proposed solution and let them do some research for you. There is often a much simpler and cheaper solution.

Now what if there are no plugins for the functionality you require?

This is when you have to decide whether the functionality is worth the challenges and costs that come with custom development. If it is a functionality that gives the site admins the capability to spend less time working on a task, then it will pay itself off in the long run. If it improves customer experience and increases conversions, then it should also be an acceptable cost.

You can also choose the option that requires the least customization. Strike a compromise between the functionality you require and functionality of the original software. Bend the software less to avoid complications. All in all, custom development is not advisable for all projects. While challenging, custom development tells us that there will almost always be a solution. For most website owners, custom development is a necessary step in creating the website that they envision. To pursue this path, the site owner must accept the challenges of custom development.

Examples

1. Here’s an example of a WooCommerce checkout that we’ve customized. Instead of the standard WooCommerce checkout page, we’ve separated certain sections grouping them together. We ended up with four sections, namely Billing Details, Shipping Details, Payment and Confirmation.

During the process, we encountered an error that cost some time to troubleshoot. So apart from the customization itself, we also needed to deal with unexpected complications.

It turns out that it was caused by a conflict with an idle plugin activated on the site. Deactivating the plugin fixed the issue.

2. Here’s a product page that we’ve customized according to our client’s specifications. For this particular project, not only did we have to customize the product page, we also had to migrate an existing database of non-WooCommerce products to a WooCommerce website. This was complex as the existing products had attributes not compatible with WooCommerce.

The only viable solution we could think of was to make use of separate paid plugins to manage the attributes. In the end, the client had to purchase a separate premium plugin, WP All Import and the Advanced Custom Fields add-on. Unexpected costs like these may deter some website owners from custom development. However, these are often necessary.

3. One of our clients asked for the functionality to create a list of the site’s most regular customers. She had installed a plugin for it. However, upon checking, the plugin has not been updated in over 2 years. As there are no alternative plugins, we figured that the most viable option would just be to build custom code for it.

The custom development itself was straightforward. Still, we needed to strike the right balance between spending time creating the code and spending time testing for errors. In the end, we were able to complete the custom development with the bare minimum in functionality in just a bit above 2 hours.

Final Advice

Here at Wooassist, we bill the work we do by the hour. So when it comes to custom development for your WooCommerce store, more complications can mean more time spent than expected. Most of our clients still prefer this arrangement as it is still cheaper than fixed price custom development work. Also, it is easier to arrange changes to the project along the way. Agencies that offer fixed-price quotes for free usually offer them at a premium as the client is also paying for the time when they didn’t get the work. And once the project has started, it is difficult to arrange changes without incurring additional charges.

But for those that would still prefer a fixed price quote, we can offer our Custom Project Roadmap product. When you purchase it, we will spend time researching, analyzing and defining the scope of the problem and solution. After these, we will offer a fixed price quotation. By having a clear strategy that is pre-assessed to be viable, we can minimize the complications. And when complications do arise, we won’t be billing you anymore for additional charges so you have control over the expense.

« Previous Page
1
…
8
9
10
11
12
…
15
Next Page »