Question

在WooCommerce上建立联盟网站，并希望改变产品的外观。我使用MaterialiseCSS作为前端框架，所以我试图将WooCommerce的功能融入我创建的网格中。

以下是HTML中“行”中的一个产品的样本：

<div class="row">
<div class="col l3 s6">
  <div class="card hoverable">
    <div class="card-image">
      <a href="affiliateurl.com">
        <img src="productphoto.jpg"
          class="padding20">
      </a>
      </div>
    </div>

    <div class="card-content greybordertop center-align">
      <span class="grey-text text-darken-4 card-title font14 lineheight15">Thermal Sensitive Color Changing Zombie Mug</span>
    </div>

    <a href="affiliateurl.com" class="nospace">
      <div class="card-action center-align">
        VIEW THIS PRODUCT
      </div>
    </a>
    <div>2.99</div>
  </div>
</div>

截至目前，该页面看起来像是一个通用的WooCommerce页面，其中包含通用的WooCommerce产品：Generic WooCommerce Products。

我想让它看起来更像：Ideal Product Grid and Look。

如果有人对如何通过片段，覆盖CSS等转换网格+产品外观有一些想法，那将非常感激。我觉得我已经尝试过绝对一切而且无处可去。

编辑：首先应该提到我使用MaterialiseCSS作为框架，并在HTML / CSS中构建了网站，这里的障碍是使其与WooCommerce兼容。

Answer 1

我会创建一个子主题（请参阅这篇文章https://docs.woocommerce.com/document/set-up-and-use-a-child-theme/）然后只将要修改的文件复制到子主题文件夹中，并按照您想要的方式对其进行编码。关于如何在该文章中实现这一点的更多细节。

这种方法会阻止您在每次更新woocommerce时进行更改。

Answer 2

我建议你复制主题，更改 style.css 中的名称和复制主题的文件夹。做你想要的改变旧主题不会受到伤害。

如何在WooCommerce上改变产品的外观？

2 个答案: