how-to Tag Archives - Page 8 of 15

How to Enable Apple Pay for WooCommerce

June 16, 2017 By John 2 Comments

What is Apple Pay?

Apple Pay presents a new and more convenient way to pay for mobile e-commerce purchases. Since Apple does not share your credit card details when you pay, it is safe, secure and private. Currently, Apple Pay is already accepted in a number of stores and websites. You can check this list of merchants that accept Apple Pay.

Why Add Apple Pay to Your WooCommerce Store?

Early adopters of Apple Pay have experienced an increase in conversion rates of up to 80%. The checkout process is made much faster as payment only requires a fingerprint check as opposed to entering your credit card number.

What Do I Need to Install Apple Pay on WooCommerce?

To install apple pay with WooCommerce, there are a few requirements. First, the store must support Stripe payments. You’ll also need the WooCommerce Stripe Extension which is free. Stripe is currently available in 10 countries, namely, Australia, Switzerland, United Kingdom, Hong Kong, Singapore, Canada, Spain, France, New Zealand, and the United States.

How to Enable Apple Pay on Your WooCommerce Store

Just follow the steps below to enable Apple Pay on your WooCommerce store. If you have already set up the WooCommerce Stripe Extension, please proceed to Step 7.

1. Install and activate the WooCommerce Stripe Extension. You can download it here or just search for it in the plugins page.
2. Head over to WooCommerce > Settings > Checkout > Stripe and check the “Enable Stripe” box. Make sure you disable “Enable Test Mode” if you want to go live. If you are already accepting payment through Stripe, go to Step 7.
3. Input your Live Secret Key and Live Publishable Key. You can get the information from your Stripe account.
4. Input the Statement Descriptor. This is the text that will appear on your customer’s credit card statement.
5. Choose whether to “Capture Charge Immediately” or not. If you choose not to charge immediately, you will need to manually initiate the charge through the WooCommerce order page.
6. You can choose to “Enable Stripe Checkout” for the plugin to create a pop-up that requests details. Choose this option if you want to accept Bitcoin.
7. To enable Apple Pay, tick on the Enable Apple Pay box.
8. Under “Apple Pay Button Style”, you can choose what color you want the Apple Pay button to be.
9. Under “Apple Pay Button Language”, you can enter the ISO code for the language you want to use. For English, just use “en”.
10. Click on Save Changes when done.

That’s it. You are now ready to accept Apple Pay payments on your WooCommerce store.

If you are having problems enabling Apple Pay on WooCommerce, let us know in the comments.

10 Things You Can Do Right Now to Improve Your WooCommerce Store

October 10, 2017 By John Leave a Comment

As a WooCommerce store owner, your goal is to make your business as profitable as it can be. Here, we list down 10 things that you can do today to improve your WooCommerce store.

1. Add a call-to-action button on your home page

Adding a call-to-action button on your home page encourages your visitors to take whatever action you want them to take. You can direct them to click on your shop, sign up to your email newsletter, send you an email, call you, or add a product to the cart.

2. Add your contact details

Making sure that your contact details are immediately visible will increase your site’s trust rating. It can be your email or phone number. You can even add your store’s address if you have a physical store.

3. Add an email capture form

Getting your customer’s emails will allow you to send newsletters or special offers to those who sign up.

4. Remove distractions from your checkout page

Removing distractions from your checkout page will reduce cart abandonment. When a customer reaches your checkout page, you don’t want them clicking anything else except that “Pay Now” button.

5. Add related products to your product page

Adding related products to your products page will encourage your customers to purchase more items from your store. This will increase your average order value.

6. Offer free shipping

Not everyone can offer free shipping. But if you are able to, free shipping can really amp up your conversion rates. You can also offer free shipping with a minimum order value or for specific locations only. Make sure your visitors know you offer free shipping by placing a notice in a prominent area of your site.

7. Optimize your product copy

There are a lot of ways to optimize your product copy. You can optimize your copy to appeal to customers by emphasizing on the problems that your products can solve. You can also optimize your product copy to include technical details. Lastly, you can optimize your copy for ease of reading. How you optimize your product copy really depends on your product and your customer profile. You can use Hemingwayapp to check your copy’s readability score.

8. Optimize images on your WooCommerce store

When uploading product images, you must first optimize your product images to make sure you are uploading the correct image sizes. To determine the correct image sizes for your theme, you will need to use the “Inspect Element” feature of your browser. You will then need to go to WooCommerce settings to set the correct image size. Uploading anything bigger than the image placeholder’s size is a waste of resources and will just slow down your site. You can learn how to optimize images for the web in this blog post.

9. Remove sliders and use a single hero image with a call-to-action

Sure, sliders look good. But the truth is, they may actually do more harm than good to your site. Sliders can really slow down a site and a slow site is bad for SEO and conversion rate. Also, sliders can confuse customers and makes for bad user experience. Your website must send a clear message on what you want your customers to do. A slider just confuses your customers with various images that look like advertisements.

10. Make your site is mobile responsive

If you have not updated your site’s design for years, it might not be mobile responsive. This means that your website does not adapt to different screen sizes which makes browsing on a mobile device difficult. This is not good for your site’s user experience. Also, having a mobile responsive WooCommerce store is an advantage in terms of SEO. You can address this by using a responsive theme such as Storefront or the Genesis framework with a Genesis child theme. Both these themes are compatible with WooCommerce.

If you need any help getting any of these things done, you can contact us and we will help you get these sorted. If you have any questions, you can let us know in the comments section.

Why You Should Use a Development Site for WooCommerce

August 14, 2017 By John Leave a Comment

Using a development site (or a staging site) is best practice when working with websites. A development site allows web developers to safely test new features and updates without affecting the live site.

In the absence of a development site, developers will need to test new features and updates on a live site. This is not recommended because such actions can cause critical errors that may break the functionality of the site. In some cases, adding new features and new updates can cause a website to go down. Without a proper backup, the results could be devastating especially for e-commerce stores.

Testing Ground When Adding New Site Features

If you want to add some new functionality on a live WooCommerce store, it is best to test this first on a development site. Make sure that everything is working before you roll out the new functionality to your customers.

You will most likely have a web developer who will help you add the new functionality that you want. If this is the case, the developer will recommend doing the changes first on a development site. On the off-chance he doesn’t, talk it over with your developer and recommend testing the new functionality on a development site. After adding the new feature, do some user testing on the development site to ensure that everything is working as intended and that no other existing features have been affected.

A Development Site Prevents Errors on Live Site During Site Updates

Aside from when adding new functionality to your WooCommerce store, you should use a development site when updating your site. Doing site updates on your live site can break your site so it is always best to test your updates on a development site. This is especially true when you are dealing with major releases of WordPress and WooCommerce.

How to Create a Development Site

But how do you create a development site on your server? Some hosting providers such as WPEngine provide a staging environment for their customers. If you do not have a development site, you can create one manually. However, do note that creating a development site is a complex process that includes tinkering with your site files and the database. If you are not confident in working with your site files and the database, scroll down to the next section. If you are confident with editing your site files and database, just follow the steps below:

1. Log in to cPanel.

2. Go to your File Manager and go to the public_html folder. Create a ‘dev’ folder there.

a. Copy your WordPress files from your current directory to the ‘dev’ folder you just created. Select all WordPress files and folders.

b. Click Copy on the top menu.

c. Type in the directory where you want to copy the files into. In this case, the directory is /public_html/dev

3. Create a database. Note: Icons may differ but the names of the items should be the same.

a. Go back to the cPanel home, Click the MySQL Database Wizard under the Databases heading.

b. Next to New Database enter a name for your database and click Next Step.

c. Next to Username enter a username. Enter and confirm a password and then click on Create User. Note these down as you will need it later.

d. On the next page, you will need to assign privileges for the user on the database. Check the box next to All Privileges and then click Next Step.

4. Export your current database.

a. On the cPanel Home, click on phpMyAdmin icon under the Databases heading.

b. Select the database to export. Click on the database name you are working with in the left menu.

c. Click on Export option found in the tabs across the top of the screen.

d. Click on the radial button for Quick.

e. Next, you will need to click on the format of the export file. By default, it should be on SQL, so you don’t need to change anything.

f. Click on the Go button to start the export.

g. You will be prompted to either open or save the file. Choose the option to save the file and then save it somewhere you’ll remember.

5. Import your Database to the new database you created.

a. Still on the phpMyAdmin screen, on the left side, you should see the name of the new database you created earlier for the dev site.

b. Click on the database you created and click Import in the top menu.

c. Under File to Import, click Browse and select the backup file you previously created. You need to locate where you saved it on your computer.

d. Click Go at the bottom right. Wait for the import to finish.

e. When the database has been imported successfully, you should see a message that the import has successfully finished.

6. Configure the wp-config.php file for the dev site.

a. Click on File Manager located in the Files section of cPanel.

b. Navigate to the folder to where you uploaded WordPress.

c. Click the wp-config.php file, then click the Edit link on the top menu.

d. On the edit screen, change the values in the image below to the values you set for the new database you created earlier.

7. Change the site URL for the dev site.

a. The site URL is stored in the WordPress database. In order for the site to load as a dev site, the site URL will need to be changed to the subfolder URL, eg. example.com/dev

b. Go to phpMyAdmin. Select your WordPress database. Then select your wp_options table.

c. Your wp_ prefix may differ depending on your install settings.

d. Click Edit beside either the siteurl or home entries.

e. Enter in your new value in the option_value field, then click Go.

8. Ensure that image links in your pages and posts are also changed.

a. These are in the database and not connected to the site URL so they will need to be changed separately.

b. Using the sidebar again, find and click on the wp-posts table.

c. Look to the top of the screen and you will see several tabs that run across the page. Click on the SQL tab.

d. You are now on a MySQL editor screen. In the code area, copy the following bit of MySQL.

UPDATE wp_posts  SET post_content=(REPLACE (post_content, 'old url','new url'));

e. Be sure to replace <old_url> with the old sitename and <new_url> with the new site name. For instance, our original site was domain.com and the new test site will be at domain.com/dev so the code should appear as below:

UPDATE wp_posts SET post_content=(REPLACE (post_content,  ‘domain.com ',’ domain.com/dev '));

f. Click on the Go button to run the code and change the URLs for all images in the posts. This will also affect any other ‘hard coded’ links that were in the posts that pointed to the original site.

9. Update permalinks.

a. You can now login to your development site’s admin panel and update permalinks with the current settings. Just click update button.

10. Hide dev site from search engines.

a. Go to Settings > Reading page on backend, and make sure that the dev site is set to hide for search engines

b. If you are using WordPress SEO plugin by Yoast, you should turn off the sitemap functionality as well.

Create a Development Site Using a Plugin

If the steps in the previous section were too much to swallow, there are several plugins that you can use to create a development site. You can use Duplicator or WP-Staging plugin. Just follow the instructions on the plugin page and you should be good to go.

We hope this article can help you create your own development site. If you need help setting up a development site, the Wooassist team can help out. Just drop us an email. Or if you have questions, you can leave a comment below.

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 Add a Top Bar in Storefront Theme

July 29, 2016 By John 12 Comments

The release of Google’s Material design started the “top bar” trend. It was used mainly on mobile user experience (UX) designs but it found its way into desktop design. In this article, we’ll teach you how to add a top bar to the Storefront theme.

What Elements Can you Add to the Top Bar?

The top bar has been used in a variety of ways, depending on the UX design or the information you want to highlight. Let’s enumerate common items we see on the top bar.

Promotions – This can be anything from a sale to a new product release. The top bar is a good noticeable area that you can use to post your promotions and other offers.
User Login/Logout – When users want to log in or out, their eyes will scan the top right corner of the page to look for the link. Because of this, it makes sense to place the link in the top right corner.
Social Links – The top bar is a common location for the site’s social media profile links.
Mini Cart – The mini cart has a very important role in the UX design of e-commerce stores. It is an important element to have either on the main navigation or the top bar.
Search Bar – The search bar is also a crucial piece in the UX design of most websites and it can be positioned in the top bar.
Subscription Form/Link – Placing the subscription form on a very prominent location like the top bar draws the attention of your visitors to the form.
Quick Links Menu – Quick links can be any important link that you want your visitors to see or something that your visitors will be looking for. Some common quick links are My Account, Shop, Terms and Conditions, Privacy Policy, About, Contact and FAQs.

Depending on your site, you can use the top bar to contain other elements as you see fit.

How to Add a Top Bar to Storefront

To add a top bar to Storefront, you can use the Storefront Top Bar plugin. Our developers at Wooassist developed this plugin specifically for Storefront which adds two widget areas on top of the header.

Getting Started

Install and activate Storefront Top Bar in your WordPress Dashboard.

After installation, go to Appearance and click on Widgets. You should find two additional widget areas namely Top Bar 1 and Top Bar 2. These are the left and right widget areas on the top bar. You can add any content here just like in any widget area. Just make sure it looks good within the small space provided.

Adding a Simple Text

To add text to the top bar, find the text widget and add it to the top bar widget area. After that, you can just add any text in the text widget.

Adding a Menu

To add a custom menu to the top bar, you should first set up a custom menu in Appearance > Menu. After creating a menu, go back to the widgets area and add ‘custom menu widget’ in the top bar widget area. Select the menu you’ve just created and then click Save. Your custom menu should now appear in the top bar.

Adding a Subscription Form Shortcode

You can add shortcodes using the text widget. In this example, we are using Mailchimp for WordPress. The plugin allows for creating a custom form which can be linked to your Mailchimp account. If you want to follow along and are wondering about the HTML markup of the subscription form in this example, you will just need the input type email and the submit button.

<input type="email" name="EMAIL" placeholder="Your email address" required />
<input type="submit" value="Sign up" />

After that, copy the shortcode and paste it in the text widget on the top bar. You can easily tweak the look of your form with CSS. In this case, the CSS we used is below. Feel free to use the code below for your own site. You can make adjustments to fit your needs.

.mc4wp-form input[type=email]{
width: 50%;
}
.mc4wp-form {
margin-bottom: 0;
}

Adding Other Elements to the Top Bar

The top bar works like a regular widget area. You can add shortcodes for other items like social icons, mini-cart, login, etc. You can also insert HTML and scripts in the text widget so the possibilities are endless.

Customizing the Top Bar Widget

To customize the top bar widget, you can go to Appearance > Customize and click on “Top Bar”. Here you can change the background color, text color and link color. You can also set the top bar to be hidden in mobile view.

You can further tweak the top bar using CSS.

Align Top Bar 2 to the Right

By default, both Top Bar 1 and Top Bar 2 contents are left aligned. To make the content of Top Bar 2 align to the right, just use the CSS below.

.woa-top-bar.col-2 .woa-top-bar-2{
text-align: right;
}

Thickness/Height

To change the height of the bar, you can specify the height using CSS. Just use the code below and specify the height.

.woa-top-bar-wrap{
height: 35px;
}

Single Centered Top Bar

If you only want one top bar widget with a centered content, do not add any content to the Top Bar 2 widget area and then add the CSS below.

.woa-top-bar-wrap{
text-align: center;
}

Final Notes

The Top Bar is the first thing that your customers will see on your site. It is one of most prominent areas above the fold. You now have the tools to make use of the top bar. It’s now up to how you will maximize the use of this valuable real estate.

Was this tutorial helpful? Do you have any questions about adding or tweaking the top bar in Storefront? Let us know in the comments.

« Previous Page
1
…
6
7
8
9
10
…
15
Next Page »