Добавление на страницу с товаром новых кнопок.

В шаблоне

moduleview / catalog / product.tpl

после кода

        {hook name="catalog-product:information" title="{t}Карточка товара:краткая информация{/t}"}
            {if $product.barcode}
            <p class="attribute">{t}Артикул:{/t} <span class="offerBarcode">{$product.barcode}</span></p>
            {/if}
            {if $product.brand_id}
            <p class="attribute">{t}Бренд:{/t} <a class="brandTitle" href="{$product->getBrand()->getUrl()}">{$product->getBrand()->title}</a></p>
            {/if}                
        {/hook}

вставляем следующий блок:

<div class="info_div">
    <div class="delivery knopka">
        <span>Доставка</span>
        <div class="hide_info">
            <ul>
            <li><strong>Самовывоз:</strong> Адрес Вашего склада</li>
            <li><strong>Курьером:</strong> Условия доставки</li>
            <li><strong>По стране:</strong> Без проблем доставим</li>
            </ul>
        </div>
    </div>
    <div class="pay knopka">
        <span>Оплата</span>
        <div class="hide_info">
            <ul>
            <li><strong>Наличные:</strong> Принимаем купюры и монеты</li>
            <li><strong>Безналичные:</strong> Оплата любой картой</li>
            </ul>
        </div>
    </div>
    <div class="other knopka">
        <span>Прочее</span>
        <div class="hide_info">
            <h3>Заголовок для совсем других данных</h3>
            <p>Здесь описание абсолютно любой информации</p>
        </div>
    </div>
</div>

Данные в блоках hide_info меняем на Ваши.

В стилях css style.css

Добавляем код:

.info_div {
    width: 100%;
    display: flex;
position:relative;
}

.knopka {
    width: 30%;
    padding: 5% 10%;
    cursor: help;
    font-size: 20px;
}
.knopka:hover {
    background: #ccc;
}
.knopka:hover .hide_info {
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    z-index: 1;
    background: #ccc;
    padding: 5%;
}

Спасибо большое за консультацию, ниже мой код, Может кому будет полезно.

Мой html

<div class="info_div">

        <div class="delivery knopka">
            <span>Доставка</span>
            <div class="hide_info">
                <h3>Москва и Подмосковье</h3>
                <ul>
                <li><strong>Курьером:</strong> по Москве - 200 р, за МКАД (в пределах 40 км) - от 200 до 500 р. от сложности доставки. </li>
                <li><strong>Самовывоз:</strong> Москва, м. Щелковская, ул. Алтайская 12 - бесплатно.</li>
                </ul>
                <h3>Другие регионы России</h3>
                <p>Доставка в другие города России производиться компаниями:</p>
                <ul class="hide_info_delivery">
                <li><span class="sdek">СДЕК</span></li>
                <li><span class="business_line">Деловые Линии</span></li>
                <li><span class="post_russia">Почтой России</span></li>
                </ul>
                <p>Стоимость доставки товара согласно тарифов ТК.</p>
            </div>
        </div>
       
        <div class="pay knopka">
            <span>Оплата</span>
            <div class="hide_info">
                <h3>Наличными</h3>
                <p>Вы можете расплатиться наличными при:</p>
                <ul>
                <li>Доставке курьером</li>
                <li>Забирая товар со склада (самовывоз)</li>
                <li>Заказав доставку с наложенным платежом (вся Россия)</li>
                </ul>
                <h3>Онлайн оплата</h3>
                <ul>
                    <li>Сбербанк Онлайн</li>
                </ul>
            </div>
        </div>

    </div>

Стили css

.info_div {
    display: flex;
    justify-content: flex-start;
}

    .knopka {
        position: relative;
        cursor: help;
        padding: 15px 15px 15px 45px;
        border-bottom: 1px solid #dcdcdc;
    }
        .knopka span{
            font-size: 18px;
        }
        .delivery{
            background: url(89735_3.png) no-repeat scroll 0 center;
        }
        .pay{
            background: url(cb010d81724fbea1f551843c7bb762af.png) no-repeat scroll 5px center;
        }
        .hide_info {
            width: 500px;
            display: none;
            right: 0;
            top: 45px;
            border: 1px solid #dcdcdc;
            padding: 0 15px;
            position: absolute;
            background-color: #ffffff;
            z-index: 1;
        }
            .hide_info_delivery li{
            list-style: none;
            margin-bottom: 20px;
            }
            .hide_info_delivery li span{
                font-size: 16px;
                padding-top: 5px;
                padding-bottom: 5px;
            }
                .post_russia{
                background: url(Russian_Post.png) no-repeat scroll 0 center;
                padding-left: 125px;
                }
                .sdek{
                background: url(cdek.png) no-repeat scroll 0 center;
                padding-left: 125px;
                }
                .business_line{
                background: url(dl_logo.png) no-repeat scroll 0 center;
                padding-left: 125px;
                }   
        .knopka:hover .hide_info {
        display: block;
        }
     
        @media (max-width: 767px){
            .info_div {
                display: block;
            }
            .hide_info {
                width: 100%;
            }
        }