In this article, we will first review Phoca Cart Configuration Options – which is one of the most important areas to set up when starting a new store. We will then explain how to set up a separate Shop Menu for stores where the Shop or selling products is simply one part of their business website.
Phoca Cart Configuration Options are reached by going to the Phoca Cart Control Panel and clicking on the OPTIONS button in the upper right corner. This displays a screen with 9 tabs:
While most of these settings can be left at their default values, it can still take some time to review all of these options in order to understand how they affect the content and appearance of your online store. We will not cover every single option. But we will try to explain the most important options.
Options Display Tab
The first tab is called Display. Scroll down the page and you will see that it has been divided into 7 Views followed by a long list of General Display Options followed by Ajax Options and Theme options.
Categories View includes settings that control how all of the categories are displayed on your SHOP HOME page:
Number of Columns is how many columns of categories appear on your Home page. If you have a lot of categories, you may want to leave it at 3 or even raise it to 4 (which may require making the Small Thumbnail image smaller). On the other hand, if you only have a few categories and you want to display a Description for each category, then consider reducing the number of columns to 2 or even 1.
Display Subcategories by default is set to 0. This means that sub-categories do not appear on your Home page. If you want to display links to sub-categories on your Home page, then set this for the maximum number of sub-categories you are using. Keep in mind that this will only display sub-categories as links. But in the future, there will be more and better display options for the Home page.
Display Category Description. Default is No. Leave it this way if you have a lot of categories to display on your SHOP Home page. But if you only have a few categories, then change this option to Yes.
Image Width. Default is blank meaning the image can have any width. Generally, you do not want to set image width – only image height. Best to leave this set for blank.
Image Height. Default is blank. You may want to set this. But it is generally best to leave this blank assuming that you will be letting Phoca Cart automatically generate your Thumbnails and thus all images will be at the same height anyway. (The automatic thumbnail settings can be changed in the Main tab).
Display View Category button. This should always be left at Yes.
Category Name as Link. This should also be left at Yes.
Image (Categories View) This is the image for the Shop Home Page all categories view. You generally do not want or need an image here.
Category and Items View (Products View)
This sets the page layout for each of your individual Category pages.
Number of Columns sets the number of columns for the products displayed on Category pages. 3 columns is best if you have lots of products. 1 or 2 is better if you only have a few products in each category.
Display Subcategories Default is 0. Change this to the maximum number of sub-categories you are using.
Subcategory Layout. Lists is default. This just displays sub-categories as links – which contain no images and is not visually appealing. Try changing to Image Boxes.
Number of Columns Subcategories. Default is 3. But I think this only matters if you have the Subcategory Layout set for Image Boxes.
Display Description Set to no if you have lots of products and yes if you only have a few products.
Display Product Header h3 is default and is usually your best option. But if you have lots of products and need smaller font size, then try changing this to h4, h5 or h6.
Add to Cart – Displays the Add to Cart button with products shown on the Category page. Yes standard is default and usually your best option – unless you have a lot of products and only want the Add to Cart button displayed on the individual Product pages.
Hide Product Attributes – Default is yes. But if you only have a few products in each category, consider changing this to No. Displaying Product Attributes will slow down page loading slightly.
Product Ordering – Ordering Ascending is default. This means you control the order of appears by where the Product appears in your Phoca Cart Products Table. There are many other options such as Least to Most Expensive.
Product Ordering Values – Leave this alone.
(scroll down the page)
Display Switch Layout Type – If you want to allow customers to choose between three layout options on the Category page, leave this set for Yes. But because this can make your page appear more complex than it needs to be, consider changing this to No and then using only the Default Layout – which you can set.
Display Layout (Category Items View) – The options are Grid, Grid List and List. Grid List has the largest image – but also displays the fewest products on the screen. List displays the most products but has the smallest product images. Grid is the most common option.
Display Star Rating – Default is no. Change to Yes if you want customers to be able to give ratings.
Product Name as Link Default is no. I recommend changing to Yes.
Add a Question Button. Default is No. If you are willing to answer questions, then definitely change this to Yes.
Display Labels (Category Items View) – Set this to Yes (Tags and Labels). We will review how to create Product tags and labels in Chapter 4 Shop Processes.
Display Tags – I recommend setting this to No as the Tags are already visible above the image of the product. Alternately, if you have a lot of tags, you can just display labels above the Product image and display tags below the Product description.
Image (Items View) it is generally best to leave this blank.
Item View (Product View) - This is the single Product page.
Add to Cart – leave it set for Yes (Standard)
Hide Product Attributes – Leave it set for No. We will cover Product Attributes in Chapter 4 – Shop Processes. Attributes add selection boxes for sizes and colors.
Display Navigation – Default is No. I recommend changing this to Yes.
Tags (Links) – default is no. I recommend leaving it at No.
Display Labels – change this to Yes (Tags and Labels).
Display Tags – Item View – this can be set to Yes.
Display Parameters – Parameters are like tags but are displayed below the Product Specification Tabs area. Also Parameters can not be linked to Categories and therefore can not be displayed in the side menu with a Category Module. Sadly, this means that parameters might not even be seen. We therefore will not use Parameters.
Checkout View – This is the page that displays after a Product has been added to the Cart and after the customer is done shopping and clicks Check Out in the Cart View.
Enable Captcha in Checkout – This is best set to Guests Only as Registered Members have already passed the Captcha test.
Note that Adding the Guest Checkout option is set in the Users tab rather than in this Display tab.
Info View – This feature was added in October 2020 and allows you to control the content that appears on the Info View page which is the page that appears after a customer has completed their purchase of a product. By default, this page historically has just said, Thank you for buying this product. You can create a Joomla article with an image and instructions on how to return to the Home page, how to sign up for the store newsletter or whatever additional information you want on this page.
General Display Options
Main Description – This allows you to create a Joomla article called Welcome to our Store and place it at the top of the Phoca Cart Categories page. End the article with the advice: Choose from the following categories of products: - as the categories of products are displayed immediately after the Welcome article.
Interactive Change (Image) – set to Yes if you have created different images for different colors of products. When a customer changes the color attribute, the image of the product changes to the new color.
Display Hot Icon – Leave set for 0 as we will use Labels and Tags to give us more control over this item.
Display Featured Text – If you want to assign Featured Products in the main product edit screen, then type in Featured! here. But if you would rather use Labels and Tags to define featured products, then leave this box empty.
Theme Options – we will review this section when we discuss Shop Appearance in Chapter 3.
Guest Checkout – Change this from No to Yes.
Images and Thumbnails – Here is where you can change the size of image thumbnails.
Enable Wizard – Set to No to hide the Getting Started Wizard
Remove IDs from URLs – change from No to Yes to have shorter and more friendly URLs.
Store Title: Type in the name of your store.
Display Checkout Terms and Conditions Checkbox = Change from Yes Require to No if you want to simplify the checkout process. Otherwise create a custom Joomla article and select it.
Display Checkout Newsletter Checkbox – Change from No to Yes and add an article if you want to give customers the option of signing up for your store newsletter.
Scroll down to the Security Options and enter ReCaptcha Site key and Private key to activate Invisible Captcha.
Newsletter Options – need to be set if using Phoca Newsletter component.
When you are done setting all of your Configuration Options, click Save and Close to return to the main Phoca Cart Control Panel.
How to Create a Separate Shop Menu
If you run a store that displays web pages to courses and/or other services on your main menu, you may want a separate SHOP menu to display web pages to products sold by your store. To create a new menu, click on Menus, Manage, Add New Menu:
We will call our new menu Shop and give it the type of shop. Add a short description and click Save and Close. This adds our new menu to our list of menus.
Add a Menu Module to Display our New Shop Menu
Click on the blue button to add a module we need to display our new menu on our website. Note that a module is just a box of content. This will bring up a Pop Up where we type in a title and assign the module to a module position. For now, we will place our Shop in the Banner of the Protostar menu (since Protostar is the default template and we have not yet installed a better template). This will place our Shop Menu just below our Website header and our Main Menu just above the website header.
By default, new menus are assigned to all pages. But if you only want the menu to appear on some pages, click the Menu Assignment tab. Then click Save and Close.
Create a Shop Home Menu Item
To get the new menu to appear, we need to create at least one menu item for our new menu. Click on Menus, Shop, Create New Menu Item. Then for Menu Item Type, click on the blue SELECT button. Then click Phoca Cart, Categories View. For the Title, we will type, OUR SHOP HOME. Then click Save and Close.
Then view our site and click on the Our Shop Home menu item. This displays the Phoca Cart Shop with the Demo Content. Here is the link to this page:
It is a good idea to create links between your Shop Menu and your Main Menu. To do this, go to Menus, Main Menu, New Item. Then click SELECT. for Menu item type, click System Links, URL. Then paste the link to your Shop in the link box. For the menu title, we will type in Visit Our Shop. Note that each menu item needs to have a unique title. Then click Save and Close.
We also need a link from our Shop Menu back to our website Home page. Here is the URL for our Home page:
Go to Menus, Shop, Add New Menu Item. Then click SELECT, System Links, URL. Then copy and paste the URL of your Home page into the Link box. Call the menu item, BACK TO HOME. Then click Save and Close.
Finally, go to Extensions, Modules and open the Our Shop module. Click on Menu Assignment and change it so that the Shop Menu Module only displays on Selected pages. Click None. Then choose the Shop Menu, OUR SHOP HOME page. Then click Save and Close and View Site.
You will see that the Main Menu is at the top of the Our Shop Home page and the Shop Menu is under the header. To get the Main Menu module to not display on our Shop Home page, go to Extensions, Modules, Main Menu, Menu Assignment and click on All Pages Except Those Selected. Click None. Then in the Shop Menu, check Our Shop Home. Then click Save and Close.
Finally, click on the Our Shop module to open it and change its Module Position to Protostar Navigation Position 1. Click Save and Close and View Site. The Shop menu is no longer on the Home page. Click on Visit our Shop in the Main Menu.
This takes you to our shop Home page. Then click on Back to Home. This takes us back to the website main Home page.
There is a problem with the Shop Menu in that it displays as a List down the page rather than across the page. To fix this, go to Extensions, Modules and open the Our Shop module. Click on the Advanced tab and for the Menu Item Suffix, type in nav-pills. Then click Save and Close.
Overview of Phoca Cart Modules
Now that we have a basic understanding of Phoca Cart menus and menu items, let’s look at the modules that come installed with Phoca Cart. A Module is simply a box of content displayed in a particular place, called a Module Position, on one of more web pages. To see the Phoca Cart default modules, go to Extensions, Modules.
There are 10 modules. We have already added the Cart module. Here we will first look at the Phoca Cart Product Scroller Module and then look at the Phoca Cart Category Module.
Phoca Cart Product Scroller Module
Open the Product Scroller Module and change the title to These are some of our Featured Products…
Assign it to the Protostar Banner position. For Featured Products Only, set it to Yes. For Limit, enter 6. For Hide Prices, set it for Yes. For Display View Product button, set it for Yes. For Display Product Description, set it for Yes. For slides per view, set it for 3.
Then click on the Menu Assignment tab and change it to Only on the pages selected. Click None, then select the Shop Home page. Then click Save and Close. Then click View Site.
The slider appears above our Welcome article but below our header.
Phoca Cart Category Module
Open the Phoca Cart Category module and change its name to Product Categories. Assign it to Protostar Left position which is position 8.
Then in the Display Categories box, select the categories you want to display in this module. If you want to customize the appearance of the module, give it a module class suffix.
Then click Menu Assignment and assign it to only appear on the Our Shop Home page. Then click Save and Close and View Site. This module now appears to the left of our Shop Home Welcome article and below our Featured Products Slider.
You can have more than one category module on each page. In Chapter 4, we will add tags and labels and review how to display categories associated with these tags and labels in a Phoca Cart category module.
This finishes our introduction to the Phoca Cart back end. In the next section, we will look at the Phoca Cart Extensions and discuss a few free tools that can help you expand the functionality of your online store.