Tucson, Arizona Freelance Web Designer - Free ZenCart & WordPress Tutorials» Tucson, Arizona Freelance Web Designer – Free ZenCart & WordPress Tutorials

How to create a grid layout in ZenCart

Gerae Lindsey — Wed, 28 Jul 2010 01:22:18 +0000

By default, ZenCart displays products in rows, one product on top of the other.

Switching your products to a grid layout is easily accomplished using a mod called Column Layout Grid for Product Listings.

Installing this mod will change your product listings from this:

to this:

This mod is pretty easy to use.

First, upload the following files to your web host:

Into the /includes/modules/ folder upload product_listing.php
Into the /includes/templates/template_default/templates folder upload tpl_modules_product_listing.php

IMPORTANT: These files will overwrite the exisiting files. If this is a fresh (or new) install of ZenCart, you have nothing to worry about and can safely overwrite. If you have previously made changes to these files, you will want to compare them before overwriting them to avoid losing anything.

Second, login to your ZenCart admin area. Click on “Install SQL Patches” under “Tools” in the menu.

Upload the column_layout_grid.sql file.

Now, in the admin area, click on “Product Listing” under “Configuration”

You will need to edit TWO settings in this section.

Product Listing – Layout Styles

Change from rows to columns. Click on update.

Product Listing – Columns Per Row

Enter the number of coulmns you wish to have. The default is 3. Click on update.

That’s it! Your products should now display in a grid layout.

My favorite WordPress plugins

Gerae Lindsey — Sat, 01 May 2010 17:26:13 +0000

These are my personal “must install” plugins that I use on virtually every single WordPress site I set up.

1. Yoast Breadcrumbs

This plugin allows you to add breadcrumbs on your posts and pages. Example: Home > WordPress 2.9 Tutorials

Adding breadcrumbs is good for two reasons:

They allow your users to easily navigate your site
They allow search engines to determine the structure of your site more easily

2. Contact Form 7

This is my utmost favorite contact form plugin for WordPress. Multiple forms, multiple recipients, completely customizable. I seldom ever use another form.

3. HeadSpace 2

I used to use the All in One SEO Pack plugin but recently switched to HeadSpace after having conflict issues with it and other plugins. HeadSpace, in my opinion, is so much easier to use! I love the mass editing feature, allowing you to make general edits to categories, posts etc all at once. Makes optimizing meta tags super easy.

What are your favorite plugins?

How to edit the create account page in osCommerce

Gerae Lindsey — Tue, 13 Apr 2010 06:05:40 +0000

By default, osCommerce requires certain information from visitors creating a new account. This includes their name, address, gender, birthday, street address, and other contact information.

Let’s say you don’t want to require new customers to supply their birth dates.

No problem.

osCommerce allows to you turn off the following fields:

Gender

Date of birth

Company

Suburb

State

First, login to your osCommerce admin area.

Under “Configuration” click on “Customer Details”

When the page loads, you will see the following:

Click on the field you would like to edit. Then click on the “edit” button to the right.

You can then click the radio button next to “False” to turn off the field. Click “update” to apply the changes.

The field will now no longer show on the create account page.

How to install a new WordPress plugin

Gerae Lindsey — Thu, 08 Apr 2010 06:05:21 +0000

If you are running the latest version of WordPress, then installing a new plugin is super easy. You can even search for new plugins, right in your admin area!

First, locate and download the plugin you wish to use. It will be usually downloaded to your computer as a .zip (compressed) file.

Once you have your plugin saved to your computer, login to your WordPress admin area.

To the left hand side, click on “Add New” under the “Plugins” tab:

When the new page opens, click on “Upload”

You can now click on “Browse” to locate the plugin you downloaded. Once opened, click on “Install Now” to upload the .zip file to your server.

Unless an error is displayed, your new plugin is now available to “Activate”

That’s it!

How to install a new WordPress theme

Gerae Lindsey — Mon, 05 Apr 2010 06:05:55 +0000

If you are running the latest version of WordPress, then installing a new theme is a breeze.

First, locate the theme you wish to use. It will be downloaded to your computer as a .zip (compressed) file.

Need help finding a new theme? Here are some places to search both free and premium themes:

Once you have your theme saved to your computer, login to your WordPress admin area.

To the left hand side, click on “Add New Themes” under the “Appearance” tab:

When the new page opens, click on “Upload”

You can now click on “Browse” to locate the theme you downloaded. Once opened, click on “Install Now” to upload the .zip file to your server.

Unless an error is displayed, your new theme is now available to “Preview” or “Activate”

That’s it!

Changing header in ZenCart using Dreamweaver, CSS

Gerae Lindsey — Fri, 02 Apr 2010 17:21:52 +0000

I have received multiple emails over the last month from Dreamweaver users who are having trouble editing their ZenCart header image using CSS. I decided to post my answer here in case others are experiencing the same issue.

Let me first say that I do not think you should use Dreamweaver to edit ANY of your ZenCart files. I personally use and recommend plain old Notepad or Wordpad.

My tutorial for editing the ZenCart header image using CSS says to open and edit the following file:

stylesheet.css found in yoursite/zencart/includes/templates/classic/css

Find the following snippet of code:


#logoWrapper{

background-image: url(../images/header_bg.jpg);

background-repeat: repeat-x;

background-color: #ffffff;

height:75px;

}

Change the text “header_bg.jpg” to whatever your image name is.

When editing this file in Dreamweaver, what usually happens is this:


#logoWrapper{

background-image: url(../../../../DOCUME%7E1/Owner/LOCALS%7E1/images/header_bg.jpg);

background-repeat: repeat-x;

background-color: #ffffff;

height:75px;

}

Or similar depending your computer settings.

When uploaded, the server cannot access your logo because the path to it is incorrect and does not exsist on the server.

The solution?

Make sure you DELETE the extra .. / .. / .. before the word “images”

Change the path to the full URL to your images, for example:


#logoWrapper{

background-image: url(http://yoursite.com/images/header_bg.jpg);

background-repeat: repeat-x;

background-color: #ffffff;

height:75px;

}

Hope that helps

How to edit folder permissions in cPanel

Gerae Lindsey — Wed, 24 Mar 2010 22:46:54 +0000

When ZenCart creates new image folders in your admin area, the folders are not automatically made writeable. This will cause you to receive an error when attempting to upload your product images to the new folder.

Permissions need to be set for this new folder.

The first step is to login to your cpanel, usually located here: http://yoursite.com/cpanel

Once inside, click on the File Manager icon in the Files box.

A little box will pop up asking which files you want to work. Choose the domain where your ZenCart files are located.

Find and open the folder “images”

Once the images folder is opened, click on the new folder you created in the admin area. This will highlight the folder.

With the folder highlighted, click on Change Permissions in the top bar.

A small box will open. Check all of the little boxes until 777 is displayed. Click to save the new permissions.

That’s it!

You should now be able to upload product images to the new folder in your ZenCart admin area.

Restricting payment types in ZenCart

Gerae Lindsey — Sun, 07 Mar 2010 06:05:51 +0000

Let’s say you sell two types of products in your cart. For example, BOOKS and eBOOKS.

You want to allow customers to pay for BOOKS with PayPal and credit cards. But you only want customers to pay for eBOOKS with PayPal.

Is this possible with ZenCart?

The answer is yes, however some editing of code is required.

First thing: Please make a backup of your files BEFORE editing them. This way, if you make a mistake, you can simply upload the original to restore order quickly.

Using Notepad or WordPad, open the payment file you wish to restrict. Using my example above, we want to restrict credit card payments, so we need to edit the cc.php file.

These files are located here:

yoursite/zencart/includes/modules/payment

Once opened, locate the following line of code:

*It only appears once in the file.

Directly after this code, add the following:

if (IS_ADMIN_FLAG == false) { // disable if category 27 items are in the cart if ($_SESSION['cart']->in_cart_check('master_categories_id','27') > 0) { $this->enabled = false; } }

The file should now show like this:

IMPORTANT: Make sure you edit the category before saving and uploading. In my example above, I edited category 27. You need to replace BOTH instances with the category you wish to restrict payments for.

Alternatively, you can restrict payment by actual product instead of entire categories. To do this, you would use the following code instead of the code above:

if (IS_ADMIN_FLAG == false) { // disable if products_id 27 is in the cart if ($_SESSION['cart']->in_cart_check('products_id','27') > 0) { $this->enabled = false; } }

Again, replacing the product number with your own.

Order tracking in ZenCart

Gerae Lindsey — Fri, 05 Mar 2010 18:29:23 +0000

ZenCart has the built-in option of allowing customers to track their orders once placed. Tracking is viewed in the “My Account” area for customers when logged in.

This tutorial will show you how to update the status of orders and add new order status options in ZenCart.

You can update the status of orders placed in your admin area. Status options include processing, shipped etc

To update an order status, first login to your ZenCart admin area. Now click on “Orders” under the “Customers” menu:

Locate the order you want to edit it. First click on the order, and then click on “Edit” to the right:

Once the order opens, you can scroll down near the bottom to update the status.

In addition to updating the status, you can add comments along with the status.

For example:

After order is received
Status: Processing
Comments: Order in process

When order is shipped
Status: Shipped
Comments: Tracking #

etc

When you update the status, you can choose to send a notification to the customer. The cart will automatically email them with the update.

By default, the cart includes the following order status options:

Pending

Processing

Delivered

Update

To add/edit these statuses, click on “Order Status” under “Localization” in the menu:

From there you can edit the current status options and add new ones that fit your needs.

Page Cornr plugin not working in Internet Explorer

Gerae Lindsey — Thu, 04 Mar 2010 18:38:33 +0000

After nearly pulling my hair out trying to get one of the few WordPress page corner plugins to work, I finally managed to get one working. Yay!

I used Page Cornr and while it worked okay in Firefox, when I checked IE it wasn’t there.

I searched and searched and eventually realized that the theme the site I installed it on didn’t have a doc type listed in the coding.

I added in the following line:

and VOILA! the plugin instantly appeared in IE.

FYI: This line goes in your header.php file – right BEFORE the first < html > tag. Some themes include it, some don’t.

Thought I’d pass on the tidbit to anyone out there who may be experiencing similar issues.

Hope it saves someone time, and hair