Page 1 of 1

PLEASE HELP: Adjusting Price Font Size

Posted: Sun Jun 19, 2016 5:26 pm
by mypctech
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!

Re: PLEASE HELP: Adjusting Price Font Size

Posted: Mon Jun 20, 2016 1:56 pm
by impairedspook
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 :)

Re: PLEASE HELP: Adjusting Price Font Size

Posted: Mon Jun 20, 2016 7:03 pm
by viethemes
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 :)

Re: PLEASE HELP: Adjusting Price Font Size

Posted: Sat Apr 14, 2018 11:30 pm
by Cakestandland
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 %}

Re: PLEASE HELP: Adjusting Price Font Size

Posted: Sun Apr 15, 2018 12:25 am
by OSWorX

Code: Select all

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