Question

这看起来很奇怪，但是我试图在一个元素（按钮）之后添加背景图片，但是由于某种原因，该图片没有显示。

    .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>

由于某种原因，该图片无法显示，我什至尝试使用实时网址

注意：如果我尝试使用一个段落，则可以在笔here中看到它

在添加到购物车按钮后，如何从模板目录添加图像？

在一个更简单的解决方案中，我尝试使用钩子，但是我也很努力地使用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">';   
}

Answer 1

在echo语句中使用<?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">';   
}

Answer 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>

Woocommerce添加到购物车按钮后添加图像

2 个答案: