在 WooCommerce Checkout 订单审核中自定义送货选项

Question

我正在尝试自定义 Woo Checkout Order Review 元素，但不知何故我无法很好地自定义它，所以我将尝试我最喜欢的论坛的力量。

当前外观如下面的屏幕截图所示，目标是重新设计它。

我想将运费和选项与剩余信息分开，但保留其位置，因此解决方案应该是创建一些边框（顶部和底部），添加一些标题并设置表格行的宽度（td）到100%。我还附上了截图。

首先我尝试使用CSS编辑表格。

隐藏第：

.woocommerce-shipping-totals th {
    display: none !important;
    width: 0px !important;
}

设置td的宽度：

.woocommerce-shipping-totals td {
    width: 100% !important;
    text-align: right !important;
} 

并添加一些边框：

.woocommerce-shipping-totals {
    border-top: 1px solid #bbb !important;
    border-bottom: 1px solid #ccc !important;

}

结果如下面的屏幕截图所示，效果不佳，但我认为我只是做错了方法。不幸的是我不知道如何继续。

第二次尝试正在编辑“/templates/checkout/review-order.php”文件。

生成运费的代码如下。我尝试在 () 之前/之后添加一些分隔符，但每次它都是在整个结账审核表之前或之后生成的。任何时候不在里面，所以在结帐之前或之后，订单运送我需要的东西。

<?php if ( WC()->cart->needs_shipping() && WC()->cart->show_shipping() ) : ?>
    <?php do_action( 'woocommerce_review_order_before_shipping' ); ?>
    <?php wc_cart_totals_shipping_html(); ?>
    <?php do_action( 'woocommerce_review_order_after_shipping' ); ?>
<?php endif; ?>

无论如何，该文件可能是正确的，因为当我尝试隐藏“”时，它没有显示正确的结果。

第三次尝试正在编辑“/templates/cart/cart-shipping.php”文件，但我可能完全迷失了。我所做的任何事情都会导致运输元素完全隐藏。

我希望我描述得很好，我将非常感谢任何帮助。现在已经尝试了几个小时，但没有任何效果。

感谢您的回答。

Answer 1

您将使用您的第三次尝试，通过您的子主题覆盖，模板：

cart-shipping.php

。

为此，您首先在子主题文件夹中创建一个名为“woocommerce”的文件夹，其中包含一个名为“cart”的子文件夹。在该“购物车”子文件夹中，您将复制位于

cart-shipping.php

中的

plugins/woocommerce/templates/cart/cart-shipping.php

模板文件。

打开编辑复制的文件并从第 26 行到第 30 行替换以下块：

?>
<tr class="woocommerce-shipping-totals shipping">
    <th><?php echo wp_kses_post( $package_name ); ?></th>
    <td data-title="<?php echo esc_attr( $package_name ); ?>">
        <?php if ( $available_methods ) : ?>

这样：

if ( is_cart() ) : ?>
<tr class="woocommerce-shipping-totals shipping">
    <th><?php echo wp_kses_post( $package_name ); ?></th>
    <td data-title="<?php echo esc_attr( $package_name ); ?>">
<?php else : ?>
<tr class="woocommerce-shipping-totals shipping shipping-title">
    <th colspan="2"><?php echo wp_kses_post( $package_name ); ?></th>
</tr>
<tr class="woocommerce-shipping-totals shipping shipping-options">
    <td colspan="2" data-title="<?php echo esc_attr( $package_name ); ?>" style="text-align:right">
<?php endif; ?>
        <?php if ( $available_methods ) : ?>

应该可以。