<think>我们注意到问题:购物车页面内容仍然太窄,看起来像平板/移动布局,所有内容都被挤压了。这可能是由于主题或插件的默认样式覆盖了我们的宽屏样式。
解决方案:
1. 移除可能导致挤压的容器样式
2. 确保表格能够充分利用屏幕宽度
3. 调整内边距和列宽,使内容更宽松
修改点:
- 移除外部容器的最大宽度限制(max-width)和内边距(padding)
- 调整表格列宽,使各列有更合理的空间分配
- 确保表格标题和单元格有足够的空间
我们将对之前提供的代码进行以下调整:
在样式部分:
.wide-cart-container 修改:
max-width: none; /* 移除最大宽度限制 */
padding: 0; /* 移除内边距 */
.wide-cart-table 修改:
table-layout: auto; /* 改为自动布局,这样列宽可以根据内容自适应,但我们会给每列设置最小宽度 */
同时,我们为每一列设置一个最小宽度,避免内容挤压。
另外,我们注意到商品参数列可能包含较多内容,因此我们将其设置为自动宽度,并允许换行。
修改后的样式如下:</think>我理解您的问题:购物车页面内容仍然太窄,看起来像平板/移动布局,所有内容都被挤压在一起。下面我将提供优化方案,让购物车页面充分利用PC屏幕宽度,遵循默认设置并消除挤压感。
### 解决方案:完全宽屏购物车布局
```php
<?php
defined('ABSPATH') || exit;
do_action('woocommerce_before_cart'); ?>
<style>
/* 完全宽屏布局 - 消除所有宽度限制 */
.full-width-cart-container {
width: 100%;
max-width: none;
margin: 0;
padding: 0 20px;
}
.full-width-cart-table {
width: 100%;
table-layout: auto;
border-collapse: collapse;
}
.full-width-cart-table th,
.full-width-cart-table td {
padding: 22px 18px;
vertical-align: middle;
border-bottom: 1px solid #eaeaea;
}
.full-width-cart-table thead th {
background-color: #f8f8f8;
font-weight: 600;
text-align: center;
white-space: nowrap;
}
/* 商品信息列 - 自适应宽度 */
.product-info-col {
min-width: 280px;
}
.product-info-container {
display: flex;
align-items: center;
}
.product-info-container img {
width: 140px;
height: 140px;
object-fit: contain;
margin-right: 25px;
border: 1px solid #f0f0f0;
background: #fff;
}
.product-details {
flex: 1;
min-width: 0; /* 防止文本溢出 */
}
.product-details .product-name {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
}
/* 商品参数列 - 自适应宽度 */
.product-attributes-col {
min-width: 200px;
max-width: 300px;
}
.product-attributes-list {
margin: 0;
padding: 0;
list-style: none;
}
.product-attributes-list li {
margin-bottom: 8px;
font-size: 14px;
line-height: 1.4;
}
/* 单价列 */
.product-price-col {
width: 120px;
text-align: center;
font-size: 18px;
font-weight: 600;
}
/* 数量列 */
.product-quantity-col {
width: 170px;
text-align: center;
}
.quantity-wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.quantity-wrapper .qty-minus,
.quantity-wrapper .qty-plus {
width: 46px;
height: 46px;
background: #f5f5f5;
border: 1px solid #ddd;
cursor: pointer;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.2s;
}
.quantity-wrapper .qty-minus:hover,
.quantity-wrapper .qty-plus:hover {
background: #e0e0e0;
}
.quantity-wrapper input.qty {
width: 70px;
height: 46px;
text-align: center;
margin: 0 5px;
border: 1px solid #ddd;
font-size: 16px;
}
/* 金额列 */
.product-subtotal-col {
width: 150px;
text-align: center;
font-weight: 700;
font-size: 18px;
}
/* 操作列 */
.product-remove-col {
width: 80px;
text-align: center;
}
.product-remove a.remove {
display: inline-block;
width: 46px;
height: 46px;
line-height: 46px;
text-align: center;
background: #f8f8f8;
border-radius: 50%;
color: #999;
font-size: 26px;
transition: all 0.3s;
}
.product-remove a.remove:hover {
background: #ff0000;
color: #fff;
transform: scale(1.1);
}
/* 粘性底部工具栏 */
.sticky-cart-footer {
position: sticky;
bottom: 0;
background: #fff;
padding: 25px 30px;
border-top: 1px solid #ddd;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 -5px 25px rgba(0,0,0,0.08);
z-index: 100;
margin-top: 40px;
}
.footer-left, .footer-right {
display: flex;
align-items: center;
gap: 25px;
}
.footer-left label {
display: flex;
align-items: center;
font-weight: 600;
font-size: 16px;
cursor: pointer;
}
#footer-select-all {
width: 22px;
height: 22px;
margin-right: 12px;
}
.footer-left button {
padding: 14px 28px;
background: #f5f5f5;
border: 1px solid #ddd;
border-radius: 4px;
font-weight: 600;
font-size: 15px;
cursor: pointer;
transition: all 0.3s;
}
.footer-left button:hover {
background: #eaeaea;
transform: translateY(-2px);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.selected-summary {
display: flex;
flex-direction: column;
margin-right: 40px;
}
.selected-count {
font-weight: 600;
font-size: 16px;
margin-bottom: 5px;
}
.selected-total {
color: #d33;
font-size: 22px;
font-weight: 700;
}
.checkout-button {
padding: 16px 45px;
background: #4CAF50;
color: white;
border: none;
border-radius: 4px;
font-size: 18px;
font-weight: 700;
cursor: pointer;
transition: background 0.3s;
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}
.checkout-button:hover {
background: #3d8b40;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(76, 175, 80, 0.4);
}
/* 优惠券区域 */
.cart-actions-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 25px 0;
}
.coupon {
display: flex;
align-items: center;
gap: 15px;
}
.coupon label {
font-weight: 600;
font-size: 16px;
white-space: nowrap;
}
.coupon input {
padding: 14px;
width: 250px;
border: 1px solid #ddd;
font-size: 15px;
}
.coupon button {
padding: 14px 28px;
background: #333;
color: white;
border: none;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.coupon button:hover {
background: #222;
transform: translateY(-2px);
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
/* 更新按钮 */
.update-cart-button {
padding: 14px 35px;
background: #f0f0f0;
border: 1px solid #ddd;
border-radius: 4px;
font-weight: 600;
font-size: 15px;
cursor: pointer;
transition: all 0.3s;
}
.update-cart-button:hover {
background: #e0e0e0;
transform: translateY(-2px);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* 响应式调整 - 仅在必要时 */
@media (max-width: 1200px) {
.product-attributes-col {
display: none;
}
}
</style>
<div class="full-width-cart-container">
<form class="woocommerce-cart-form" action="<?php echo esc_url(wc_get_cart_url()); ?>" method="post">
<?php do_action('woocommerce_before_cart_table'); ?>
<table class="full-width-cart-table shop_table shop_table_responsive cart woocommerce-cart-form__contents">
<thead>
<tr>
<th class="product-select" style="width: 60px;">
<input type="checkbox" id="select-all-items" checked>
</th>
<th class="product-info-col"><?php esc_html_e('商品信息', 'woocommerce'); ?></th>
<th class="product-attributes-col"><?php esc_html_e('规格参数', 'woocommerce'); ?></th>
<th class="product-price-col"><?php esc_html_e('单价', 'woocommerce'); ?></th>
<th class="product-quantity-col"><?php esc_html_e('数量', 'woocommerce'); ?></th>
<th class="product-subtotal-col"><?php esc_html_e('小计', 'woocommerce'); ?></th>
<th class="product-remove-col"><?php esc_html_e('操作', 'woocommerce'); ?></th>
</tr>
</thead>
<tbody>
<?php do_action('woocommerce_before_cart_contents'); ?>
<?php
foreach (WC()->cart->get_cart() as $cart_item_key => $cart_item) {
$_product = apply_filters('woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key);
$product_id = apply_filters('woocommerce_cart_item_product_id', $cart_item['product_id'], $cart_item, $cart_item_key);
if ($_product && $_product->exists() && $cart_item['quantity'] > 0 && apply_filters('woocommerce_cart_item_visible', true, $cart_item, $cart_item_key)) {
$product_permalink = apply_filters('woocommerce_cart_item_permalink', $_product->is_visible() ? $_product->get_permalink($cart_item) : '', $cart_item, $cart_item_key);
?>
<tr class="woocommerce-cart-form__cart-item <?php echo esc_attr(apply_filters('woocommerce_cart_item_class', 'cart_item', $cart_item, $cart_item_key)); ?>">
<!-- 选择列 -->
<td class="product-select" style="width: 60px;">
<input type="checkbox" class="cart-item-selector" name="selected_items[]" value="<?php echo esc_attr($cart_item_key); ?>" checked>
</td>
<!-- 商品信息列 -->
<td class="product-info-col">
<div class="product-info-container">
<?php
$thumbnail = apply_filters('woocommerce_cart_item_thumbnail', $_product->get_image(), $cart_item, $cart_item_key);
if (!$product_permalink) {
echo $thumbnail;
} else {
printf('<a href="%s">%s</a>', esc_url($product_permalink), $thumbnail);
}
?>
<div class="product-details">
<div class="product-name">
<?php
if (!$product_permalink) {
echo wp_kses_post(apply_filters('woocommerce_cart_item_name', $_product->get_name(), $cart_item, $cart_item_key) . ' ');
} else {
echo wp_kses_post(apply_filters('woocommerce_cart_item_name', sprintf('<a href="%s">%s</a>', esc_url($product_permalink), $_product->get_name()), $cart_item, $cart_item_key));
}
?>
</div>
<?php
do_action('woocommerce_after_cart_item_name', $cart_item, $cart_item_key);
// Meta data
echo wc_get_formatted_cart_item_data($cart_item);
?>
</div>
</div>
</td>
<!-- 商品参数列 -->
<td class="product-attributes-col">
<?php
// 显示商品属性(颜色、尺寸等)
$attributes = $_product->get_attributes();
if (!empty($attributes)) {
echo '<ul class="product-attributes-list">';
foreach ($attributes as $attribute) {
$name = $attribute->get_name();
if ($attribute->is_taxonomy()) {
$terms = wp_get_post_terms($product_id, $name, array('fields' => 'names'));
if (!is_wp_error($terms) && !empty($terms)) {
echo '<li><strong>' . wc_attribute_label($name) . ':</strong> ' . implode(', ', $terms) . '</li>';
}
} else {
echo '<li><strong>' . esc_html($name) . ':</strong> ' . esc_html($attribute) . '</li>';
}
}
echo '</ul>';
} else {
echo '<span class="na">-</span>';
}
?>
</td>
<!-- 单价列 -->
<td class="product-price-col">
<?php
echo apply_filters('woocommerce_cart_item_price', WC()->cart->get_product_price($_product), $cart_item, $cart_item_key);
?>
</td>
<!-- 数量列 -->
<td class="product-quantity-col">
<?php
if ($_product->is_sold_individually()) {
$product_quantity = sprintf('1 <input type="hidden" name="cart[%s][qty]" value="1" />', $cart_item_key);
} else {
$product_quantity = woocommerce_quantity_input(
array(
'input_name' => "cart[{$cart_item_key}][qty]",
'input_value' => $cart_item['quantity'],
'max_value' => $_product->get_max_purchase_quantity(),
'min_value' => '0',
'product_name' => $_product->get_name(),
),
$_product,
false
);
}
echo '<div class="quantity-wrapper">';
echo '<button type="button" class="qty-minus">-</button>';
echo apply_filters('woocommerce_cart_item_quantity', $product_quantity, $cart_item_key, $cart_item);
echo '<button type="button" class="qty-plus">+</button>';
echo '</div>';
?>
</td>
<!-- 金额列 -->
<td class="product-subtotal-col">
<?php
echo apply_filters('woocommerce_cart_item_subtotal', WC()->cart->get_product_subtotal($_product, $cart_item['quantity']), $cart_item, $cart_item_key);
?>
</td>
<!-- 操作列 -->
<td class="product-remove-col">
<?php
echo apply_filters(
'woocommerce_cart_item_remove_link',
sprintf(
'<a href="%s" class="remove" aria-label="%s" data-product_id="%s" data-product_sku="%s">×</a>',
esc_url(wc_get_cart_remove_url($cart_item_key)),
esc_html__('移除商品', 'woocommerce'),
esc_attr($product_id),
esc_attr($_product->get_sku())
),
$cart_item_key
);
?>
</td>
</tr>
<?php
}
}
?>
<?php do_action('woocommerce_cart_contents'); ?>
<tr>
<td colspan="7" class="actions" style="padding: 20px 0;">
<div class="cart-actions-container">
<?php if (wc_coupons_enabled()) { ?>
<div class="coupon">
<label for="coupon_code"><?php esc_html_e('优惠券:', 'woocommerce'); ?></label>
<input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="<?php esc_attr_e('输入优惠码', 'woocommerce'); ?>" />
<button type="submit" class="button" name="apply_coupon" value="<?php esc_attr_e('应用优惠券', 'woocommerce'); ?>"><?php esc_attr_e('应用', 'woocommerce'); ?></button>
<?php do_action('woocommerce_cart_coupon'); ?>
</div>
<?php } ?>
<button type="submit" class="update-cart-button" name="update_cart" value="<?php esc_attr_e('更新购物车', 'woocommerce'); ?>"><?php esc_html_e('更新购物车', 'woocommerce'); ?></button>
<?php do_action('woocommerce_cart_actions'); ?>
<?php wp_nonce_field('woocommerce-cart', 'woocommerce-cart-nonce'); ?>
</div>
</td>
</tr>
<?php do_action('woocommerce_after_cart_contents'); ?>
</tbody>
</table>
<?php do_action('woocommerce_after_cart_table'); ?>
</form>
<!-- 粘性底部工具栏 -->
<div class="sticky-cart-footer">
<div class="footer-left">
<label for="footer-select-all">
<input type="checkbox" id="footer-select-all" checked>
<strong><?php esc_html_e('全选商品', 'woocommerce'); ?></strong>
</label>
<button type="button" class="button remove-selected">
<?php esc_html_e('刪除選中的商品', 'woocommerce'); ?>
</button>
<button type="button" class="button clear-cart">
<?php esc_html_e('清空購物車', 'woocommerce'); ?>
</button>
</div>
<div class="footer-right">
<div class="selected-summary">
<span class="selected-count"><?php printf(esc_html__('已选商品 (%d) 件', 'woocommerce'), count(WC()->cart->get_cart())); ?></span>
<span class="selected-total"><?php printf(esc_html__('总计: %s', 'woocommerce'), WC()->cart->get_cart_subtotal()); ?></span>
</div>
<a href="<?php echo esc_url(wc_get_checkout_url()); ?>" class="button checkout-button">
<?php esc_html_e('结算', 'woocommerce'); ?>
</a>
</div>
</div>
<?php do_action('woocommerce_before_cart_collaterals'); ?>
<div class="cart-collaterals">
<?php
do_action('woocommerce_cart_collaterals');
?>
</div>
</div>
<?php do_action('woocommerce_after_cart'); ?>
<script>
jQuery(document).ready(function($) {
// 数量加减按钮功能
$('.qty-plus').on('click', function() {
var input = $(this).siblings('.qty');
var currentVal = parseInt(input.val());
var max = parseInt(input.attr('max')) || 9999;
if (!isNaN(currentVal) && currentVal < max) {
input.val(currentVal + 1).trigger('change');
}
});
$('.qty-minus').on('click', function() {
var input = $(this).siblings('.qty');
var currentVal = parseInt(input.val());
var min = parseInt(input.attr('min')) || 0;
if (!isNaN(currentVal) && currentVal > min) {
input.val(currentVal - 1).trigger('change');
}
});
// 全选功能
$('#select-all-items, #footer-select-all').on('change', function() {
var isChecked = $(this).prop('checked');
$('.cart-item-selector').prop('checked', isChecked);
$('#select-all-items').prop('checked', isChecked);
$('#footer-select-all').prop('checked', isChecked);
updateSelectedSubtotal();
});
// 单个复选框变化时更新全选状态
$('.cart-item-selector').on('change', function() {
var allChecked = $('.cart-item-selector').length === $('.cart-item-selector:checked').length;
$('#select-all-items').prop('checked', allChecked);
$('#footer-select-all').prop('checked', allChecked);
updateSelectedSubtotal();
});
// 删除选中商品
$('.remove-selected').on('click', function() {
var selectedItems = [];
$('.cart-item-selector:checked').each(function() {
selectedItems.push($(this).val());
});
if (selectedItems.length === 0) {
alert('请先选择要删除的商品');
return;
}
if (confirm('确定要删除选中的商品吗?')) {
$.each(selectedItems, function(index, cartItemKey) {
// 移除DOM元素
$('input[value="' + cartItemKey + '"]').closest('tr').fadeOut(300, function() {
$(this).remove();
});
// 发送AJAX请求从购物车中移除
$.ajax({
type: 'POST',
url: wc_cart_params.ajax_url,
data: {
action: 'woocommerce_remove_cart_item',
cart_item_key: cartItemKey,
_wpnonce: wc_cart_params.remove_item_nonce
}
});
});
// 更新购物车
$(document.body).trigger('wc_update_cart');
}
});
// 清空购物车
$('.clear-cart').on('click', function() {
if (confirm('确定要清空整个购物车吗?')) {
$.ajax({
type: 'POST',
url: wc_cart_params.ajax_url,
data: {
action: 'woocommerce_clear_cart',
_wpnonce: wc_cart_params.clear_cart_nonce
},
success: function() {
$('.woocommerce-cart-form__cart-item').fadeOut(300, function() {
$(this).remove();
});
$(document.body).trigger('wc_update_cart');
}
});
}
});
// 更新小计函数
function updateSelectedSubtotal() {
var selectedCount = $('.cart-item-selector:checked').length;
$('.selected-count').text('已选商品 (' + selectedCount + ') 件');
// 这里可以添加AJAX请求计算选中商品总价
// 实际实现需要根据之前的AJAX方案
}
// 初始更新
updateSelectedSubtotal();
});
</script>
```
### 关键优化点:
1. **完全宽屏布局**:
- 移除了所有`max-width`限制
- 使用`width: 100%`确保充分利用屏幕宽度
- 表格使用`table-layout: auto`自适应列宽
2. **消除挤压感的调整**:
- 增加所有元素的内边距(padding)
- 增大图片尺寸(140px×140px)
- 扩大数量选择器(按钮46px×46px)
- 增加字体大小(商品名称18px,价格18px)
- 扩大操作按钮(46px×46px)
3. **更宽松的列宽设置**:
```css
.product-info-col { min-width: 280px; }
.product-attributes-col { min-width: 200px; max-width: 300px; }
.product-price-col { width: 120px; }
.product-quantity-col { width: 170px; }
.product-subtotal-col { width: 150px; }
.product-remove-col { width: 80px; }
```
4. **增强视觉层次**:
- 商品名称加粗加大
- 价格和小计使用更大更粗字体
- 添加按钮悬停动画效果
- 增加元素间距
5. **交互优化**:
- 所有按钮添加悬停效果
- 数量按钮悬停背景变化
- 移除按钮悬停放大效果
- 结算按钮添加阴影效果
### 使用说明:
1. 将上述代码保存到:`woodmart-child/woocommerce/cart/cart.php`
2. 不需要修改其他文件
3. 此布局会自动适应宽屏PC显示器
4. 在小屏幕上(<1200px)会自动隐藏参数列保持可读性
### 效果说明:
这个布局具有以下特点:
- **充分利用屏幕宽度**:没有最大宽度限制,表格会扩展到整个屏幕
- **舒适的空间感**:所有元素都有足够的间距,不再拥挤
- **清晰的信息层级**:重要信息(价格、小计)更突出
- **专业的外观**:按钮和交互元素有精心设计的悬停效果
- **响应式处理**:在小屏幕上自动隐藏次要信息(参数列)