如何设置商城产品展示价格和加购按钮背景

商城的美观和便捷性是我们搭建网站以及用户体验的重要因素。下面的产品类目页的左边价格右边加购按钮是一种非常有效的方式。这篇文章就教大家如何实现。

本文用的是Blocksy Pro主题。

进入网站的自定义页面，选择WooCommerce下的产品归档。然后选择常规下面的类型二。

这个时候产品分类页下面的价格和购买按钮就显示在同一行。

复制下面的代码，然后添加到额外CSS。（路径：网站自定义-额外CSS）

/* 为价格添加背景色 */
.woocommerce ul.products li.product .price {
    background-color: #f0f0f0; /* 浅灰色背景 */
    padding: 5px 10px;
     text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    line-height: normal;
}

/* 按钮文字水平和垂直居中 */
.woocommerce ul.products li.product .button {
    background-color: #ff6600; /* 橙色背景 */
    padding: 5px 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    line-height: normal;
}

/* 增加价格和按钮之间的水平间距 */
.woocommerce ul.products li.product .price + .button {
    margin-left: 10px;
}

/* 按钮悬停效果 */
.woocommerce ul.products li.product .button:hover {
    background-color: #e55a00;
}

如果你需要更改按钮的颜色和间距，只需要将代码中对应的参数修改一下即可。

这样我们就拥有了一个美观的价格+加购按钮。

© 文章版权归白小菌所有，🫰欢迎转发分享。未经允许请勿抄袭转载。