Users of Joomla and the Phoca Cart e-commerce extension often share their websites and ask questions on the Phoca Forum. This valuable feedback frequently highlights common errors they make when operating their online stores.
We've observed the following mistakes on the websites of users who referenced their sites while asking questions about Phoca Cart in the forum. These are just a few examples; if you've encountered other issues, please let us know so we can update this article.
These errors range from visual design flaws to content-related issues. Let's delve into some of them.
Design-Related Issues
1. Poor Product Photography
One of the most significant mistakes is investing time into building an e-commerce store but neglecting to create high-quality product photos. It's crucial to remember that your product photos are often the most important selling point on your e-shop. They are what truly sell the product.
In today's digital age, with readily available desktop and online tools for tasks like background removal, it's a huge missed opportunity not to utilize them. Your photos need to be appealing, and you should analyze whether the background should be part of the product image or not. For example, when selling furniture, it might be beneficial to show the product in a room setting to provide context. However, for smaller items, it's generally better to remove the background, allowing the product itself to stand out.
Often, removing the background and displaying the product in as much detail as possible is desirable. A distracting or unappealing background can draw attention away from the product. You can see the difference in the picture, where the left picture that shows the product in detail is much more interesting than the blurry picture with a distracting background.
2. Inconsistent Image Formats and Sizes
Always strive to have all your product images the same size and format (landscape or portrait). When each image has a different size, it looks unprofessional and unappealing. Dedicating extra time to preparing your e-commerce images is essential.
Inconsistent image formats and sizes make your product listings look disorganized.
If you have basic graphic editing skills, this doesn't have to be complicated. Here's an example using Inkscape:
- Create an image canvas in Inkscape, perhaps a 512x512px document.
- Remove the background from your product photos using an online service.
- Paste the product photo into your canvas and resize it as needed to ensure all products appear similarly sized.
- Export the image with a transparent background (PNG, WEBP) and then upload it to your system.
Following these steps will result in consistent, uniform images without distracting backgrounds, making your product listings look organized and increasing your chances of attracting customers.
3. Missing Shopping Cart Module
We've noticed some websites lack a visible shopping cart module. Users add items to their cart but have no visual confirmation or list of what's in their cart. It's recommended to display at least a shopping cart icon, typically in the top-right corner, visible on both mobile and desktop views. It's also good practice to display a notification that an item has been added to the cart, which Phoca Cart can do via a popup modal window.
A common issue is the lack of feedback after adding an item to the cart - no confirmation, no visible cart contents. Phoca Cart offers modules for this; it's wise to use them.
Once a user adds something to their cart, a modal box should appear with confirmation, and they should then be able to click on the cart icon to view their cart contents (e.g., in an off-canvas display).
4. Insufficiently Prominent "Add to Cart" Button
Sometimes, due to a poorly chosen template, crucial buttons like the "Add to Cart" button aren't prominent enough and might look more like highlighted text. Such buttons can confuse users and hinder the purchasing process.
Always ensure your "Add to Cart" button clearly looks and functions like a button.
5. Overly Long Button Labels
In some languages, button texts can be excessively long, causing buttons to overlap. This is particularly common in German, where you might have two side-by-side buttons like "Produkt Anzeigen" (Show Product) and "In den Warenkorb" (Add to Cart).
When these buttons collide due to their length, it needs to be addressed. Several solutions are available:
- Use the latest Phoca Cart version, where buttons are aligned using Flexbox.
- Hide the text and display only an icon for the less significant button (Phoca Cart has a setting for this).
Design challenges can sometimes seem insurmountable, requiring an individual approach to find the best solution. For example, if you want two buttons aligned to the sides when they fit on one line, but centered and stacked when they don't. CSS Flexbox can handle displaying two buttons in a row and wrapping them to a new line if they don't fit. However, what it cannot do dynamically is change alignment (e.g., space-between when two buttons are on a line and center when there's only one). No CSS rule exists for this, so a compromise must be chosen individually for each website.
The following image shows center alignment when two buttons don't fit on a single line.
6. Missing Icons on Buttons
This usually happens due to a poorly chosen template that conflicts with standard icon fonts. Recent Phoca Cart versions default to SVG icons, so this problem should ideally no longer occur.
However, some sites still exhibit this issue. This can be easily solved. Install the latest version of Phoca Cart and select SVG as the icon type in the settings.
7. Inappropriately Chosen Color Scheme
Each industry often benefits from a specific color scheme. While exceptions exist where a seller uses a unique color palette, it's generally advisable to adhere to a color scheme for your website, logo, and marketing materials that is typical for your industry. If you're unsure, feel free to ask on the Phoca Forum; we're happy to provide guidance.
8. Double Popup Modals
When a customer adds an item to the cart, a modal popup window should appear. Some templates might load certain JavaScript and CSS libraries twice, leading to a duplicated modal.
You need to monitor this and either disable it in the template or replace the template entirely with a more modern and standard one.
9. Not Mobile-Friendly
Although most templates are responsive today, product displays on mobile devices might not always be correct. It's crucial to test your chosen template to ensure everything appears correctly on mobile. Phoca Cart also offers various settings, such as the number of columns for product display on mobile devices. Phoca templates also utilize mobile-friendly techniques for displaying menus, filters, carts, and more.
Content-Related Issues
1. Insufficient Product Descriptions
Product descriptions are a vital part of your e-shop, serving both your customers and search engines. Please remember to describe all your products thoroughly. If some products are similar, it's good to differentiate them using specifications, allowing customers to compare them easily. Detailed descriptions are crucial for customer decision-making and help them choose the right product.
2. Missing Stock Information
Customers need to know if a product is in stock or not before they can make a purchase. Clearly display stock availability for each item.
3. Poor Website Navigation
Complicated or confusing navigation makes it difficult for users to find what they are looking for. Try to simplify your navigation and include only the most important links in your menu, so customers aren't confused and can quickly get to where they need to go. Always be sure that whatever page the user is on, there will be main e-shop link available.
4. Not Having a Clear Return/Refund Policy
Customers may hesitate to buy if they're unsure about your return or refund process. Provide a clear, easy-to-find return and refund policy that reassures customers about their purchase.
5. Not Engaging with Customer Feedback
Ignoring customer reviews, questions, and feedback can harm trust and repeat business. Regularly monitor reviews, respond to customer questions, and make adjustments based on feedback. Always put visible sections on the page where customers can contact you or ask about a specific product.
6. More information on delivery and payment methods
Even if customers see the correct delivery and payment methods in the checkout, it is certainly good to have a section where you describe these methods comprehensively. So that the customer has the opportunity to find out this information before making a purchase.
If you want to successfully sell your products online, your e-shop should definitely avoid design and content errors. You should pay close attention to your product photos to ensure they appeal to your potential customers.
If you're using Joomla and Phoca Cart and encounter any design or other issues on your website, don't hesitate to ask in the Phoca Forum. Most problems can be resolved with a bit of guidance. The same applies if you think of any other mistakes now, please let us know and we will update the article. Thank you.
Phoca Cart has recently unveiled its highly anticipated version 5, a major update packed with a range of new features and improvements designed to enhance both functionality and user experience for online store owners. This release brings significant upgrades across multiple aspects of the e-commerce platform, from visual design to technical performance. Here’s a rundown of the most noteworthy features in Phoca Cart 5.
1. Dark Theme Support
Phoca Cart 5 introduces full dark theme support, making it visually compatible with dark mode settings both in the frontend and the administration panel. This update caters to modern user preferences, allowing online store owners and their customers to switch to a sleeker, eye-friendly interface that works seamlessly in dark mode.
2. Watermark and AVIF Support
In terms of image handling, Phoca Cart 5 adds support for watermarks and the AVIF image format. Following the earlier adoption of the modern WEBP format, Phoca Cart now also supports AVIF, a format known for its superior image compression. Additionally, store owners can now apply watermarks to their product thumbnails, ensuring brand protection and image quality.
3. SQL Query Optimization
Phoca Cart 5 introduces enhanced SQL query optimization, significantly improving performance for large stores with tens of thousands of products, thousands of categories, and hundreds of thousands of orders. While product list queries typically use pagination and were not a performance issue, we focused on optimizing category lists, especially when loading them into trees. This area saw the most significant improvements.
4. Advanced Product Batch Processing
If you use the batch function to copy products and duplicate entire products or just some of their properties, you'll be pleased to know that product batch processing has been significantly expanded with many additional parameters. In Phoca Cart 5, the options for selecting what to include when copying a product have been significantly expanded.
5. New Multilanguage Feature
The latest release of Phoca Cart 5 introduces a major innovation: a brand-new multilanguage feature designed to overcome the limitations of previous multilingual support. In earlier versions, Phoca Cart supported the standard Joomla core multilanguage system and external extensions. However, these solutions had some drawbacks. External extensions lacked full plugin support, while Joomla’s core multilanguage feature was not ideal for e-commerce. Joomla’s core multilanguage feature system assigns a new database ID for each language variant, leading to challenges such as separate stock management for the same product in different languages. To address these issues, Phoca Cart 5 introduces a completely new multilanguage system that operates on the database layer. This solution is significantly faster, more efficient, and eliminates the previous limitations. Additionally, Phoca Cart 5 now supports the n3t Language Filter extension, which is especially useful for handling parameters stored in global settings.
6. Back in Stock Notification
For online stores with popular products that occasionally run out of stock, Phoca Cart 5 now includes a Back in Stock Notification feature. Customers can sign up for alerts to be notified as soon as a product they are interested in becomes available again, helping to maintain customer interest and reduce lost sales.
7. Schema.org Support
In response to the growing importance of structured data for SEO, Phoca Cart 5 introduces support for Schema.org markup. This feature allows store owners to integrate rich product data directly on product pages, which can improve visibility and enhance search engine optimization. Enabling Schema.org support through the Phoca Cart options ensures products are properly indexed with relevant metadata.
8. Joomla Mail Templates Integration
Joomla 5.2 introduced the Mail Template Layout feature, which Phoca Cart 5 now takes advantage of for sending emails. This feature allows for greater flexibility in managing email templates by enabling the creation of custom layouts. It not only provides the ability to design personalized templates, but also introduces the option to send various multilingual versions of emails. With this improvement, it’s easier to manage both the presentation and language options for outgoing communications.
9. New Payment and Shipping Plugins
Phoca Cart 5 expands its payment and shipping options with a selection of new plugins. These additions provide greater flexibility for store owners when configuring payment gateways and delivery methods, helping them accommodate a broader range of customer preferences and requirements.
10. New Templates
Phoca Cart 5 introduces seven new templates, offering both child templates for the core Joomla Cassiopeia template and standalone templates designed for unique store designs.
New child templates for Cassiopeia:
- Phoca Cart Toys Child Template
- Phoca Cart Tools Child Template
- Phoca Cart Furniture Child Template
- Phoca Cart Beauty Child Template.
These child templates provide flexibility while maintaining compatibility with the default Joomla Cassiopeia template.
Standalone Templates:
- Phoca Cart Premiere Template
- Phoca Cart Horizon Template
- Phoca Cart Gourmet Template.
These three standalone templates stand out for their simplicity and efficiency. What makes them particularly unique is that they do not rely on any external frameworks, yet they offer the same powerful features as framework-based templates. For instance, users can switch to dark mode, customize the layout with additional rows or columns for different module positions, and more—all of which can be set directly within the template settings.
Despite the introduction of these new templates, Phoca Cart continues to support popular template frameworks such as YOOtheme, Gantry, Helix, T4, Astroid, Sparky and others. Phoca Cart output is available in the latest versions of Bootstrap or UIkit. UIkit is specifically used for YOOtheme templates, with full support for the latest YOOtheme Pro. Very interesting extensions are currently being created for this framework, such as PCUikit and others.
Looking Forward to Joomla 6 Compatibility
Phoca Cart 5 is fully optimized for Joomla 5, but it also prepares for future compatibility with Joomla 6. The codebase is being fine-tuned to ensure seamless integration with upcoming Joomla versions, ensuring that Phoca Cart will continue to deliver excellent performance as Joomla evolves.
Conclusion
Phoca Cart 5 represents a major step forward in enhancing the performance, customization, and functionality of online stores powered by Joomla. From dark theme support and image optimization to a revamped multilanguage system and new templates, this update introduces numerous features that will greatly benefit store owners looking to improve their e-commerce operations.
The development and testing process for Phoca Cart 5 involved contributions from a large community of developers, testers, and translators, with over a hundred beta versions released. The Phoca Cart team expresses its gratitude to everyone who supported the development, from contributing code and translations to providing valuable feedback.
With its robust set of new features, Phoca Cart 5 is set to deliver a faster, more flexible, and more powerful e-commerce solution for Joomla users.
The Authorize.net payment plugin has been updated by its developers to work on Phoca Cart 4 and Phoca 5.
It is a native written extension using new Joomla architecture which makes the plugin compatible with Joomla 4/5 and even further v.6.
It works fine with both Phoca Cart 4+ (Joomla 4) and Phoca Cart 5 (Joomla 5) and needs PHP ver.8.1 as a mininum requirement.
Authorize.net is a payment gateway service provider that allows businesses to accept and process a wide range of online payment methods.
As long as your business is based in the United States, Canada, Europe or Australia, you can accept international payments for anywhere in the world.
Here is the short video overview and you also can test how the plugin works on the demo site.
A new payment plugin for Phoca Cart is here! NorrNext team is announced the release of their new payment plugin providing seamless integration of Mollie to Phoca Cart. The plugin is compatible with both editions - Phoca Cart 4.0 (stable) and even with Phoca Cart 5 (still in beta version, soon to be released as a stable).
Features:
- ✔️ The plugin is Joomla 5 native (no Backwards Compatibility plugin required)
- ✔️ Work seamlessly on Phoca Cart 4 and Phoca Cart 5 editions
- ✔️ PHP 8.2 ready
- ✔️ Joomla Update System support
- ✔️ Translations into different languages
What is Mollie?
Mollie is a popular payment service provider that processes online payments for merchants and other organisations. It is one of the five most valuable fintech organisations in Europe and consistently ranks in the world’s top 20. The company have local offices in The Netherlands, Belgium, France, Germany and the UK.
Benefits of using Mollie
Mollie works with many other payment providers covering more than 32+ countries where sellers can use Mollie. You can enable and accept paymenths through the following payment providers:
International:
- Bank cards
- Mobile payments: Apple Pay, Google Pay
- SEPA (EU countries)
- Klarna (international)
- PayPal (international)
Benelux region and France:
- iDEAL (Netherlands)
- in3 (the Netherlands)
- Bancontact (Belgium)
- Sodexo (Belgium)
- Monizee (Belgium)
- Edenred (Belgium)
- Belfius Pay Button (Belgium)
- KBC Payment button (Belgium)
- Cartes Bancaires (France)
- Alma (France)
Germany/Austria/Switzerland and some other countries:
- giropay (Germany)
- Billie (Germany, Netherlands, Austria, Sweden)
- TWINT (Switzerland)
- EPS payments (Austria)
- Riverty (Germany, Austria, the Netherlands, Sweden, Norway, Denmark, Finland)
Sweden:
- Swish (Sweden)
- Trustly (Sweden)
Italy:
- Satispay (Italy)
- PostePay (Italy)
- BANCOMAT Pay (Italy)
Poland:
- BLIK (Poland)
- Przelewy24 (Poland)
Other
- Bacs (United Kingdom)
- Gift cards: Gift cards, Eco- gift- and meal vouchers
More about Mollie for Phoca Cart:
And you always welcome to discuss on Phoca's forum.
We're going to show you how to create an e-commerce website using Joomla and Phoca Cart.
All the actions that are described in this article can be seen in the following video:
We will focus not so much on installing Joomla itself and not so much on managing Phoca Cart in administration, but mainly on building the whole e-commerce website, including various modules, etc.
So we will start our tutorial after we have successfully installed Joomla. If you don't know how to install Joomla, then see following link: Install Joomla itself.
If we have Joomla installed correctly, we can get started. We will start with the administration. And before we get into the installation of the main component - Phoca Cart - e-commerce solution for Joomla, we will show you some small extensions that will help us simplify our work in the administration. We start with the Phoca Top Menu module.
Phoca Top Menu module
See YouTube video - Phoca Top Menu module chapter
If you've worked with Joomla before, you'll know in versions before Joomla 4 there was a top menu. This top menu is very beneficial when working on the desktop, allowing you to access different parts of the system faster. After installing the module, we go to Module Manager and publish the module, set its position, in our case "customtop" and select what menu to display. After successful setup, we will see the top menu in Joomla administration, which will allow us to access different parts of the system much faster.
See Phoca Top Menu module website
Phoca Desktop System plugin
See YouTube video - Phoca Desktop System plugin chapter
Another extension is the Phoca Desktop System plugin. This plugin will create a shortcut area directly on the main administration page.
After installing this plugin and publishing it, we need to define shortcuts to different parts of the system. Shortcuts are defined using JSON format and this is so that when admins create a new Joomla page, they don't have to create each shortcut one by one. Administrators save and update the shortcuts in a file and then copy the contents of the file into the options of this plugin. We can also choose a background image for the shortcuts to make the admin work more comfortable.
After saving the plugin options, we will get a section on the administration homepage showing the individual shortcuts. An example can be not only a shortcut to list of all articles, but also a shortcut to create a new article. There is no limit to the number or use of shortcuts, and it is up to the administrators to decide what shortcuts to create for their users.
See Phoca Desktop System plugin website
Phoca Filter Options System plugin
See YouTube video - Phoca Filter Options System plugin chapter
A very important part of the system is search and filtering. If an extension has many parameters, then it is difficult to find your way through all of them. Phoca Cart, like any e-commerce extension, contains many parameters and therefore it is beneficial to be able to filter these parameters easily.
For this we use the Phoca Filter Options System plugin.
After installing and publishing this plugin, we will see a filter box in the system settings or in the settings of each extension. Using this filter box, we can quickly find the parameter we need.
See Phoca Filter Options System plugin website
Phoca Commander
See YouTube video - Phoca Filter Commander chapter
Sometimes we need to manage or edit folders and files on our website.
An example would be uploading user.css to the template folder. If user.css doesn't mean anything to you, you should know that Joomla has a great system of overriding both HTML output and CSS classes. With overrides you can customize design of your own page and you won't lose changes when you update the system. Because those files are stored in places that the update does not overwrite. We're talking about template overrides, see more information about Joomla template overrides feature.
The component that allows us to upload our own files to the system and edit them is called Phoca Commander. Phoca Commander is dual panel file manager for Joomla.
As an example we will use uploading a custom style for the administration template and modifying it.
As you can see, using a custom style we have changed the design of the administration template. Such changes are stored in the template folder, overwrite the standard template design, and are not lost on update. And all this is used both in the administration and in the frontend.
Phoca Commander helps us in all this, and of course it has many other features for working with folders and files.
Phoca Cart
See YouTube video - Phoca Cart chapter
And now we come to the main extension of our website - Phoca Cart.
First, we will install the basic Phoca Cart package, which includes the main component, basic payment and shipping plugins.
Then we install the demo data and finally the package of ten core modules.
So we'll start with the main package. After installing the main package, a wizard will pop up and give us information on what all we should do to make our site a working e-commerce website.
Before we start filling in the different parts, we will install the demo data. The demo data will create our categories, products, shipping and payment methods.
Phoca Cart demo data
See YouTube video - Phoca Cart demo data chapter
After installing the demo data, we go back to the main component and run the wizard so we know what parts we still need to add.
The demo data installation package has created categories and products for us. In our example, we will not use taxes, so we will leave taxes blank.
The demo data package also created our shipping and payment methods. If we want our system to contain all the world countries and regions, then we import the countries and regions. If we don't want that, we fill in our own countries and regions.
Menu link to Phoca Cart
See YouTube video - Menu link to Phoca Cart chapter
Each part of the system needs a menu link to take users to that part. And it's no different with e-commerce extensions. Even our shop needs its own menu link. That's why we go to Joomla menu manager and create one menu link there. It is recommended to always create one link so that the SEF links are uniform. In our case, we will create a menu link to Phoca Cart categories view, which is the default link.
This will be our main link to our shop displayed on our frontend website.
Phoca Cart main modules package
See YouTube video - Phoca Cart main modules package chapter
Each Joomla page includes modules. The most famous is probably the module for displaying menu links. Think of a module as part of a page. For an e-commerce website, we will want to display other parts besides the menu such as cart, wish list, comparison list, currency list or search and filter module.
Phoca Cart has prepared a package of modules, which contains ten of the most important modules. These can all be easily installed at once.
So, we will install the modules for now and in the next chapters we will introduce some of them in detail and show them on the website.
Download Phoca Cart main module package
Phoca Cart main modules setting
See YouTube video - Phoca Cart main modules setting chapter
Let's introduce some basic modules for an e-commerce website.
Phoca Cart Search module
Let's start with the Phoca Cart Search module. This is a search module. It displays a search form on the website where users can search for individual products. The search module works closely with the filter module, which can be used to filter individual parameters and display products based on custom requirements.
Phoca Cart Cart module
One of the most important modules is the Phoca Cart Cart module. This module displays all products that the user has added to the shopping cart. No matter what page the user is on, the shopping cart module should always be accessible so that users can check which products they have ordered.
Phoca Cart Compare module
If the user is not sure and is deciding between two similar products, they have the option to compare these products. For example, by parameters, attributes or specifications. The Phoca Cart Compare module displays a list of all the products the user has added for comparison.
Phoca Cart Currency module
If your shop allows users to pay in multiple currencies, be sure to display the Phoca Cart Currency module, which lists all available currencies for that particular shop. Users can then choose the currency they want to use when paying.
Phoca Cart Wish List module
Some users don't buy products right away, but still want to indicate that they are interested in a particular product. For this purpose, there is the Phoca Cart Wish List module, which allows users to create a list of products they would like to purchase.
So we have published all the modules and set their positions for display. The modules are now displayed on the website and ready to use.
Phoca Cart Toys Cassiopeia Child template
See YouTube video - Phoca Cart Toys Cassiopei Child template chapter
OK, but if we look at the page, we can see that those individual modules take up a lot of space on the page. For example, a filtering module would be better suited in their place. It's just not OK.
Something needs to be done about the design. We haven't even described what types of products we're going to offer yet. So let's fix that and reveal that we're dedicating this entire demo site to selling toys.
For our example, we're going to use the Cassiopeia Child template. We will install the Phoca Cart Toys Cassiopeia Child Template.
Download Phoca Cart Cassiopeai Child templates
Moving Phoca Cart main modules to top postion
See YouTube video - Moving Phoca Cart main modules to top postion chapter
After installing this template, we go to the template styles settings in Joomla and mark the template we installed as default.
In our case we will not use the logo position that is set in the template, but we will create our own module for the logo. This will give us more freedom in displaying the logo.
So we will create a new module - the type will be "custom". We'll set this module to the "topbar" position and insert the custom HTML with the logo.
On the page we will want to display the menu links right next to the logo. Therefore, we will modify the existing module for menu items and set it to "topbar" position as well.
In this one line, where the logo and menu are displayed, we will also want to display our selected modules. But beware, we will not want to display the contents of these modules, but only links to these contents in the form of icons. This is where Joomla's great feature - template overrides - will help us. Our child template contains template overrides for the following modules:
- Phoca Cart Search module
- Phoca Cart Cart module
- Phoca Cart Wish List module
- Phoca Cart Compare module
- Phoca Cart Currency module
We will set all these modules to "topbar" position, and publish them all. We will set them not to display the title and to be displayed on all pages.
We have now freed up space on the right side of the website, but the login module is still there. We will move it to the left side and add the Phoca Cart Filter module to it. So that users can filter individual parameters and display products according to selected criteria.
So now our site is divided into three parts. The top part contains: logo, menu and various Phoca Cart modules. The left side contains the login module and the filter module. The right one contains the main part of the page - for example categories or product list.
Phoca Cart Particles module - Image and Content type - module in top position
See YouTube video - Phoca Cart Particles module - Image and Content type - module in top position chapter
Any website that deals with selling goods or services should include some banners that invite customers to buy.
Let's create such a banner in the header of the page. Let's use Phoca Cart Particles Module to create it.
Phoca Cart Particles module is basically the opposite of page builders. First we don't deal with the design, but with the data. So we first enter the data we want to display and then select the appropriate design. The advantage is that we can change the design simply by switching to a different output style.
In our banner we will want to display some title, description and image. But we will also want to display a "Shop now" button.
We chose the "Image and content" type. This type does not contain individual items and therefore all its settings will be done in the "Main" tab.
So first we will insert a title.
Next, we select an image. We will use one image from existing products.
We will also create a "Shop now" button and use the product list page as a link for this button.
Finally, we'll insert some description. This can of course be formatted using HTML.
We save everything and we can see our newly created banner in the frontend.
See Phoca Particles module website
Phoca Cart Product module
See YouTube video - Phoca Cart Product module chapter
We have finished the top part of our site - logo, menu, various Phoca Cart modules. We have also finished the left part of the page, where we display the filter and login. But let's use other Phoca Cart modules as well.
One of them is the Phoca Cart Product module. We're going to use this module four times directly at the bottom of our page. We'll create four different instances of this module and display the following statistical information:
- Best seller products
- Featured products
- Latest products
- Most viewed products.
Best seller products
So let's start with Best seller products. As with all modules, we set whether to display the title or not. We set the position of this module, in this case it is the "bottom-a" position. We choose the correct ordering and number of items to display. We also don't forget to display this module on all pages. We also set the layout as a list.
Featured products
The second module will be featured products. Since we saved the previous module as a copy, we don't need to set all the parameters as in the first module. Only the ones that are different.
Latest products
This is how we proceed to the next module, which is called Latest products. As you can see, again we are only changing the parameters that have changed. In this case, we just publish the module and change ordering of the items to match the meaning of the module.
Most viewed products
The last module in this series will be Most viewed products. Again, we'll just publish it and change the ordering.
Once we have all four modules created, we'll display a list of them in our administration so that we can sort them to our liking.
So we'll do the ordering and the result can be seen in the frontend. The data in these modules is displayed automatically. There is no need to fill them, they are automatically created according to the statistical data from our shop.
See Phoca Cart Product module website
Phoca Cart Particles module - Image and Feature Box - module in bottom position
See YouTube video - Phoca Cart Particles module - Image and Feature Box type - module in bottom position chapter
At the top of the page we have a banner with a title, a description and a picture. Also a button with a link leading to the list of products.
Let's create a similar banner in the footer of the page. We'll use the same module for this - Phoca Particles module. The only difference is that now we will want to list more items - specifically the names of the items and their short description. Then some product image next to it.
So we'll start by creating a new instance of the Phoca Particles module. Again, we'll set the title, make it public, and select the module type. In this case, the type will be "Image and Feature Box".
In the "Main" tab, we will select one main product image to represent the entire module.
After that, we'll go to the "Items" tab and fill in all the items. In our case we will create four items. Each item will contain a title, an image and a short description.
We follow the same procedure for each item until we fill in the data for the last item.
We will save everything. We can add a button and link again to the list of items.
We have saved the data and we can change the design of the resulting module at any time. We will only need to change some parameters to do this without having to modify the data.
See Phoca Particles module website
Phoca Cart Brands module
See YouTube video - Phoca Cart Brands module chapter
One of the other Phoca Cart modules for which we don't have to fill in any data, and which displays data directly from Phoca Cart, is the Phoca Cart Brands module.
Phoca Cart Brands module will show us a slideshow of different brands of products from our shop.
We set up the module in the same way as all other modules. We set the title, publish, set the position, or set other parameters.
In the list of modules, we then reassign the module to the position where we want to display it.
After that, we will see a slideshow in the frontend of the brands of the products we sell in the shop.
See Phoca Cart Brands module website
Phoca Cart Particles module - Feature Box - module in bottom position
See YouTube video - Phoca Cart Particles module - Feature Box type - module in bottom position chapter
Now we will show one last use of the Phoca Particles module.
Let's say we want to give customers information about our services, that we have "fast and free delivery", we also have "online customer support", we provide "money back guarantee" and payment with us is secured.
We'll want to display these four pieces of information in four boxes, which will include a title and description, plus an SVG icon representing the service.
We already know the Phoca Particles module. So the setup will be plain. We will set the position, publish the module and select the module type. In this case it will be the "Feature Box" type.
We won't set anything in the "Main" tab, but we'll directly set four items in the "Items" tab. Each item will contain a title, an SVG icon and a description.
Once we set the items, we can save the modules. We can then change the ordering of the modules in the module list and can already see the result in the frontend.
See Phoca Particles module website
Phoca Email Newsletter module - in footer position
See YouTube video - Phoca Email Newsletter module - in footer position chapter
Now our page is missing only the footer.
The footer usually displays contact information and so on. We will display the newsletter module here for an example.
So we will install the Phoca Email Newsletter module, which is part of the Phoca Email component. So we'll also install the Phoca Email component.
The Phoca Email component allows us to send emails directly from the Joomla administration, but it also allows us to create and manage different newsletters and send them to users. The Phoca Email component works together with the Phoca Cart. For example, it is possible for a user to sign up for newsletters directly when creating an order.
We can already set up modules, so we publish the module and set its position in the footer.
In addition to the newsletter module, we will add a custom module with information about our site to the footer.
We change the ordering of both modules and then we can see these modules in the footer of our page.
See Phoca Email website
See Phoca Email Newsletter module website
Phoca Open Graph System plugin
See YouTube video - Phoca Open Graph System plugin chapter
Let's introduce one more plugin that is significant with respect to SEO. It's actually a group of two plugins: the Phoca Open Graph content plugin, which is used for articles, and the Phoca Open Graph system plugin, which is used for the rest of the website.
In our case, we'll use the Phoca Open Graph system plugin, which works with Phoca Cart.
Phoca Open Graph System plugin adds open graph information to the website. The open graph data that is displayed as meta tags then allows you to display information from that web page, for example, on social networks. If we link to our page on social networks, this link is displayed together with the page title, an image and a short description.
So we set up this plugin, we publish it. Then we make sure that the product for which we want to display open graph information contains a description in addition to the title and image.
We then navigate to the product on our website, copy its URL, and paste it into a test application that will show us how the link will appear for example on social media.
Displaying meta tags with open graph information is one of the basic tasks if we want to share links to our products.
See Phoca Open Graph System plugin website
See Phoca Open Graph Content plugin website
Phoca Cart - Checkout
See YouTube video - Phoca Cart - Checkout chapter
And we're coming to the end. Let's finally show the checkout procedure.
Checkout is done by the user who logs in. Guest checkout is also possible in Phoca Cart. After logging in, the customer enters the address information and selects the shipping and payment method. The customer then confirms the order.
Phoca Cart Shipping Packeta plugin
Some shipping and payment methods were created for us when we installed the demo data. Let's look at one of the shipping method plugins. Phoca Cart Shipping Packeta plugin (Phoca Cart Shipping Zásilkovna plugin). This plugin integrates the services of Packeta (Zásilkovna), a company that operates parcel services mainly in Central Europe.
So we install the plugin and check if our shipping method has this plugin selected.
See Phoca Cart Shipping Packeta plugin website
Phoca PDF component and the Phoca PDF Phoca Cart plugin
We will do the same for the payment methods. For example, for the payment method "bank transfer" we will want to show the customer a QR code with the payment details.
To display the QR code in Phoca Cart, we will install the Phoca PDF component and the Phoca PDF Phoca Cart plugin. This component and plugin will allow us to display the QR code. In addition to the QR code, this component and plugin will take care of creating PDF documents such as invoices or even printing product catalogues.
Phoca PDF Phoca Cart plugin needs to be published.
See Phoca PDF website
See Phoca PDF Phoca Cart plugin website
Checkout
Let's move on to the checkout itself. First we select a product and add it to the shopping cart. Then we go to the checkout page.
This is where the customer logs in and enters the details required for delivery of the goods. The fields in the address section of the form can of course be set up and custom fields can be supplied.
Once the customer has saved address details, they proceed to select a shipping method. Here we show the implementation of the external service widget. Here the customer uses a map to select the branch of the shipping location.
The customer saves the selection of the shipping method, followed by the selection of the payment method. Here the customer selects, for example, the bank transfer method, saves it and continues.
The only thing left to do is to agree to the terms and conditions and confirm the order.
As the customer has selected the payment method "bank transfer", a QR code with the payment details will be displayed at the end of the order process. This QR code will of course be sent to the customer in an email and in PDF documents such as invoices.
The merchant sees this order immediately in the order list in administration. The merchant can click on the order to view the order details. Directly in the order list, the merchant can change the order status or view more detailed information about shipping and payment methods.
In our example, the merchant can see the shipping method information. This information can then be exported to an external service to prepare the order for shipping.
Conclusion
In this article we have described some tips and basic features of Phoca Cart. Phoca Cart, like Joomla, contains a large number of extensions and therefore the possibilities when creating an e-commerce site are essentially unlimited. If you are interested in learning more, please visit phoca.cz/phocacart.