WooCommerce页面看起来没有样式

Question

我正在与woocommerce玩，以定制商店方面。我注意到，如果我打开一个产品链接，页面看起来没有样式。我需要整合商店与我的引导4为基础的主题。在阅读了这些文档之后，我不知道如何继续，这是因为它被写成最好的方法是使用钩子。我想使用钩子并覆盖默认的模板，但是在模板中所有的代码都是调用do_action函数，并且只有少量的html标记。如何使用钩子和模板覆盖自定义方面？

Answer 1

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

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

例如，我想修改产品的标题：

打开chrome检查器，我看到产品页面中有一个用于body.single-product的类css。

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

因此，我可以应用我自己的风格(例如，我的主题在css类的h1标记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' );