Price-info Widgets on OpenCart 3
Step 1
Open the product.twig
file in the following location on your server
YOUR_OPENCART_DIR/catalog/view/theme/YOUR_THEME/template/product/product.twig
Step 2
Find the product price section
Within the product.twig
file, find the section of code where the price is displayed.
Below is an excerpt from the product.twig
found in the default theme. Your theme may be different.
Note that you would place the widget in the section marked INSERT_WIDGET_HERE
{% 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 %}
INSERT_WIDGET_HERE
{% 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 %}
Step 3
Place the following <script>
tag into the product.twig
file.
'Little things' only
Using the following code if you are a 'Little things' merchant.
For 5 fortnightly payments:
<script src="https://widgets.shophumm.co.nz/content/scripts/price-info.js?productPrice={%if special%}{{special}}{%else%}{{price}}{%endif%}&little=f5"></script>
'Big things' only
Using the following code if you are a 'Big things' merchant.
<script src="https://widgets.shophumm.co.nz/content/scripts/price-info.js?productPrice={%if special%}{{special}}{%else%}{{price}}{%endif%}&big=m6"></script>
Available options are:
big=m6
for 6 months, big=m9
for 9 months, big=m12
for 12 months, big=m18
for 18 months, big=m24
for 24 months.
Try inserting the widget in different places in the code until you find the most suitable place for your site.
Step 4
Save and you should see a working widget on your website.