Post by mypctech » Sun Jun 19, 2016 5:26 pm

Hello Friends :)

I need help adjusting the size of the PRICES that are displayed on the products. The size is just too small and I also need help making it the color RED if possible...

If the color cannot be changed, that is OK, I just want to make the font BIGGER so the customer can be able to notice the price right way.

Please see attachments.

Thank you in advance!

Attachments

Open Cart Price Issue.png

Here is the issue I am talking about, please help if you can. - Open Cart Price Issue.png (735.04 KiB) Viewed 850 times


Newbie

Posts

Joined
Sun Jun 19, 2016 5:20 pm

Post by impairedspook » Mon Jun 20, 2016 1:56 pm

Hi mypctech,

To change price colour and size on the category pages etc.. you could edit your stylesheet. Go to catalog/view/theme/default/stylesheet and look for the following section...

Code: Select all

.product-thumb .price {
	color: #444;
change to...

Code: Select all

.product-thumb .price {
	color: #ff0000;
        font-size: 16px;
I have changed colour to Red and added the font size, 16px is just a guess.. bigger than default but not sure exactly how big you want it but this should point you in the right direction.

Hope this helps :)

Active Member

Posts

Joined
Sat Apr 26, 2014 4:44 am

Post by viethemes » Mon Jun 20, 2016 7:03 pm

mypctech wrote:Hello Friends :)

I need help adjusting the size of the PRICES that are displayed on the products. The size is just too small and I also need help making it the color RED if possible...

If the color cannot be changed, that is OK, I just want to make the font BIGGER so the customer can be able to notice the price right way.

Please see attachments.

Thank you in advance!
You may like my extension Live Theme Editor to do that. No need to know about code :)

http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension

Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme

Extra Positions PRO, Custom JavaScript, Custom CSS and others


User avatar
Active Member

Posts

Joined
Thu Jan 08, 2015 12:17 pm


Post by Cakestandland » Sat Apr 14, 2018 11:30 pm

Hi I am very new to opencart and would like to change the colour of the price in the product area but can not find where it is. Below is my code. PLease can anyone help me?

{{ header }}
<div id="product-product" class="container">
<ul class="breadcrumb">
{% for breadcrumb in breadcrumbs %}
<li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
{% endfor %}
</ul>
<div class="row">{{ column_left }}
{% if column_left and column_right %}
{% set class = 'col-sm-6' %}
{% elseif column_left or column_right %}
{% set class = 'col-sm-9' %}
{% else %}
{% set class = 'col-sm-12' %}
{% endif %}
<div id="content" class="{{ class }}">{{ content_top }}
<div class="row"> {% if column_left or column_right %}
{% set class = 'col-sm-6' %}
{% else %}
{% set class = 'col-sm-8' %}
{% endif %}
<div class="{{ class }}"> {% if thumb or images %}
<ul class="thumbnails">
{% if thumb %}
<li><a class="thumbnail" href="{{ popup }}" title="{{ heading_title }}"><img src="{{ thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" /></a></li>
{% endif %}
{% if images %}
{% for image in images %}
<li class="image-additional"><a class="thumbnail" href="{{ image.popup }}" title="{{ heading_title }}"> <img src="{{ image.thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" /></a></li>
{% endfor %}
{% endif %}
</ul>
{% endif %}
<ul class="nav nav-tabs">
<li class="active"><a href="#tab-description" data-toggle="tab">{{ tab_description }}</a></li>
{% if attribute_groups %}
<li><a href="#tab-specification" data-toggle="tab">{{ tab_attribute }}</a></li>
{% endif %}
{% if review_status %}
<li><a href="#tab-review" data-toggle="tab">{{ tab_review }}</a></li>
{% endif %}
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-description">{{ description }}</div>
{% if attribute_groups %}
<div class="tab-pane" id="tab-specification">
<table class="table table-bordered">
{% for attribute_group in attribute_groups %}
<thead>
<tr>
<td colspan="2"><strong>{{ attribute_group.name }}</strong></td>
</tr>
</thead>
<tbody>
{% for attribute in attribute_group.attribute %}
<tr>
<td>{{ attribute.name }}</td>
<td>{{ attribute.text }}</td>
</tr>
{% endfor %}
</tbody>
{% endfor %}
</table>
</div>
{% endif %}
{% if review_status %}
<div class="tab-pane" id="tab-review">
<form class="form-horizontal" id="form-review">
<div id="review"></div>
<h2>{{ text_write }}</h2>
{% if review_guest %}
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label" for="input-name">{{ entry_name }}</label>
<input type="text" name="name" value="{{ customer_name }}" id="input-name" class="form-control" />
</div>
</div>
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label" for="input-review">{{ entry_review }}</label>
<textarea name="text" rows="5" id="input-review" class="form-control"></textarea>
<div class="help-block">{{ text_note }}</div>
</div>
</div>
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label">{{ entry_rating }}</label>
&nbsp;&nbsp;&nbsp; {{ entry_bad }}&nbsp;
<input type="radio" name="rating" value="1" />
&nbsp;
<input type="radio" name="rating" value="2" />
&nbsp;
<input type="radio" name="rating" value="3" />
&nbsp;
<input type="radio" name="rating" value="4" />
&nbsp;
<input type="radio" name="rating" value="5" />
&nbsp;{{ entry_good }}</div>
</div>
{{ captcha }}
<div class="buttons clearfix">
<div class="pull-right">
<button type="button" id="button-review" data-loading-text="{{ text_loading }}" class="btn btn-primary">{{ button_continue }}</button>
</div>
</div>
{% else %}
{{ text_login }}
{% endif %}
</form>
</div>
{% endif %}</div>
</div>
{% if column_left or column_right %}
{% set class = 'col-sm-6' %}
{% else %}
{% set class = 'col-sm-4' %}
{% endif %}
<div class="{{ class }}">
<div class="btn-group">
<button type="button" data-toggle="tooltip" class="btn btn-default" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product_id }}');"><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" class="btn btn-default" title="{{ button_compare }}" onclick="compare.add('{{ product_id }}');"><i class="fa fa-exchange"></i></button>
</div>
<h1>{{ heading_title }}</h1>
<ul class="list-unstyled">
{% if manufacturer %}
<li>{{ text_manufacturer }} <a href="{{ manufacturers }}">{{ manufacturer }}</a></li>
{% endif %}
<li>{{ text_model }} {{ model }}</li>
{% if reward %}
<li>{{ text_reward }} {{ reward }}</li>
{% endif %}
<li>{{ text_stock }} {{ stock }}</li>
</ul>
{% if price %}
<ul class="list-unstyled">
{% if not special %}
<li>
<h2>{{ price }}</h2>
</li>
{% else %}
<li><span style="text-decoration: line-through;">{{ price }}</span></li>
<li>
<h2>{{ special }}</h2>
</li>
{% endif %}
{% if tax %}
<li>{{ text_tax }} {{ tax }}</li>
{% endif %}
{% if points %}
<li>{{ text_points }} {{ points }}</li>
{% endif %}
{% if discounts %}
<li>
<hr>
</li>
{% for discount in discounts %}
<li>{{ discount.quantity }}{{ text_discount }}{{ discount.price }}</li>
{% endfor %}
{% endif %}
</ul>
{% endif %}
<div id="product"> {% if options %}
<hr>
<h3>{{ text_option }}</h3>
{% for option in options %}
{% if option.type == 'select' %}
<div class="form-group{% if option.required %} required {% endif %}">
<label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
<select name="option[{{ option.product_option_id }}]" id="input-option{{ option.product_option_id }}" class="form-control">
<option value="">{{ text_select }}</option>
{% for option_value in option.product_option_value %}
<option value="{{ option_value.product_option_value_id }}">{{ option_value.name }}
{% if option_value.price %}
({{ option_value.price_prefix }}{{ option_value.price }})
{% endif %} </option>
{% endfor %}
</select>
</div>
{% endif %}
{% if option.type == 'radio' %}
<div class="form-group{% if option.required %} required {% endif %}">
<label class="control-label">{{ option.name }}</label>
<div id="input-option{{ option.product_option_id }}"> {% for option_value in option.product_option_value %}
<div class="radio">
<label>
<input type="radio" name="option[{{ option.product_option_id }}]" value="{{ option_value.product_option_value_id }}" />
{% if option_value.image %} <img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %} {{ option_value.price_prefix }} {{ option_value.price }} {% endif %}" class="img-thumbnail" /> {% endif %}
{{ option_value.name }}
{% if option_value.price %}
({{ option_value.price_prefix }}{{ option_value.price }})
{% endif %} </label>
</div>
{% endfor %} </div>
</div>
{% endif %}
{% if option.type == 'checkbox' %}
<div class="form-group{% if option.required %} required {% endif %}">
<label class="control-label">{{ option.name }}</label>
<div id="input-option{{ option.product_option_id }}"> {% for option_value in option.product_option_value %}
<div class="checkbox">
<label>
<input type="checkbox" name="option[{{ option.product_option_id }}][]" value="{{ option_value.product_option_value_id }}" />
{% if option_value.image %} <img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %} {{ option_value.price_prefix }} {{ option_value.price }} {% endif %}" class="img-thumbnail" /> {% endif %}
{{ option_value.name }}
{% if option_value.price %}
({{ option_value.price_prefix }}{{ option_value.price }})
{% endif %} </label>
</div>
{% endfor %} </div>
</div>
{% endif %}

Newbie

Posts

Joined
Wed Mar 07, 2018 1:16 am

Post by OSWorX » Sun Apr 15, 2018 12:25 am

Code: Select all

<h2>{{ price }}</h2>
Or inside the controller (I would prefer).

Image


User avatar
Expert Member

Posts

Joined
Mon Jan 11, 2010 10:52 pm
Location - Austria
Who is online

Users browsing this forum: No registered users and 7 guests