如何在WordPress网站上自定义WooCommerce Cart页面

大多数电商网站都有一些常见的页面：产品页面、列出产品的商店页面，以及用户帐户、结账流程和购物车的页面。

WooCommerce使得在WordPress网站上设置这些页面变得非常简单，因为它提供了相应的模板，并可以直接创建这些页面。这使得您只需设置一些产品和支付处理细节，就能在几分钟内轻松启动您的商店。WooCommerce在这方面非常实用。

但这篇文章并非要赞扬WooCommerce的优点。相反，让我们看看如何自定义它的一部分。具体来说，我想看看购物车。WooCommerce具有极高的可扩展性，因为它提供了大量的过滤器和操作可以挂钩，以及一种在WordPress主题中覆盖模板的方法。问题是，这些至少需要一些中级开发技能，对于某些人来说可能不可行。而且，至少根据我的经验，购物车页面往往是最难理解和自定义的。

让我们看看如何通过实现不同的布局来更改WooCommerce购物车页面。这是标准默认购物车页面的外观：

我们将改为如下所示：

不同之处在于：

• 我们采用了两列布局，而不是默认模板的单列全宽布局。这使得我们可以在大屏幕上更清晰地显示“购物车总计”元素。
• 我们通过在产品列表下方添加一些好处来增强客户的信心。这提醒客户他们的购买所获得的价值，例如免费送货、轻松换货、客户支持和安全性。
• 我们在产品列表下方以手风琴格式包含了一系列常见问题解答。这有助于客户在无需离开并联系支持的情况下获得有关其购买的答案。

本教程假设您可以访问您的主题文件。如果您不熟悉登录您的主机服务器并访问文件管理器，我建议您安装WP File Manager插件。只需使用免费版本，您就可以完成此处解释的所有操作。

首先，让我们创建自己的模板

WooCommerce的众多优点之一是它为我们提供了预先设计和编码的模板。问题是这些模板文件位于插件文件夹中。如果插件将来更新（这几乎肯定会发生），我们对模板所做的任何更改都将丢失。由于直接编辑插件文件在WordPress中是大忌，WooCommerce允许我们通过在主题文件夹中复制这些文件来修改它们。只要我们在functions.php或功能插件中的某个位置执行此操作，这就会有效：

<code>add_theme_support('woocommerce');</code>

在进行此类更改时，最好使用子主题，尤其是在使用第三方主题时。这样，当发布主题更新时，对主题文件夹所做的任何更改都不会丢失。

为此，我们首先必须找到我们要自定义的模板。这意味着进入站点的根目录（如果您在本地工作，则位于您保存站点文件的位置，这是一个好主意）并打开WordPress安装位置的/wp-content。那里有几个文件夹，其中一个是/plugins。打开它，然后跳到/woocommerce文件夹。这是所有WooCommerce相关内容的主目录。我们需要cart.php文件，它位于：

<code>/wp-content/plugins/woocommerce/templates/cart/cart.php</code>

让我们在一个代码编辑器中打开该文件。您会注意到的第一件事是在文件顶部的几行注释：

<code>/**
 * Cart Page
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/cart/cart.php. // highlight
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 3.8.0
 */</code>

突出显示的行正是我们正在寻找的内容——关于如何覆盖文件的说明！WooCommerce团队提前为我们注意到这一点真是太好了。

让我们复制该文件并在主题中创建他们建议的文件路径：

<code>/wp-content/themes/[your-theme]/woocommerce/cart/cart.php</code>

将复制的文件放在那里，我们就可以开始处理它了。

接下来，让我们添加自己的标记

我们可以处理的前两件事是我们之前确定的好处和常见问题解答。我们要将它们添加到模板中。

我们的标记放在哪里？为了使布局看起来像我们在这篇文章开头所展示的那样，我们可以在购物车的结束表格下方开始，如下所示：

<code>

<?php do_action( 'woocommerce_after_cart_table' ); ??></code>

我们不会介绍构成这些元素的特定HTML。重要的是要知道标记放在哪里。

完成此操作后，我们应该得到如下所示的内容：

现在我们有了页面上所有需要的元素。剩下的就是设置样式，以便我们拥有两列布局。

好了，现在我们可以覆盖CSS了

我们可以向模板添加更多标记来创建两列。但是现有标记已经很好地组织起来，我们可以使用CSS来完成我们想要的操作……这要感谢flexbox！

第一步是使.woocommerce元素成为flex容器。它是包含我们所有其他元素的元素，因此它是一个很好的父元素。为了确保我们只在购物车中修改它而不是其他页面（因为其他模板确实使用了此类），我们应该将样式限定在购物车页面类中，WooCommerce也方便地提供了这个类。

<code>.woocommerce-cart .woocommerce {
  display: flex;
}</code>

这些样式可以直接放在主题的style.css文件中。这就是WooCommerce建议的。但是，请记住，在WordPress中自定义样式有很多方法，有些方法比其他方法更安全、更易于维护。

在.woocommerce元素中，我们有两个子元素，非常适合我们的两列布局：.woocommerce-cart-form和.cart-collaterals。我们需要将内容分割开的CSS如下所示：

<code>
/* 包含产品列表和自定义元素的表格 */
.woocommerce-cart .woocommerce-cart-form {
  flex: 1 0 70%; /* 小屏幕上为100%；大屏幕上为70% */
  margin-right: 30px;
}
/* 包含购物车总计的元素 */
.woocommerce-cart .cart-collaterals {
  flex: 1 0 30%; /* 小屏幕上为100%；大屏幕上为30% */
  margin-left: 30px;
}
/* 一些小的调整，以确保购物车总计填满空间 */
.woocommerce-cart .cart-collaterals .cart_totals {
  width: 100%;
  padding: 0 20px 70px;
}</code>

这给了我们一个相当干净的布局：

它看起来更像亚马逊的购物车页面和其他流行的电商商店，这绝对不是一件坏事。

最佳实践：使最重要的元素脱颖而出

我对WooCommerce默认设计的一个问题是所有按钮的设计方式相同。它们的大小和背景颜色都相同。

用户应该采取的操作没有视觉层次结构，因此很难区分，例如，如何更新购物车与继续结账。我们接下来应该做的是通过更改按钮的背景颜色来使这种区别更清晰。为此，我们编写以下CSS：

<code>/* “应用优惠券”按钮 */
.button[name="apply_coupon"] {
  background-color: transparent;
  color: #13aff0;
}
/* 填充“应用优惠券”按钮背景颜色并在悬停时下划线 */
.button[name="apply_coupon"]:hover {
  background-color: transparent;
  text-decoration: underline;
}


/* “更新购物车”按钮 */
.button[name="update_cart"] {
  background-color: #e2e2e2;
  color: #13aff0;
}
/* 悬停时使按钮更亮 */
.button[name="update_cart"]:hover {
  filter: brightness(115%);
}</code>

这样，我们就创建了以下层次结构：

1. “继续结账”几乎保持原样，使用默认的蓝色背景颜色，使其脱颖而出，因为它是购物车中最重要的操作。
2. “更新购物车”按钮获得灰色背景，与页面的白色背景融合在一起。这降低了它的优先级。
3. “应用优惠券”更像是一个文本链接，而不是一个按钮，使其成为这三个操作中不那么重要的操作。

您必须添加以创建此设计的完整CSS如下：

<code>@media(min-width: 1100px) {
  .woocommerce-cart .woocommerce {
    display: flex;
  }
  .woocommerce-cart .woocommerce-cart-form {
    flex: 1 0 70%;
    margin-right: 30px;
  }    
  .woocommerce-cart .cart-collaterals {
    flex: 1 0 30%;
    margin-left: 30px;
  }
}


.button[name="apply_coupon"] {
  background-color: transparent;
  color: #13aff0;
}


.button[name="apply_coupon"]:hover {
  text-decoration: underline;
  background-color: transparent;
  color: #13aff0;
}


.button[name="update_cart"] {
  background-color: #e2e2e2;
  color: #13aff0;
}


.button[name="update_cart"]:hover {
  background-color: #e2e2e2;
  color: #13aff0;
  filter: brightness(115%);
}</code>

总结！

还不错吧？WooCommerce 的可扩展性很好，但是如果没有一些通用的指导，可能很难知道您可以自定义多少内容。在本例中，我们看到了如何覆盖主题目录中的插件购物车模板以使其免受未来更新的影响，以及如何在自己的样式表中覆盖样式。我们还可以考虑使用 WooCommerce 挂钩、WooCommerce API，甚至使用 WooCommerce 条件来简化自定义，但这些可能适合以后的文章。

同时，享受自定义 WordPress 网站上的电子商务体验的乐趣，并随时在 WooCommerce 文档中花一些时间——那里有很多好东西，包括各种各样事情的预制代码片段。

以上是如何在WordPress网站上自定义WooCommerce Cart页面的详细内容。更多信息请关注PHP中文网其他相关文章！