Currently, I’m working on a project that’s using WooCommerce and I ran into a little problem that was tripping me up and I suspect other people might be having the same issue, so I figured I’d post the fix here.

The Problem:

When you add a product to your store there is no option for adding a “Featured Image”, which is the main image that WooCommerce uses to display your products.

The Solution

First off, I’m assuming you’ve already looked for the “Featured Image” checkbox that is in the “Screen Options” drop down at the top of the admin panel…

Now what you’re gonna want to do is go into your theme files and find the functions.php file. Then search that file for something that looks like this:

add_theme_support('post-thumbnails', array('post', 'page'));

And change it to look like this:

add_theme_support('post-thumbnails', array('post', 'page', 'product'));

Go back to the Add Product page, refresh if you have to, and you should see the “Featured Image” link in the sidebar.

Hope that helps!

$config['allowed_types'] = 'csv';

Add ‘text/plain’ to the CSV array in config/mimes.php

If it’s still not working check the files mime type with mime_content_type() or Fileinfo.

FYI, CodeIgniter checks the mime type and the file extension.

If it’s STILL not working you could try checking the file permissions.

Step 1 – Edit virtual hosts file

Open Terminal and type this command:

nano /Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf

Add these lines, replace “eliwheaton” with your user name and “example_site” with your website name. This assumes your developing your site in a folder at this location: /Users/YOUR_USERNAME/sites/YOUR_WEBSITE

<VirtualHost *:80>
    DocumentRoot "/Users/eliwheaton/sites/example_site"
    ServerName example_site.com
    ErrorLog "logs/example_site.localhost-error_log"
    CustomLog "logs/example_site.localhost-access_log" common
    <Directory "/Users/eliwheaton/sites/example_site">
        AllowOverride All
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>

Save the changes to the file by pressing Control-X, and then Y, and then Enter.

Step 2 – Edit Hosts file

In Terminal type this command, enter your user password when it asks:

sudo nano /etc/hosts

Add this line to the bottom:

127.0.0.1 example_site.com

Save the changes to the file by pressing Control-X, and then Y, and then Enter.

Step 3 – Restart apache

That’s it, you’re done! Now when you open a browser and go to example_site.com it should load your local website. Note: most people change the .com extension to something obvious like .dev so that you can quickly tell that its your local website and not the live site.

If you download and implement the new version of Uploadify (3.2) you may find that it’s not working right out of the box. You also may see an error like this, “TypeError: ‘undefined’ is not a function (evaluating ‘$.tmpl($itemTemplate, itemData)’)” in your javascript console and think that’s causing the problem. Actually, the upload still works even if the $.tmpl jquery function is causing errors.

If you take the steps to implement the Uploadify onUploadError event, you’ll see there’s some errors in the uploadify.php script, specifically the missing POST values for ‘timestamp’ and ‘token’, so all you have to do is pass those along with the Uploadify formData option:

<?php $timestamp = time(); ?>
$('#file_upload').uploadify({
        'swf'      : '/uploadify.swf',
        'uploader' : '/uploadify.php',
        'method'   : 'post',
        'formData' : {'timestamp' : '<?php echo $timestamp; ?>', 'token' : '<?php echo md5('unique_hash'.$timestamp); ?>'},
        'onUploadError' : function(file, errorCode, errorMsg, errorString) {
            alert('The file ' + file.name + ' could not be uploaded: ' + errorString);
         },
        'onUploadSuccess' : function(file, data, response) {
            alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);
        }
    });

I’m not sure what the side effects are but I also managed to get rid of the javascript console error by changing:

c("#"+h.queueID).append(c.tmpl($itemTemplate,itemData));

To this:

c("#"+h.queueID).append(itemData);

In the jquery.uploadify.min.js file.

Did I miss any? Let me know in the comments below.

It’s true that there are a MILLION different tactics that can be used in order to boost your site to the top of search engine results. But there are three very basic, very easy things that all sites need to have in place, and even if you don’t know anything about websites you can make sure your site has these three things done.

The 3 Things Are:

1. Title Tag
2. Meta-Keywords Tag
3. Meta-Description Tag

How To Check If Your Site Has Them Set

These three things are all set within your websites HTML and should be set for each page of your website. The best way to check is to go to a page on your website, right click somewhere on the page, and select the option that says, “View Source”, it may be different depending on your internet browser but it will be similar. A page will pop up with the HTML for your site and somewhere near the top you will see text like “title”, “meta name=description”, and “meta name=keywords”.

1. Title Tag

The title tag is the title that shows up at the very top of your internet browser. It should describe what the current web page is about. For example, if your a personal injury lawyer in Florida it would say something along the lines of “Florida Personal Injury Lawyer”.

2. Meta-Keywords Tag

The keywords tag doesn’t show up anywhere on your website but is used by search engines to rank the value of your site and determine if your site should be displayed in its results. Sticking with the same example the keywords would look something like “Florida Law Firm, Attorney Florida, Florida Lawyers”.

3. Meta-Description Tag

The description tag also won’t be displayed anywhere on your site but it will be displayed in the search engines search results, so make sure there’s no typos. This should be a sentence or two about the current web page or site. So an example would be, “Wheaton & Wheaton is a nationally recognized full-service Florida law firm representing businesses and individuals. Offices in Tampa, Orlando, Miami. We specialize in defending employers in complex litigation cases.”

And that’s it. Simple as one, two, three. You can (and should) go check your website right now to see if you even have any of these tags in place, it only takes a minute. If you don’t, you should get your web developer on the phone asap, or better yet contact me. Because if your competitors site has these tags and your site doesn’t, customers searching the internet will find them instead of you.
]]> http://www.eliwheaton.com/seo/three-basic-seo-rules-you-need-to-know-if-you-have-a-website/feed 0 http://www.eliwheaton.com/web-design/now-your-website-can-look-great-on-any-computer-or-mobile-device?utm_source=rss&utm_medium=rss&utm_campaign=now-your-website-can-look-great-on-any-computer-or-mobile-device http://www.eliwheaton.com/web-design/now-your-website-can-look-great-on-any-computer-or-mobile-device#comments Fri, 20 Jan 2012 03:48:28 +0000 Eli Wheaton http://eliwheaton.local/?p=44 Continue reading →]]> A loooooong time ago I wrote a post on a very nice CSS framework called the 960 Grid System (you can read it here). Which was, and still is, a very handy tool for helping you to quickly create website prototypes with clean site layouts. One of the underlying ideas for the 960 Grid is that it works around a fixed grid that is 960 pixels wide, hence the name. That’s all well and good for websites that are only going to be viewed on a desktop computer but what about other devices?

It’s obvious that the world of the web is changing very rapidly. Handheld devices such as phones and tablet PC’s all come with a powerful web browser that’s allowing users to surf the internet on the go.

So what does this mean for your website?

It means unless you want some cumbersome version of your website to be displayed on your visitors iPhone or iPad you’d better do something to get a mobile version in place.

And how do you do that?

That’s where Skeleton comes in. A new CSS framework that works much like the 960 Grid System only it’s not confined to a 960 pixel grid. From the Skeleton website, “A Beautiful Boilerplate for Responsive, Mobile-Friendly Development” doesn’t that sound great? And it is! Skeleton allows web designers to continue to design on a grid but now their designs are responsive to the size of display that they’re viewed on.

If you’re still a little confused about what this all means, head on over to the Skeleton website and resize your browser window down to the size of your phone or tablet and you’ll quickly see what I mean.

Thanks for reading!

For example, if you decided to support the last three versions of the five browsers I listed above that would mean you’ve got fifteen browsers you have to install, not to mention if you work on a mac, like myself, you need to have a separate Windows machine because you can’t install Internet Explorer on a mac.

In the past Ive used other tools like BrowserShots or Adobe Browserlab but wasn’t really happy with them and always found myself wishing there was a better option.

Fortunately, a few days ago I came across BrowserStack and life has been much easier ever since. BrowserStack provides web developers with live web-based cross browser testing. Now, instead of having to fire up another computer and juggle different browsers, all I have to do is sign into my account and I can test all my work in multiple versions of all the major browsers. I don’t have to worry about other machines or dealing with any virtual machine setups on my development system. I just log in, select the browser and the version I want to test on and I’m ready to go.

There are also a bunch of other great features provided by BrowserStack like the developer tools and the ability to test on your local server. They also state in their FAQ’s that they’re working on providing different operating systems for testing cross platform. They’ve definitely saved me time and money so I’ll continue to use the service for my testing needs. And if you’re a web developer that’s looking to test your websites across multiple browsers, I suggest you check them out.

Thanks for reading!

This type of layout has been so successful it has naturally found it’s way into web design. By using CSS (Cascading Style Sheets) the web designer is able to position HTML elements anywhere he wants on the web page. The 960 Grid System is a CSS framework designed to streamline the layout of those elements for the designer.

The 960 system works on the principle that the web page is 960 pixels wide (hence the name 960). From there the 960 pixels are made up of either 12 or 16 evenly spaced columns – the rows aren’t as important for the web since the length of a web page varies. This allows the designer to rapidly layout his web page and end up with a visually appealing layout to most human eyes. So rapidly in fact that it can also be used as a very good prototyping tool. Often the client might not know exactly how he or she wants their web page to look. One of the reasons I love the 960 Grid system is that I can create a few mock ups without spending too much time. Without the system I would have to code everything only to find out the client disapproves…

Another benefit from using the 960 system is that it allows the eyes to naturally fall around a web page without feeling forced. If you’ve noticed that this web site is easy on the eyes and has a very clean layout, well it has a lot to do with the fact that I used the 960 Grid when I developed it.

I hope that helped shine some light on the 960 system and showed you a little of how I work. Some other grid systems that I’ve used include Blueprint and YUI. If you’re interested you can check those out too.

Things have been busy around here lately but I’m planning on updating the portfolio page and some more tech blogs, so check back soon!

Thanks for reading!

CodeIgniter

CodeIgniter is a PHP Framework. What that means is it acts just like the name implies, it’s a “framework” that allows you to build your PHP projects around it, much like the frame of a house. Once your project is configured with CodeIgniter you can start quickly adding functionality and database access with ease.

Grid 960 System

Grid 960 is another type of framework, but this one is for CSS instead of PHP. The Grid 960 system allows you to break up the screen into a certain number of columns and create very clean, user-friendly designs. Whereas the CodeIgniter framework is more for developing functionality, the Grid 960 system is more for layout design.

WordPress

That leaves us with WordPress. If you don’t already know, WordPress is one of the most popular content management systems (CMS) available. I used WordPress to create this website.

That’s a quick summary of some of the tools I use. Check back for future posts where I’ll break each one down a little further. I’m also working on a CodeIgniter tutorial for anyone that’s interested, I’ll be posting a link soon.

Thanks for reading!