在不覆盖 Woocommerce 中的模板文件的情况下更改购物车列的顺序

Question

是否有解决方案可以在不复制我自己的模板文件夹中的文件的情况下更改购物车列的顺序？

原因是，我不想覆盖这么重要的模板文件。

不幸的是，顺序在文件 cart.php 中被硬编码为 table 而不是在函数中。

在这种情况下，是否有任何 "clean" 方法来更改列的顺序？

Answer 1

唯一的方法是 override Woocommerce cart/cart.php template via your active theme，因为它已硬编码在模板中。

Woocommerce 模板可以被覆盖，所以这样做没什么大不了的。

唯一令人讨厌的是，当模板文件在重大更新中更改时，如果模板已更改，您将不得不重新进行更改。

Answer 2

我设法通过设置 grid-template-area grid-template-area on smashingmag

使用 css 网格重新排列 woocommerce 列

这里是 css 代码：

.woocommerce-cart-form .shop_table tr{
    display: grid;
    grid-template-columns: 120px 40px 1fr 80px 100px 20px; /* change value here to fit your theme  */
    grid-template-areas: "product-thumbnail product-quantity product-name product-price product-subtotal product-remove"; /* change columns order here */
}

.woocommerce-cart-form .shop_table tr .product-thumbnail{grid-area: product-thumbnail;}
.woocommerce-cart-form .shop_table tr .product-quantity{grid-area:product-quantity;}
.woocommerce-cart-form .shop_table tr .product-name{grid-area:product-name;}
.woocommerce-cart-form .shop_table tr .product-price{grid-area:product-price;}
.woocommerce-cart-form .shop_table tr .product-subtotal{grid-area:product-subtotal;}
.woocommerce-cart-form .shop_table tr .product-remove{grid-area:product-remove;}

⚠︎ 别忘了用手机查看！