You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何移除WooCommerce结账页面支付方式上方的多余项目符号

解决WooCommerce结账页面支付方式上方的多余项目符号问题

嘿,我来帮你搞定这个烦人的多余项目符号问题!这种情况大多是CSS样式冲突或者HTML结构小问题导致的,给你几个一步步的解决方案:

方案1:用自定义CSS快速修复(最推荐)

这是最简单直接的方法,先试试这个:

  1. 打开WordPress后台,进入「外观」→「自定义」→「额外CSS」
  2. 粘贴下面的代码,然后保存:
/* 移除结账页面银行转账支付方式的多余项目符号 */
.woocommerce-checkout-payment ul.payment_methods li.payment_method_bacs {
    list-style: none !important;
    padding-left: 0 !important;
}
  1. 刷新结账页面看看效果,如果还没消失,试试更通用的规则:
.woocommerce-checkout-payment ul.payment_methods {
    list-style: none !important;
    padding-left: 0 !important;
}

原理:你的主题或者支付插件可能给支付方式的列表项意外继承了全局的列表样式,这段CSS可以强制去掉项目符号和左侧内边距。

方案2:排查主题或插件的模板问题

如果CSS没用,那可能是HTML结构里多了多余的<li>标签:

  • 先排查主题:临时切换到WooCommerce官方默认主题「Storefront」,刷新结账页面看看符号是否消失。如果消失了,说明是当前主题的结账模板有问题,你需要找到主题里的woocommerce/checkout/payment.php文件,检查<ul class="payment_methods">内部的结构,删掉多余的列表项标签。
  • 再排查支付插件:如果切换主题还是有问题,那可能是银行转账支付网关的插件模板有问题。你可以复制插件里的checkout/payment-method.php模板文件(一般在插件的支付网关模板路径下),粘贴到你主题的woocommerce/checkout/目录下,然后编辑这个文件,清理掉多余的<li>或列表相关标签。

内容的提问来源于stack exchange,提问作者jean-pierre pte

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.27 07:30:44