Category: Basic tutorials

This tutorial will show you how to transfer your website from one domain to another.

In order to transfer your site to another domain you need to perform the following:

• Export database from your PhpMyAdmin tool;
• Change the links in the config.php and admin/config.php files;
• Zip the content of your OpenCart installation folder.

First of all, export your database from the PhpMyAdmin tool. You will receive an SQL file which you will need to import to your new host. However, this step is optional in case you transfer the site within one host, for example from the sub-domain to the main domain. In such case, you may leave it unhandled.

Secondly, two files has to be amended: config.php and admin/config.php which contain the links to your site.

config.php:

Change your link on the ~line 3 change your URL as well change it on the ~line 6 if you have SSL certificate on your site (https connection).

Now, you need to amend 3 variables which contain path to your catalog, system and image folders.

One the ~line 9 specify the path from your home directory to the catalog folder, example – /home/domain/public_html/catalog/

One the ~line 10 specify the path from your home directory to system folder, example – /home/domain/public_html/system/

One the ~line 11 specify the path from your home directory to image folder, example – /home/domain/public_html/image/

define('DB_DRIVER', 'mysqli');
define('DB_HOSTNAME', 'localhost');
define('DB_USERNAME', 'mysql username');
define('DB_PASSWORD', 'password’);
define('DB_DATABASE', 'database name');
define('DB_PORT', '3306');
define('DB_PREFIX', 'oc_');

Now you should specify the details to the database if they were changed in the following block of code:

admin/config.php:

Change the link to your admin panel on the new domain ~line 3 and on the next line, specify the link to your new domain.

On the ~line 7 and ~line 8 change the URL to your new admin and site URL with secured connection (https connection).

Now on the ~line 11 specify the path from your home directory to the admin directory.

On the ~line 12 specify the path from home to system directory.

On the ~line 13 the path should be from your home directory to image directory.

On the ~line 15 specify the path from home directory to catalog one.

Now you should specify the details to the database if they were changed in the following block of code:

define('DB_DRIVER', 'mysqli');
define('DB_HOSTNAME', 'localhost');
define('DB_USERNAME', 'mysql username');
define('DB_PASSWORD', 'password’);
define('DB_DATABASE', 'database name');
define('DB_PORT', '3306');
define('DB_PREFIX', 'oc_');

Also, it is very important that all your paths and links in these files end with slash because your links will not resolve properly.

Do not forget to make sure that you have imported your sql file as was mentioned on the first step.

Now once you changed these two files, zip all the content and transfer it to the new domain. Unzip the files and check your new URL.

The currency section lets you select which currencies are available for use in your storefront. The following tutorial will guide you on how to manage currencies set the default one in OpenCart 3.x. Let’s get started!

Adding new currency to your store is really easy! There are three simple steps how to do this:

1. First of all, navigate to System > Localisation > Currencies.
   

2. Then click “Add new” button in the top right corner to add a new item.
   

3. Here you should insert following details:

• Currency Title: Name of the currency.
• Code: The ISO code for the currency. Currency codes can be looked up at this currency converter.
• Symbol Left: Adds a currency symbol to the left of the code.
• Symbol Right: Adds a currency symbol to the right of the code.
• Decimal Places: A number of decimal places displayed in the price of the storefront.
• Value: The Default currency will be set to a value of 1. Every value of the currency will be relative to this value. Since the US Dollar is 1.0 (the default), the Euro is tabulated to .81 for the value based on its worth.
• Status: Enables or disables the currency in the storefront.

To change a default currency, navigate to System > Settings. Click Edit button and select the Local tab. From the Currency field choose any currency required and save the changes.

In case you wish to set conversion rate for every currency automatically, you should enable Auto Update Currency option in System > Settings > Store > Local. OpenCart will automatically update your currencies with the latest exchange rates.

To remove any currency, navigate to System > Localisation > Currencies, mark it with a tick and click Delete button.

That is the end of the tutorial, now you know how to manage store currencies in OpenCart 3.x.

Identifying the name of your store is one of the most important things to do when you are setting up an OpenCart template.  The following information will be specified in your Contact Us page and may be presented in your website footer/header, which allows your customers to get back to you with comments and questions. This tutorial will show you how to manage your store contact information in OpenCart 3.x.

Store settings can be accessed under System->Settings tab of your admin dashboard. In most cases, there only will be one store named Your Store (Default). Click on a pencil icon to proceed to its editing.
The store tab under Settings displays the following fields:

• Store name: the name of the store. This information will be displayed on the Contact Us page under the Customer Service section of the footer.
• Store Owner: the name used in the “From:” section of any email sent from the store.
• Address: the address of the store. This information will be displayed on the Contact Us page under the Customer Service section of the footer.
• Geocode: store location geocode.
• E-mail: the store owner’s email, or general email for the store used for email notifications sent by OpenCart.
• Telephone: a telephone number for the store. This information will be displayed on the Contact Us page under the Customer Service section of the footer.
• Fax: a fax number for the store. This information will be displayed on the Contact Us page under the Customer Service section of the footer.
• Image: your store image which will be displayed on Contact Us page.
• Opening Times: your store opening times.
• Comment: the following field is for any special notes you would like to tell your customers.

That is the end of the tutorial, now you know how to modify your store contact data in OpenCart 3.x. templates.

This tutorial shows how to configure products filter in the OpenCart 3 engine.

Products filters allow website visitors to search products based on appropriate options. For example, visitors can search products by color, size, type by selecting the appropriate option in the products filter. In most cases, such filter is being placed on the category page in order to simplify navigation through products available on the website.

We are going to add a products filter to the category page.

1. We should add filters to the Opencart.
   1.1. Open the OpenCart admin section and go to the Catalog -> Filters section.

   1.2. Click on Add New button (+) in the top right corner. You should specify Filter Group Name in the Filter Group section. For example, we are going to set Color as a Filter Group Name.

   1.3. The Filter Values section allows setting specific options. Let’s set the following values: Red, Green, Blue. You can set the order of options in the Sort Order section.

2. Now we should enable the Filter module in the modules section.
   2.1. Please, go to Extensions -> Extensions section in the Opencart admin section.

   Select Modules in the Choose the extension type drop-down.
   2.2. Look for the module called Filter. Install the module and set its status to Enabled. Save changes.

3. Let’s assign the module to the Category layout.
   3.1. Please, go Design -> Layouts section in the Opencart admin section. Edit a layout called Category. In most cases, the module should be assigned to the Column Left or Column Right positions. We are going to assign the module to the Column Left position. You should navigate to the Column Left position and add the module Filter to this position. Save changes you have performed on the Category layout.

4. We should assign the filter to products.
   4.1. Go to the Catalog -> Products section. Click on the  Edit button for the product you would like to assign the filter to. Go to the Links tab and select the desired filter in the Filters section.

   Filter box has the autocomplete feature. Save changes.

5. Now we should assign the filter to the categories that have products with filters.
   5.1. Go to the Catalog – Categories section, edit an appropriate category.
   5.2. Access the tab called Data and select filters.

   Save changes.

6. Open the website and access the category with filters. The appropriate filter will show up on the category page.

In this tutorial, we have found out how to configure products filter in the Opencart 3 engine. Now you can go ahead and make filters specifically for your products in order to improve the shopping experience for your customers.

Today we are going to learn how to add a new language and setting up default language for frontend/backend.

By default, our OpenCart templates come with a few pre-installed languages so if you happen to need your website displayed in a different language you most likely will not have it available out of the box.

Thus being, you should install the language pack separately.

Navigate to the OpenCart official Marketplace website: Opencart.com and type in the search box the language name you need installed. If you’re lucky enough, you will find the free language pack.
After making sure it is compatible with your OpenCart version, download the package to your local machine.

The next step would be uploading the “admin” and “catalog” folders from the downloaded and extracted language pack archive to the root OpenCart folder on your hosting server. You can use cPanel File manager tool or FTP client for that purpose.

• Having that done, in OpenCart admin panel navigate to the System ⇒ Localizations ⇒ Languages and click on the “Add New” button.
  

• Fill out the fields: the language pack usually comes with a readme.txt file containing this essential information. Do not forget to save the changes after all the fields are filled out.
• That’s almost it. The language is now installed, so navigate to System ⇒ Settings – Edit ⇒ Local tab of your Dashboard to choose it as your primary website language.
  
  The Language field is for the frontend default language.
  The Administration Language is the administrator panel language (the backend).
• Choose your newly installed language for both instances and save the changes.
  

• Now it should be your website primary language.

Today we are going to learn how to change default product number on category page.
OpenCart provides you with a great opportunity to view the category products on a respective page.
By default, it displays 20 products per category page but you may want to show much more products per page so that the customers don’t have to go through lots of pages if you have plenty of products associated with the category.

In this case changing the default number in the OpenCart admin settings comes in hand. To do it, you need to perform the following steps:

• Go to the Extensions ⇒ Extensions section and Select “Themes” from the dropdown.
  

• Click to Edit your theme.
  

• There you will see the Default Items Per Page option, feel free to change it.
  

• Press Save when you are ready and refresh the category page on the site to see the updated number of products on a category page.

When running an e-Commerce website, you may find it handy to be able to create additional pages on your website except for those with products and products categories. You may need to list your contact information, privacy policy terms or any other data you consider important for your website visitors.

Most of the popular e-Commerce engines support that feature, and OpenCart is not an exception, the only difference is how those extra pages are named. In OpenCart, they are referred to as “Information pages”. To manage those, in OpenCart dashboard proceed to Catalog > Information menu item.

By default, there are 4 pages created:

• About Us
• Delivery Information
• Privacy Policy
• Terms & Conditions

The number of information pages is not limited, so you can create any amount of pages you need. OpenCart provides built-in WYSIWYG HTML editor, so you don’t really have to be savvy in coding if you need to insert your custom text, images or even embed videos. That’s it, information pages management is very simple.

What are the most important items in a store besides design? That’s right, products.  An online store won’t be a store without having any products, so let’s learn how to add a new product to the website.

Let’s follow these simple steps to add a new item to the store:

1. Login to OpenCart admin panel. Navigate to Catalog -> Products
   
   and click the Add New button in the top right corner of the page.

2. General tab contains following fields:
   • Product Name – this field will display name of your item.
   • Description – here you can add your preferred product description and other necessary details.
   • Meta Tag Title – it’s an important SEO element, used by search engines.
   • Meta Tag Description – SEO product page description used by search engines.
   • Meta Tag Keywords – a set of your product keywords used by search engines.
   • Product Tags – a combination of product tags, used for product description for store customers. Used for product search within the website.

   In General tab, you can also add your product information for different languages by switching language name tabs.

3. After filling in all necessary general information, let’s proceed to Data tab, which contains following fields:
   • Model – unique item model number. It’s a required field that should contain letters and digits.
   • SKU – Stock Keeping Unit.
   • UPC – Universal Product Code
   • EAN – European Article numder.
   • JAN – Japanese Article numder
   • ISBN – International Standard Book Number.
   • Location – address of product location.
   • Price – product price.
   • Tax Class –  tax class category applied on this exact product. In case this item is not taxable, None should be set.
   • Quantity – total number of items available in store for this exact product.
   • Minimum Quantity – minimum number of product items that can be purchased.
   • Subtract Stock – a field that allows you to automatically decrease the number of items in stock once customers purchase products.
   • Out of Stock Status – message displayed on the website when the product is out of stock.
   • Requires Shipping – shows if the product needs to be shipped or not.
   • Date Available – the date when this specific product becomes available for purchase.
   • Dimensions – product length x width x height.
   • Length Class – product length measuring units. Available options are millimeter, centimeter, inch.
   • Weight – product weight.
   • Weight Class – product weight measuring units. Available options are a kilogram, gram, pound, ounce.
   • Status – has two options: Enabled, which shows that product is displayed on website frontend and Disabled, that reflects the fact product is not displayed on the website and can be accessed only via admin panel for further editing.
   • Sort Order – product priority number in general list of products on the website. The lower the priority number, the higher it’s placed on the list. An item with priority 1 is always on the top.
4. After filling all necessary information in Data tab let’s move to Links. Here you will find following fields:
   • Manufacturer – displays product manufacturer and places this exact product on manufacturer page in the store.
   • Categories – category or categories that the product belongs to. A product is placed on the categories pages in the store automatically after those are selected.
   • Filters – allows to select filters, that will be applied to the product in case Filter module is enabled on the website.
   • Stores – defines which exact store will be selling this product.
   • Downloads – a field to add download link if the product is a downloadable one.
   • Related Products – allows adding related products by typing their names in. These products are displayed in Related Products section on the product page.
5. Next let’s fill in the Attribute tab, which aims towards adding product options, that are used mainly for product comparison.
6. After Attributes comes Option tab, where some extra selections like product size, color, etc can be made before adding the product to cart.
   

7. Recurring tab allows setting recurring payments if ones are required.
8. Discounts are set in the same named tab when creating a product or editing it.In order to set a discount the following fields  should be filled in:
   • Customer Group – defines for what customer group discount will work.
   • Quantity – the number of products discount will be applied to.
   • Priority – defines discount priority in case multiple discounts are applied at the same time.
   • Price – product price after applying discount.
   • Date Start – the day discount starts.
   • Date End – the day discount ends.
9. Special tab is quite similar to Discount one, but with the difference, that product will be considered to be special offer. Fields in this tab are identical to the previous one.
   
10. Images tab allows adding products images. Each image has a sort order field, which defines images order on the product page.
    

11. Fill in fields in Reward points tab if you are using some kind of a loyalty or bonus program on your website, which allows customers to collect points for each purchase on the website.
    Points field requires a number of points necessary to buy this exact item. In case the product shouldn’t be purchased with reward points, the number should be set as 0 or left blank.

12. SEO tab contains fields for unique product keyword for each language, which will help products to be found by search engines. Keyword field can’t contain spaces, those should be replaced with “-”. Also, it’s very important that the same keyword is used for only one product on the website.
13. Last, but not least is Design tab, which allows creating overrides for specific designs if you wish to display this product in other layouts than the product page.
    

14. When you are satisfied with the added product information, please click the Save button in the top right corner of the page to complete product creating process.

Congratulations, now you should be able to view your new product on the website.

You are willing to make your online store organized, all products categorized and easy to find? This tutorial will show you how to do it by adding a new category to your online store.

1. First of all you need to open your OpenCart admin panel and navigate to Catalog -> Categories.
   

2. Click the Add New button in the top right corner.
   

Adding new category page is divided into tabs, similar to the ones you see when adding a new product. They are General, Data, SEO, Design.

So, let’s go over the tabs and their content.

• Category Name – defines would be the name of your new category on the website.
• Description – provides basic information about your category.
• Meta Tag Title – a category title, used by search engines.
• Meta Tag Description – short category description, used for SEO purposes.
• Meta Tag Keywords – single keywords that describe the category, used by search engines.

Please note, that if you are using a multilanguage website, it’s very important to fill in the required fields, that are marked with the * symbol for every single language.

• Parent – a place of the category in a hierarchical structure. If you don’t change this option to a custom one, the new category will be created as a parent category by default.
• Filters – allows to select filters, that will be applied to the category in case Filter module is enabled on the website.
• Stores – defines what store the category belongs to.
• Image – allows selecting an image that will be used on the category page and as category thumbnail.
• Top – defines if the category is displayed in the top menu bar. Please, note, that it works only for top (parent) categories.
• Columns – select a number of subcategories displayed when hovering over the parent category.
• Sort Order – defines the position of a category in the menu. The higher sort order number, the lower the category will be displayed.
• Status – allows selecting if the category is available on the website (by choosing Enabled option), or if it is available just for editing purposes in admin panel only (when the Disabled option is selected).

• Stores – contains the list of stores, available for adding SEO elements. When using only one store, Default Store will be available as the only option.
• Keyword – a keyword that is included in category URL for SEO optimization purposes.

• Stores – contains the list of stores, available for adding SEO elements. When using only one store, Default Store will be available as the only option.
• Layout Override – allows selecting what page layout will be customized in order for the category to be displayed on it.

3. When you are satisfied with the added category information, please click the Save button in the top right corner of the page to complete product creating process.
Congratulations, now you know how to add a new category to your website!

OpenCart 3.0 supports the multilingual SEO URLs! Whatever is the main language of your store, you can use it for the website links.

SEO Keyword is now moved to the SEO tab in the category editing field:

That’s the keyword that will be used for SEO URL addresses.

Same way, in products the SEO keyword is moved to a separate SEO tab.

You can assign SEO links to products, just like to the categories.