如何在 WordPress 网站上自定义 WooCommerce 购物车页面

一个标准的电子商务网站有一些常见的页面。有产品页面、列出产品的商店页面，以及用户帐户、结账流程和购物车的页面。

WooCommerce 使在 WordPress 网站上设置这些页面变得非常简单，因为它为它们提供了模板，并为您开箱即用地创建了页面。这使得您只需设置一些产品和支付处理详细信息，即可在几分钟内轻松启动和运行您的商店。WooCommerce 在这方面非常有用。

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

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

我们将改为使用类似这样的外观

以下是不同之处

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

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

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

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

add_theme_support('woocommerce');

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

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

/wp-content/plugins/woocommerce/templates/cart/cart.php

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

/**
 * 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
 */

突出显示的行正是我们正在寻找的——关于如何覆盖文件的说明！WooCommerce 团队在最开始就为我们提供了如此友好的提示。

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

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

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

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

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

我们的标记放在哪里？好吧，为了使布局看起来像我们在本文开头所设计的那样，我们可以在购物车的结束表格 </table> 下方开始，如下所示

</table>
<!-- Custom code here -->
<?php do_action( 'woocommerce_after_cart_table' ); ?>

我们不会介绍创建这些元素的具体 HTML。重要的是要知道这些标记放在哪里。

完成后，我们应该得到类似以下的结果

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

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

我们可以向模板中添加更多标记来创建两个单独的列。但是现有的标记已经以一种我们可以使用 CSS 轻松实现我们想要的效果的方式很好地组织了…… 感谢 Flexbox！

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

.woocommerce-cart .woocommerce {
  display: flex;
}

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

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

/* The table containing the list of products and our custom elements */
.woocommerce-cart .woocommerce-cart-form {
  flex: 1 0 70%; /* 100% at small screens; 70% on larger screens */
  margin-right: 30px;
}
/* The element that contains the cart totals */
.woocommerce-cart .cart-collaterals {
  flex: 1 0 30%; /* 100% at small screens; 30% on larger screens */
  margin-left: 30px;
}
/* Some minor tweak to make sure the cart totals fill the space */
.woocommerce-cart .cart-collaterals .cart_totals {
  width: 100%;
  padding: 0 20px 70px;
}

这给了我们一个非常简洁的布局

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

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

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

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

/* The "Apply Coupon" button */
.button[name="apply_coupon"] {
  background-color: transparent;
  color: #13aff0;
}
/* Fill the "Apply Coupon" button background color and underline it on hover */
.button[name="apply_coupon"]:hover {
  background-color: transparent;
  text-decoration: underline;
}


/* The "Update Cart" button */
.button[name="update_cart"] {
  background-color: #e2e2e2;
  color: #13aff0;
}
/* Brighten up the button on hover */
.button[name="update_cart"]:hover {
  filter: brightness(115%);
}

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

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

要创建此设计的完整 CSS 如下所示

@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%);
}

总结！

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

在此期间，您可以尽情自定义 WordPress 网站上的电子商务体验，并且可以花点时间浏览一下 WooCommerce 文档——那里有很多好东西，包括用于各种事物的 预制代码段。