Opencart, howto put style to individual product name field(etc set color, bold, underline)?

Question

I want to put different color for individual products in Opencart.

I dont want to change the stylesheet css file for modifying all product names style. as the product name field in admin side does not accept any html code, it accepts it but it wont use the coding to show the wanted color like red. It only shows the html coding in products name.

does anyone has knowledge for this?

Answer 1

I figured it out. I changed my catalog/view/theme/default/template/product/category.tpl line number 149

From this:

<div class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div>

to this

      <?php $newproductname = $product['name']; ?>
      <div class="name"><a href="<?php echo $product['href']; ?>">

<?php 
    $newproductname2 = str_replace('CHEAP','<font style="color:red; text-decoration: strong">CHEAP</font>',$newproductname);
    echo $newproductname2;
?>

I know it is a mess, but it works for me, because I only needed it to show my customers that what products are "CHEAP"

thanks to all off you

Answer 2

So lets assume you are saving product name as <span style="color:red;">Apple Cinema 30</span>

when it is saved do db it becomes <span style="color:red;">Apple Cinema 30</span> so basically the html is encoded before saving to database

so when you simply echo the name its printed as encode string and then html displays it as <span style="color:red;">Apple Cinema 30</span> which you don't want to do.

Approach 1

So basically before printing the name by php you need to decode it using html_entity_decode() so that browser can parse the html.

for example in product.tpl there is a statement <?php echo $heading_title; ?> which needs to be changed to

<?php echo html_entity_decode($heading_title, ENT_QUOTES, 'UTF-8'); ?>

as you might have guess this is a very painful step, basically you need to find out every place where the name is printed and replace it.

now comes warning : there are placing like tab title where that html will treated as plain text and therefore tab title will show <span>.... so we conclude this a bad approach

Approach 2

same as approach 1 but instead of replacing the text evrywhere you can just replace it at catalog/model/catalog/product.php in the getProduct($product_id) function. replace

'name'             => $query->row['name'],

with

'name'             => html_entity_decode($query->row['name'], ENT_QUOTES, 'UTF-8'),

but this approach has same problem as approach 1.

So now that we have rejected incorrect methods

Correct approach

create a new database table with mapping of product_id,language_id toproduct_name_html in product_name_html save your new html title of the product.

now that have a two type of name, you can display this new (html) name where you want (obviously at places which are treated as html and not plain text), without disturbing the plain text name which is required at places like tab title, plain text email etc.

This will required considerable coding like first saving the html name from admin side to db, then edit getProduct() types of function in model files to grab your special name with along with other product details, then replacing the code at your place(s) of interest

Answer 3

Actually you need to specify what is the value that you will control for these products, is it a general one like manufacturer, or a specific one like name.

Nevertheless here is a php code that you can use and i have used before for the same case but for filitering based on manufacturers:

        if(isset($product_info['manufacturer']) && $product_info['manufacturer']=='something'){ //some comparison
            $this->document->addStyle('catalog/view/stylesheet/style.css'); //route to you style file
        }

And in that file put the css you want to overwrite. This piece of code is for product.php controller, but you can folow this logic everywhere, this is the default way that opencart itself handles specific .css as well as .js for specific set of pages.

Hope i helped you.

Answer 4

In stylesheet.css modify the element

.product-list .name a{
    color:#FF0000 !important;
}

on line 935 or thereabouts.