怎么让WordPress商城的产品详情页标题和简短描述在手机端居中

用Wordpress搭建独立站商城很多情况下并没有直接的设置方式,所以我们用一些简单的代码实现。

产品标题居中

  1. 进入 WordPress 后台:外观 > 自定义 > 附加 CSS。
  2. 粘贴以下代码并保存:
/* 仅在手机端(≤768px)居中产品标题 */
@media (max-width: 768px) {
    .single-product .product_title,
    .single-product h1.product_title,
    .single-product .entry-title {
        text-align: center !important;
    }
}
怎么让Wordpress商城的产品详情页标题和简短描述在手机端居中 1

短描述居中

同样的方法将下面代码也添加到额外CSS后面,然后发布保存。

/* 仅手机端居中 Short Description */
@media (max-width: 768px) {
    .single-product .woocommerce-product-details__short-description,
    .single-product .product .summary p,
    .single-product .product_short_description {
        text-align: center !important;
    }
    
    /* 如果有内联段落,确保子元素也居中 */
    .single-product .woocommerce-product-details__short-description p,
    .single-product .summary p {
        text-align: center !important;
    }
}

这样手机端的产品标题和描述就都居中了。

怎么让Wordpress商城的产品详情页标题和简短描述在手机端居中 2

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

订阅评论
提醒
guest
0 评论
最新
最旧 最多投票
内联反馈
查看所有评论