WooCommerce页面看起来没有样式

时间:2020-01-16 作者:sialfa

我正在使用woocommerce来定制商店方面。我注意到,如果我打开一个产品链接,页面看起来没有样式。我需要将商店与基于bootstrap 4的主题集成。阅读完文档后,我不知道如何继续,因为上面写着最好的方法是使用挂钩。我想使用挂钩并覆盖默认模板,但在模板中,所有代码都是调用do_action 函数,并且只有一点html标记。如何使用挂钩和模板覆盖自定义方面?

1 个回复
最合适的回答,由SO网友:Younes.D 整理而成

根据我在woocommerce的经验,有两种方法。

1-为当前主题添加一些额外的css。

例如,我想修改产品的标题:

我打开chrome inspector,我看到产品页面有一个css类body.single-product.

产品容器有一个css类div.product (由woocommerce自己创建<div id = "product - <? php the_ID ();?>" <? php wc_product_class (\'\', $ product);? >>).

因此,我可以应用自己的风格(例如,我的主题在h1 css类的标记product-title)

所以我无法通过以下方式覆盖:

body.single.single-product div.product h1.product-title {
  color: #13345f;
  font-size: 1.5em;
  font-weight: 800;
}
我的产品页面中的其他元素也是如此。

第二种方法,您可以创建自己的模板:your-theme/woocomerce / , 和使用wc_get_template_part() .

例如:我想创建自定义产品详细信息。

在我的主题中,我创建了文件夹woocomerce和一个名为single-produt.php, 在同一级别中,一个名为content-single-product-custom.php .

和内部single-produt.php , 我称之为:wc_get_template_part( \'content\', \'single-product-custom\' );