Wooassist Tag Archives - Page 4 of 6

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 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.

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.

How to Add “Where Did You Hear About Us” Field on WooCommerce Checkout

December 7, 2016 By John 16 Comments

As an e-commerce store owner, it is important to know where you are getting your customers so you can plan your marketing efforts. You can either focus on channels that help you convert or tweak your marketing strategy on channels that are not very successful. One way to find out where your customers are coming from is by adding a “Where Did You Hear About Us” field on WooCommerce checkout.

To start, just install and activate the “Where Did You Hear About Us Checkout Field for WooCommerce” plugin. When that’s done, go to WooCommerce > Reports > Customers Source Tab. Click on Settings to enable/disable the “Where Did You Hear About Us” custom field on checkout. Below you can see other plugin settings to customize. You can even make it a required field on your checkout page.

Using the plugin, you can add your channel options. You can even add an “Other” option so your clients can indicate how they found your e-commerce store if it is not in the list.

To view the data you gathered, go to Customer Source tab and click “Report”. You should be able to view the details which include customer name, customer source, order status, and order ID.

The best part about this plugin is that it is totally free. There are no subscriptions. There is no premium version to buy. You can use it in as many websites as you want.

When you learn where your customers come from, you can make your business more profitable. If you tried using this plugin, tell us your experience about it in the comments section.