3.4 Template and Language Overrides

In the section, we will review how to use Template and Language overrides to customize the appearance of your business website. Here is our Product page:

01

Let’s say you are just starting your online store and that on the Products page, you want to hide the Reviews Section and the Original Price and Manufacturer and the SKU (Stock Keeping Unit). First, see if there might be an easier way to hide any of these three things without doing a Template override. Click on Products, Golf and you will see that Reviews are not controlled in the Products page. But you can delete the Original Price and the SKU and Manufacturer here. But perhaps you want to keep the SKU and Manufacturer but simply not display them. And you want to make this change on all products.

Click on Manufacturers and you will see that there are three manufacturers shown. Select all three and click Unpublish. Sadly, even after clearing the browser cache, the manufacturer is still shown.

Next, click on Reviews. This is the place to edit existing reviews. But you cannot hide the Reviews section here.

Next. click on Options at the upper right corner of the Phoca Cart control panel. Click on the Users tab. Change Enable Review from Yes to No. Then click Save and View Site. The Review section is no longer shown. One down. Two to go.

Under the Display tab, scroll down to Category and Items View. At the bottom of this section, change Display Manufacturer from Yes to No. Then save this change and then view your site. It still is showing the Manufacturer.

Go to Joomla System Cache and delete the Astroid Cache. Then clear the expired cache. Manufacturer is still there. So it appears that the only easy way to hide the manufacturer is to first unpublish the manufacturer and then open and save each product using that Manufacturer.

02

Also, the only easy way to hide the original price and or SKU is to not add them to the Product.

03

Use Template Override to Hide Manufacturer

Click Extensions, Templates, Templates, Astroid One Template Details. Then click Create Override. Then click the com_phocacart to open it. Click item.

04

Then click on the html folder in the left side menu and click on com_phocacart, then item to open it. Then click on default.php.

 

To hide the manufacturer of all products, delete lines 255 to 264.

if (isset($x->manufacturertitle) && $x->manufacturertitle != '') {

echo '<div class="ph-item-manufacturer-box">';

echo '<div class="ph-manufacturer-txt">'.JText::_('COM_PHOCACART_MANUFACTURER').':</div>';

echo '<div class="ph-manufacturer">';

echo PhocacartRenderFront::displayLink($x->manufacturertitle, $x->manufacturerlink);

echo '</div>';

echo '</div>';

echo '<div class="ph-cb"></div>';

}

Then click Save and Close and view site. The manufacturer is now gone from all products – even ones with manufacturers still listed.

Now to hide the SKU on the Product pages. It is not clear which element is used for the SKU. So we will use Firefox to clarify this issue. Go to Tools, Web Developer, Inspector. Then click on the SKU line.

<div class="ph-item-id-box">

<div class="ph-item-sku-box"><div class="ph-sku-txt">SKU:</div><div class="ph-sku">111222555</div></div>

The easiest way to hide this is to use custom css to hide the outer box like this:

.ph-item-id-box {display: none;}

Copy and paste this into the end of our custom.css file.

05

 You should now be able to pick any product and it will display in a simple manner.

Use Template Override to Simplify the Checkout Page

The Checkout page has a Log in Register section which might reduce sales as people may think they have to register to buy a product.

06

We can use a Template Override to hide or remove the Login section.

 Go to Extensions, Templates, Templates, Astroid One Template Details and click Override. Click on com-phocacart. Then click on

checkout.

07

Then click on html, com-phocacart, checkout. Then click on default_login.php

We will delete lines 20 to 56

if($this->a->login == 0) {

$d['status'] = 'pending';

/*require_once JPATH_SITE.'/components/com_users/helpers/route.php';

jimport( 'joomla.application.module.helper' );

$module = JModuleHelper::getModule('mod_login');

$mP = new JRegistry();

$mP->loadString($module->params);*/

$lang = JFactory::getLanguage();

$lang->load('mod_login');

echo '<div class="'.$this->s['c']['row'].' ph-checkout-box-row" >';

echo '<div class="'.$this->s['c']['col.xs12.sm12.md12'].' ph-checkout-box-header" id="phcheckoutloginedit">'.$layoutI->render($d).'<h3>'.$this->t['nl'].'. '.JText::_('COM_PHOCACART_LOGIN_REGISTER').'</h3></div>';

echo '</div>';

echo '<div class="'.$this->s['c']['row'].' ph-checkout-box-action">';

echo '<div class="'.$this->s['c']['col.xs12.sm8.md8'].' ph-right-border">';

$d = array();

$d['s'] = $this->s;

$d['t'] = $this->t;

echo $layoutUL->render($d);

echo '</div>'. "\n";// end checkout_login_row_item_login

echo '<div class="'.$this->s['c']['col.xs12.sm4.md4'].' ph-left-border">';

$d = array();

$d['s'] = $this->s;

$d['t'] = $this->t;

echo $layoutUR->render($d);

Then also delete lines 75 through the closing bracket at the beginning of line 80 (after first deletion lines 39 to 44).

echo '</div>'. "\n";// end checkout_login_row_item_register

echo '</div>'. "\n";// ph-checkout-box-action}

Then click Save and Close and view your site:

08

Language Override Example
Now we will do a language override to change the words Guest Checkout to Click Here to Check Out. Click on Extensions, Languages Overrides. Click on English United Kingdom Site. Then click New.

09

Type Guest Checkout in the Search box. Then click Search. Then scroll to the bottom and click Show More. There are two values that need to be changed

10

Click on the bottom option first to select it.

11

This will place the default value in a Text box in the upper left corner of the screen. Change this text to Click Here to Check Out

Then click Save and New. Then do the search again and click on the other value to change it. Then click Save and Close. The changes will now appear in a table:

12

Now view the Checkout page again.

13

It is a bit odd to have one label hiding the other. Time to break out the Firefox inspector again.

<div class="ph-box-header">Click here to check out</div>

.ph-box-header {font-size: 0px;}

< class="btn btn-primary btn-sm ph-btn ph-checkout-btn-login">

ph-checkout-btn-login {margin-top: 16px;}

Add these lines to the end of our custom.css file:

.ph-box-header {font-size: 0px;}

ph-checkout-btn-login {margin-top: 16px;}

Clear the browser cache and reload the page and load another product in the cart to view the cart:

14

Then click on Click here to check out. and verify that the checkout form still works.

What’s Next?

In the next chapter, we will review how to categories and products as well as adding Labels, Tags, Specifications, Attributes and Options to our Products.