WooCommerce 教程：仅将 CSS 更改应用于一个页面/产品

redmaomail 2024-07-24 17:21 阅读数 74 #WooCommerce

有趣的话题。我的客户要求我从只有一个产品页面中删除图像，但不是从所有的产品页面中删除图像。如果您想将 CSS 更改应用于任何特定的网页，同样的故事也适用。这是我如何做到的。

1. 访问您的网站，并转到您想要 “CSS-ify” 的页面或产品页面

如果您使用 Google Chrome，请右键点击鼠标，然后点击 “检查元素” 。如果您使用 Firefox，请使用 Firebug 。在这两种情况下，您都可以看到页面的 HTML 源代码，并标识了<body> 标签开始的第一行：

在这种情况下，我们发现了一个名为 “ postid-745 ” 的产品的唯一标识符。任何 WooCommerce 页面都是一样的：通过查看源代码，您应该可以找到一个唯一的标识符，如 “ page-id-9 ” 。

2. 在 CSS 中使用唯一标识符

例如，如果要删除其中一个产品页面上的图像并将其描述覆盖整页，只需使用其标识符作为前缀：


/**
 * @snippet       Apply CSS changes to one WooCommerce page/product only
 * @how-to        Paste @ style.css
 * @source        https://businessbloomer.com/?p=342
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 2.4.7
 */

/* removes the image on product id = 53 */
.postid-53 div.images {
display:none;
}

/* stretches the product description on full width */
.postid-53 div.summary {
width: 98%;
float: none;
}