Question

我的WP网站上有一个迷你车（下拉）。当有产品和空的时候，我已经设计了设计。我之前和之后都使用CSS伪来添加内容。

可以添加带链接的按钮吗？当它是空的时我想要一个按钮。

以下是我尝试的CSS和Js代码，因为我无法访问html。

.woocommerce-mini-cart__empty-message{
     padding-top: 30px;
     text-align:center;
     visibility:hidden;
     color: #5D5D5D;
     background-color:#F0EFEB;
     pointer-events: none;
}
 .woocommerce-mini-cart__empty-message::after{
     content: 'Lets start shopping!';
     visibility:visible;
     display:block;
     margin-top:2px!important;
     font-size:14px!important;
     line-height:20px!important;
     font-family:futura!important;
     pointer-events: none;
}
 .woocommerce-mini-cart__empty-message::before {
     content: url(http://naristore.com/wp-content/uploads/2018/01/shop- icon@2x.png) '\A \A YOUR BAG IS EMPTY';
     white-space: pre;
     visibility:visible;
     display:block;
     text-align:center;
     color:#5D5D5D!important;
     font-size:24px!important;
     line-height:26px!important;
     font-family:futura!important;
     letter-spacing:1px;
     pointer-events: none;
}


<script>
    $(document).ready(function() {
        $("<button>click</button").appendTo('.woocommerce-mini- cart__empty - message ');
    });
</script>

Answer 1

我不确定你在问什么..你只是想添加一个按钮吗？如果是这样，请使用append，而不是appendTo。

<script>
$(document) .ready(function(){
      var element= "<button>click</button";

    $(".woocommerce-mini- 
cart__empty-message") .append(element)

});
</script>

Answer 2

尝试使用JavaScript而不是jquery。

＆＃13;

.btn-style {
  display: inline-block;
  padding: 15px 24px;
  text-align: center;
  border: none;
  color: #fff;
  background-color: #008CBA;
  margin: 2px 5px;
  text-decoration: none;
  cursor: pointer;
  font-size: .95em;
}

＆＃13;

const woocommerce = document.querySelector('.woocommerce-mini-cart__empty-message');
const btn = document.createElement('button');
btn.textContent = 'Empty';
btn.className = 'btn-style';
woocommerce.appendChild(btn);

＆＃13;

别忘了选择添加的班级btn-style＆amp;添加所需的样式。我添加了一些基本的CSS。

用Js或php创建一个新按钮

2 个答案: