Woocommerce добавить изображение после кнопки добавления в корзину

Это кажется странным, но я пытаюсь добавить фоновое изображение после элемента (кнопки), но по какой-то причине изображение не отображается.

    .single_add_to_cart_button:after {
        content: '';
        width: 50px;
        height: 9px;
        display: inline-block;
        background: url(/images/arrow.png);
        background-position: 50%;
        background-size: cover;
        background-repeat: no-repeat;
    }
<button type = "submit" class = "single_add_to_cart_button button alt disabled wc-variation-selection-needed">Place order</button>

По какой-то причине изображение не отображается, и я даже пытался использовать действующий URL-адрес.

Примечание. Если я попытаюсь использовать абзац, это сработает, как вы можете видеть на моей ручке здесь.

Как я могу добавить изображение из каталога шаблонов после кнопки «Добавить в корзину»?

В более простом решении я попытался использовать хук, но я также изо всех сил пытаюсь получить доступ к изображению с помощью bloginfo:

add_action( 'woocommerce_after_add_to_cart_button', 'add_content_after_addtocart_button_func' );

function add_content_after_addtocart_button_func() {
    echo '<img src = "<?php bloginfo("template_directory")/images/logo/logo.png">';   
}
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
1 979
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Здесь работает просто отлично (я добавил некоторые дополнительные стили)

.single_add_to_cart_button {
  background-color: #ededed;
  border: none;
  padding: 2rem;
  display: flex;
  align-items: center;
  font-size: 1rem;
  border-radius: 3px;
}

.single_add_to_cart_button:after {
  content: '';
  width: 4rem;
  height: 2rem;
  margin-left: 1rem;
  display: inline-block;
  background: url(http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
<button type = "submit" class = "single_add_to_cart_button button alt disabled wc-variation-selection-needed">Place order</button>
Ответ принят как подходящий

Существует синтаксическая ошибка, так как вы используете <?php в операторе эха, а bloginfo($option) выводит значение, поэтому попросите вас использовать get_template_directory_uri(), чтобы получить путь к каталогу шаблона, который вернет строку

ваш код будет выглядеть следующим образом:

add_action( 'woocommerce_after_add_to_cart_button', 'add_content_after_addtocart_button_func' );

function add_content_after_addtocart_button_func() {
    echo '<img src = "'.get_template_directory_uri().'/images/logo/logo.png">';   
}

Другие вопросы по теме