如何在WordPress中移动产品导航箭头

1. 定位箭头元素的CSS类 #

打开浏览器开发者工具（按F12），点击选择工具选中导航箭头，查看它的CSS类名（常见的类名比如 .woocommerce-product-gallery__nav-prev、.woocommerce-product-gallery__nav-next，或是主题自定义的 .slider-arrow-prev/.slider-arrow-next 这类）。

2. 添加自定义CSS代码 #

进入WordPress后台，依次点击「外观」→「自定义」→「额外CSS」，添加以下代码（替换成你找到的实际类名）：

/* 调整左箭头位置 */
.your-prev-arrow-class {
    position: absolute;
    top: 50%; /* 垂直居中，可改为具体数值如30px */
    left: 10px; /* 距离左侧的距离，按需调整 */
    transform: translateY(-50%); /* 保持垂直居中对齐 */
}

/* 调整右箭头位置 */
.your-next-arrow-class {
    position: absolute;
    top: 50%;
    right: 10px; /* 距离右侧的距离，按需调整 */
    transform: translateY(-50%);
}

3. 按需调整数值适配布局 #

根据你的页面布局需求，修改top、left/right的数值：比如把top:50%改成top:30px让箭头靠上，或是调整水平方向的像素值改变箭头的左右位置。如果箭头原本不是绝对定位，需要先设置position: absolute;，同时确保箭头的父容器设置了position: relative;，这样箭头的定位才会基于父容器生效。

内容的提问来源于stack exchange，提问作者HellsapwnXerxes