Как добавить настраиваемую кнопку в opencart

Question

Я использую opencart для веб-магазина, который я сейчас разрабатываю, и хочу добавить новую кнопку, которая отображает цену продукта, прямо над кнопкой «Добавить в корзину».

Он должен выглядеть эту кнопку я стилизованной в фотошопе

Ну, если вы посмотрите на картину, она даже не должна быть кнопка, это просто необходимо любить близко к что.

Может ли кто-нибудь указать мне в правильном направлении?

PS: "V Košarico" = "Добавить в корзину"

Это продукт/product.tpl код

<div class="button-group"> 
     <!--PRICE BUTTON--!> 
      <button type="button">test</button> 
      <!--OTHER BUTTONS!--> 
      <button type="button" onclick="cart.add('<?php echo $product['product_id']; ?>', '<?php echo $product['minimum']; ?>');"><span class="hidden-xs hidden-sm hidden-md"><?php echo $button_cart; ?></span> <i class="fa fa-shopping-cart"></i></button> 
      <button type="button" data-toggle="tooltip" title="<?php echo $button_wishlist; ?>" onclick="wishlist.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-heart"></i></button> 
      <button type="button" data-toggle="tooltip" title="<?php echo $button_compare; ?>" onclick="compare.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-exchange"></i></button> 
     </div> 

Answer 1

Я не знаком с OpenCart, но если вы говорите чистый HTML/css, то это, как вы говорите, точка в правильном направлении.

HTML продукта Пример

<div class="product"> 

    <div class="description"> 
     Description text for the product 
    </div> 

    <div class="price"> 
     CENA: 5,95 € 
    </div> 

    <div class="add-to-cart"> 
     Add to Cart 
    </div> 

</div> 

А потом CSS, чтобы соответствовать его и особенно .product> .price моделирование затем. Надеюсь, вы знаете немного CSS и можете сами управлять собой? И я не уверен, что «ящик» продукта имеет ту же структуру или что-то еще, конечно. Но, как вы говорите, точка в правильном направлении.

.product { 
    width:300px; 
    border:1px solid #aaa; 
} 

.product > .description { 
    padding:20px; 
} 

.product > .price { 
    background:#88BA33; 
    text-align: center; 
    padding:20px 0; 
    text-transform: uppercase; 
    font-size: 18px; 
    color:#fff; 
    margin:0; 
} 

.product > .add-to-cart { 
    background:#fafafa; 
    text-align: center; 
    padding:20px 0; 
    text-transform: uppercase; 
    margin:0; 
}