Add Show More Products Button to extra slider home page

Hello,
I want to add Show more products to homepage extra slider where shows 4 products of recommendations,
I have edited Default.twig but nothing,

Here is my code, does anybody know how to add that button?
The slider module have 4 categories and I want below each to redirect to product page.

Thank you!

I have added this:

<br /> <div class="center">
<br /><a href="<?php echo $category['href']; ?>" class="button">More Information</a><br />
</div>

PS: New to opencart


CODE:

<!-- default Grid -->
<div class="module {{direction_class}} {{ class_suffix }}">
{% if disp_title_module %}
<h3 class="modtitle"><span>{{ head_name }}</span></h3>
{% endif %}

{% if pre_text|trim is not empty %}
<div class="form-group">
{{ pre_text }}
</div>
{% endif %}

<div class="modcontent">

{% if products is empty %}
<div class="alert alert-info"><i class="fa fa-info-circle"></i>
{{ text_noproduct }}
<button type="button" class="close" data-dismiss="alert">×</button>
</div>

{% else %}
{% set count_item = products|length %}
{% set cls_btn_page = (button_page == 'top') ? 'buttom-type1':'button-type2' %}
{% set btn_type = (button_page == 'top') ? 'button-type1':'button-type2'%}

{% set tag_id = 'so_extra_slider_'~suffix %}
{% set class_respl = 'preset00-'~nb_column0~' preset01-'~nb_column1~' preset02-'~nb_column2~' preset03-'~nb_column3~' preset04-'~nb_column4 %}
{% set btn_prev = (button_page == 'top') ? '&#171':'&#139' %}
{% set btn_next = (button_page == 'top') ? '&#187':'&#155' %}
{% set i = 0 %}

<div id="{{tag_id}}" class="so-extraslider {{cls_btn_page}} {{class_respl}} {{btn_type}}">
<!-- Begin extraslider-inner -->
<div class="extraslider-inner products-list " data-effect="{{effect}}">
{% for i, product in products %}
{% set i = i + 1 %}
{% if i % nb_rows == 1 or nb_rows == 1 %}
<div class="item ">
{% endif %}

<div class="product-layout product-grid {{ products_style }} ">
<div class="product-item-container">
<div class="left-block">
<a class="link-to-product" href="{{ product.href }}">
<div class="product-image-container {% if product_image_num == 2 %} {{ 'second_img' }} {% endif %} ">
<a href="{{ product.href }}" target="{{ item_link_target }}" title="{{ product.nameFull }} " >
{% if product_image_num ==2 %}

<img data-sizes="auto" src="image/loading.svg" data-src="{{ product.thumb }}" class="img-1 lazyload" alt="{{ product.nameFull }}" id="product-image-{{ product.product_id }}" />

<img data-sizes="auto" src="image/catalog/productLoading.svg" data-src="{{ product.thumb2 }}" class="img-2 lazyload" alt="{{ product.nameFull }}">
{% else %}

<img data-sizes="auto" src="image/loading.svg" data-src="{{ product.thumb }}" class="img-1 lazyload" alt="{{ product.nameFull }}" id="product-image-{{ product.product_id }}" />

{% endif %}
</a>
</div>
{% if product.special and product.productNew %}
<div class="box-label">
{% if product.special and display_sale %}
<span class="label-product label-sale">{# {{ objlang.get('text_sale') }} #} {{ product.discount }} </span>
{% endif %}

{% if product.productNew and display_new %}
<span class="label-product label-new">{{ objlang.get('text_new') }} </span>
{% endif %}
</div>
{% endif %}


<div class="button-group cartinfo--left">
<div class="so-quickview">
<a class="hidden" data-product='{{ product.product_id }}' href="{{ product.href }}"></a>
</div>
{% if display_wishlist %}
<button type="button" class="wishlist btn-button" title="{{ objlang.get('button_wishlist') }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="pe-7s-like"></i></button>
{% endif %}

{% if display_compare %}
<button type="button" class="compare btn-button" title="{{ objlang.get('button_compare') }}" onclick="compare.add('{{ product.product_id }}');"><i class="pe-7s-graph3"></i></button>
{% endif %}

</div>
</a>
</div>

<div class="right-block">
{% if display_title %}
<h4>
<a href="{{ product.href }}" target="{{ item_link_target }}" title="{{ product.nameFull }} " >
{{ product.name }}
</a>
</h4>
{% endif %}

{% if display_rating %}
{% if product.rating %}
<div class="rating">
{% for k in 1..5 %}

{% if product.rating < k %}
<span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
{% else %}
<span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i></span>
{% endif %}
{% set k = k + 1 %}
{% endfor %}
</div>
{% else %}
<div class="rating">
{% for j in 1..5 %}

<span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
{% set j = j + 1 %}
{% endfor %}
</div>
{% endif %}
{% endif %}

{% if display_price %}
<div class="price">
{% if not product.special %}
<span class="price-new">
{{ product.price }}
</span>
{% else %}
<span class="price-new">{{ product.special }} </span>&nbsp;&nbsp;
<span class="price-old">{{ product.price }} </span>&nbsp;
{% endif %}



</div>
{% endif %}

{% if display_addtocart %}
<button type="button" class="addToCart btn-button" title="{{ objlang.get('button_cart') }}" onclick="cart.add('{{ product.product_id }}');"><span>{{ objlang.get('button_cart') }} </span></button>
{% endif %}


{% if product.option %}
<ul class="so-productlist-colorswatch" id="colorswatch-{{ product.product_id }}">
{% for option in product.option %}
{% if option.type == 'select' %}
{% for option_value in option.product_option_value %}
<li class="colorswatch{{option_value.product_option_value_id~option_value.option_value_id~product.product_id }}">
<a href="javascript:void(0);" title="{{ option_value.name }}" style="width: {{ width_product_list }}px; height: {{ height_product_list }}px; background-image: url('{{ option_value.image }}')"></a>
<script type="text/javascript">
jQuery(document).ready(function($) {
var $window_width = $(window).width();
{% if colorswatch_type == 'click' %}
$(document).on('click', '.so-productlist-colorswatch li.colorswatch{{ option_value.product_option_value_id~option_value.option_value_id~product.product_id }}', function(e) {
e.preventDefault();
{% if option_value.color_image %}
$(this).parents('.product-item-container').find('img#product-image-{{product.product_id }}').attr('src', '{{ option_value.color_image }}');
{% endif %}

$('.so-productlist-colorswatch li').removeClass('actived');
$(this).removeClass('actived').addClass('actived');
});
{% else %}
if ($window_width > 1199) {
$('.so-productlist-colorswatch li.colorswatch{{ option_value.product_option_value_id~option_value.option_value_id~product.product_id }}').hover(function(e) {
e.preventDefault();
{% if option_value.color_image %}
$(this).parents('.product-item-container').find('img#product-image-{{product.product_id }}').attr('src', '{{ option_value.color_image }}');
{% endif %}

$('.so-productlist-colorswatch li').removeClass('actived');
$(this).removeClass('actived').addClass('actived');
});
}
else {
$(document).on('click', '.so-productlist-colorswatch li.colorswatch{{ option_value.product_option_value_id~option_value.option_value_id~product.product_id }}', function(e) {
e.preventDefault();
{% if option_value.color_image %}
$(this).parents('.product-item-container').find('img#product-image-{{product.product_id }}').attr('src', '{{ option_value.color_image }}');
{% endif %}

$('.so-productlist-colorswatch li').removeClass('actived');
$(this).removeClass('actived').addClass('actived');
});
}
{% endif %}
})
</script>
</li>
{% endfor %}
{% endif %}
{% endfor %}
</ul>
{% endif %}

{% if display_description %}
<div class="item-des">
{{ product.description }}
</div>
{% endif %}


</div>

</div>
<!-- End item-wrap-inner -->
</div>
<!-- End item-wrap -->

{% if i % nb_rows == 0 or i == count_item %}
</div>
{% endif %}

{% endfor %}
</div>
<!--End extraslider-inner -->
<br /> <div class="center">
<br /><a href="<?php echo $category['href']; ?>" class="button">More Information</a><br />
</div>

<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function ($) {
(function (element) {
var $element = $(element),
$extraslider = $(".extraslider-inner", $element),
_delay = {{ delay }} ,
_duration = {{ duration }} ,
_effect = '{{ effect }} ';

$extraslider.on("initialized.owl.carousel2", function () {
var $item_active = $(".owl2-item.active", $element);
if ($item_active.length > 1 && _effect != "none") {
_getAnimate($item_active);
}
else {
var $item = $(".owl2-item", $element);
$item.css({"opacity": 1, "filter": "alpha(opacity = 100)"});
}
{% if dots == "true" %}
if ($(".owl2-dot", $element).length < 2) {
$(".owl2-prev", $element).css("display", "none");
$(".owl2-next", $element).css("display", "none");
$(".owl2-dot", $element).css("display", "none");
}
{% endif %}

{% if button_page == "top" %}
$(".owl2-controls", $element).insertBefore($extraslider);
$(".owl2-dots", $element).insertAfter($(".owl2-prev", $element));
{% else %}
$(".owl2-nav", $element).insertBefore($extraslider);
$(".owl2-controls", $element).insertAfter($extraslider);
{% endif %}

});

$extraslider.owlCarousel2({
rtl: {{ direction}},
margin: {{ margin }},
slideBy: {{ slideBy }},
autoplay: {{ autoplay }},
autoplayHoverPause: {{ autoplayHoverPause }},
autoplayTimeout: {{ autoplayTimeout }} ,
autoplaySpeed: {{ autoplaySpeed }} ,
startPosition: {{ startPosition }} ,
mouseDrag: {{ mouseDrag }},
touchDrag: {{ touchDrag }} ,
autoWidth: false,
responsive: {
0: { items: {{ nb_column4 }} } ,
480: { items: {{ nb_column3 }} },
768: { items: {{ nb_column2 }} },
992: { items: {{ nb_column1 }} },
1200: {items: {{ nb_column0 }}}
},
dotClass: "owl2-dot",
dotsClass: "owl2-dots",
dots: {{ dots }} ,
dotsSpeed:{{ dotsSpeed }} ,
nav: {{ nav }} ,
loop: {{ loop }} ,
navSpeed: {{ navSpeed }} ,
navText: ["{{ btn_prev }} ", "{{ btn_next }} "],
navClass: ["owl2-prev", "owl2-next"]

});

$extraslider.on("translate.owl.carousel2", function (e) {
{% if dots == "true" %}
if ($(".owl2-dot", $element).length < 2) {
$(".owl2-prev", $element).css("display", "none");
$(".owl2-next", $element).css("display", "none");
$(".owl2-dot", $element).css("display", "none");
}
{% endif %}
var $item_active = $(".owl2-item.active", $element);
_UngetAnimate($item_active);
_getAnimate($item_active);
});
$extraslider.on("translated.owl.carousel2", function (e) {
{% if dots == "true" %}
if ($(".owl2-dot", $element).length < 2) {
$(".owl2-prev", $element).css("display", "none");
$(".owl2-next", $element).css("display", "none");
$(".owl2-dot", $element).css("display", "none");
}
{% endif %}
var $item_active = $(".owl2-item.active", $element);
var $item = $(".owl2-item", $element);
_UngetAnimate($item);
if ($item_active.length > 1 && _effect != "none") {
_getAnimate($item_active);
} else {
$item.css({"opacity": 1, "filter": "alpha(opacity = 100)"});
}
});
function _getAnimate($el) {
if (_effect == "none") return;
//if ($.browser.msie && parseInt($.browser.version, 10) <= 9) return;
$extraslider.removeClass("extra-animate");
$el.each(function (i) {
var $_el = $(this);
var i= i + 1;
$(this).css({
"-webkit-animation": _effect + " " + _duration + "ms ease both",
"-moz-animation": _effect + " " + _duration + "ms ease both",
"-o-animation": _effect + " " + _duration + "ms ease both",
"animation": _effect + " " + _duration + "ms ease both",
"-webkit-animation-delay": +i * _delay + "ms",
"-moz-animation-delay": +i * _delay + "ms",
"-o-animation-delay": +i * _delay + "ms",
"animation-delay": +i * _delay + "ms",

}).animate({

});
if (i == $el.size() - 1) {
$extraslider.addClass("extra-animate");
}
});
}
function _UngetAnimate($el) {
$el.each(function (i) {
$(this).css({
"animation": "",
"-webkit-animation": "",
"-moz-animation": "",
"-o-animation": "",
});
});
}
})("#{{ tag_id }} ");
});
//]]>
</script>

</div>
{% endif %}


</div>
{% if post_text|trim is not empty %}
<div class="form-group">
{{ post_text }}
</div>
{% endif %}




</div>

Welcome

Please read the forum rules before posting viewtopic.php?t=200480
In short : OC Version (found at the base of every admin page)
Extensions & Themes that may be relevant to the issue.

Presumably this is the - so theme
Please contact the theme developer. I suspect that there is no function in the controller, in which case it will fall outside the scope of free support from here as well .. for that there is a commercial section viewforum.php?f=88

It should not cost a lot, but it is still out of the scope of free support.
and again welcome to the forum, apologies your first post is directing you elsewhere.