在 WooCommerce 中更改结帐页面

Question

我有一个使用 WordPress 和 WooCommerce 插件开发的电子商务网站。一切都已完成，但我想更改结帐页面的完整布局。我试图找到一个插件来做到这一点，但失败了。

有什么方法可以改变结帐页面的布局或设计？

Answer 1

已编辑：

WOOCOMMERCE 模板：

您可以将“templates”文件夹（位于 woocommerce 插件文件夹内）复制到您的主题（或子主题）文件夹，并将其重命名为“woocommerce”。
然后，您可以在其中选择要编辑的文件以满足您的需要。

在您的情况下，您会在名为“checkout”的文件夹中找到。此“结帐”文件夹中的所有文件都是结帐页面布局的不同组件。

负责结帐页面/表单上组件的不同文件

form-checkout.php 是结帐页面的主要文件。
form-login.php 呈现登录表单。
form-coupon.php 呈现优惠券表单。
form-billing.php 呈现账单表单。
form-shipping.php 呈现运输表格。 （当“运送到不同地址”复选框被选中时显示）
review-order.php 呈现订单审查块。
payment.php 呈现付款选项块。
payment.php 有一个循环，其中每个启用付款方式另一个文件> 调用payment-method.php。
cart-errors.php 显示购物车错误。
调用thankyou.php 以显示订单收到确认。（“订单接收”端点）

在儿童主题中添加 WOOCOMMERCE 样式表以便于修改
因为有时很难覆盖某些特定的 WooCommerce 样式。

Step.1 - 禁用一般的 woocommerce.css 文件。

将此 PHP 代码添加到活动主题的函数文件 (functions.php)：

add_filter( 'woocommerce_enqueue_styles', 'wooc_dequeue_styles' );

function wooc_dequeue_styles( $enqueue_styles ) {
    unset( $enqueue_styles['woocommerce-general'] );
    return $enqueue_styles;
}

Step.2 - 在活动主题的文件夹中创建一个名为“woocommerce”的新文件夹（如果尚不存在）。

Step.3 - 将 woocommerce.css 文件复制到您的活动主题文件夹中新创建的文件夹 woocommerce 中。
woocommerce.css 文件位于：plugins/woocommerce/assets/css/woocommerce.css。

Step.4 - 在您的活动主题中启用（入队）通用 woocommerce.css 文件。

将此 PHP 代码添加到活动主题的函数文件中：

add_action('wp_enqueue_scripts', 'woocommerce_style_sheet');

function woocommerce_style_sheet() {
    wp_enqueue_style( 'woocommerce', get_stylesheet_directory_uri() . '/woocommerce/woocommerce.css' );
}

选项：

—您还可以启用/禁用其他 woocommerce css 文件：see this snippet at woo themes

—您可以一次禁用所有 Woocommerce 样式表：

add_filter( 'woocommerce_enqueue_styles', '__return_false' );