更改 WooCommerce 中的结帐页面

Question

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

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

Answer 1

已编辑：

WOOCOMMERCE 模板：

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

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

Different files responsible for components on checkout page/form

form-checkout.php is the primary file called for checkout page.
form-login.php renders the login form.
form-coupon.php renders the coupon form.
form-billing.php renders the billing form.
form-shipping.php renders the shipping form. (this is displayed when "ship to different address checkbox is checked)
review-order.php renders the order review block.
payment.php renders payment options block.
payment.php has a loop in which for each enabled payment method another file > payment-method.php is called.
cart-errors.php displays cart error.
thankyou.php is called for displaying order received confirmation. ("order-received" endpoint)

在子主题中添加 WooCOMMERCE 样式 SHEET 以便于修改
因为有时很难覆盖某些特定的 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' );
}

选项：

— 您还可以 enable/disable 其他 woocommerce css 文件：see this snippet at woo themes

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

add_filter( 'woocommerce_enqueue_styles', '__return_false' );