时间戳

首页 > 解决方案 > 重新排序 WooCommerce 变体下拉列表（不是重新排序属性术语）

wordpress - 重新排序 WooCommerce 变体下拉列表（不是重新排序属性术语）

问题描述

我有一家商店，里面有很多简单的产品和一些可变的产品。可变产品之一具有三个可变属性，因此有三个<select>列表可供选择：

显示三个 WooCommerce 变体下拉列表的屏幕截图。

我需要的是反转下拉菜单出现的顺序，如下所示：

我所有的搜索都只找到了重新排序<option>属性项的方法。需要明确的是，这不是我需要的。

这是标记的示例：

    <tbody>
        <tr>
            <td class="label"><label for="pa_mounting-brackets">Mounting Brackets</label></td>
            <td class="value">
                <!-- A select element with many option elements -->
            </td>
        </tr>
        <tr>
            <td class="label"><label for="pa_tractor-type">Tractor Type</label></td>
            <td class="value">
                <!-- A select element with many option elements -->
            </td>
        </tr>

        <tr>
            <td class="label"><label for="pa_isobus">ISObus</label></td>
            <td class="value">
                    <!-- A select element with two option elements -->
            </td>
        </tr>

        <tr>
            <td class="label"></td>
            <td class="value">
                <div class="single_variation_price_reset">
                    <div class="single_variation_wrap">
                        <div class="avada-variation single_variation" style="display: none;"></div>
                    </div>

                    <a class="reset_variations" href="#" style="visibility: hidden;">Clear selection</a></div>
            </td>
        </tr>
    </tbody>
</table>

display: flex;我可以使用 CSS和属性对表格行重新排序order，但每个<tr>元素上没有唯一标识符。我必须仅根据使用第 n 个选择器的元素顺序来定位我的 CSS。

是否有我缺少的实现此目标的 UI 或基于过滤器的方法？

标签： wordpresswoocommerce

解决方案

通常情况下，用语言提出问题会导致我找到一种解决方案。我的商店正在使用 Avada，有问题的 HTML 来自主题模板之一，而不是原版 WooCommerce。

我将 /wp-content/themes/Avada/woocommerce/single-product/add-to-cart/variable.php 复制到我的子主题 /wp-content/themes/Avada-Child-Theme/woocommerce/single-product/ add-to-cart/variable.php 并找到以下内容：

原来的：

<table class="variations" cellspacing="0">
            <tbody>
                <?php foreach ( $attributes as $attribute_name => $options ) : ?>
                    <tr>
                        <td class="label"><label for="<?php echo esc_attr( sanitize_title( $attribute_name ) ); ?>">

我for="<?php echo esc_attr( sanitize_title( $attribute_name ) ); ?>"从<label>元素中复制并将其粘贴到上面的<tr>元素中，更改for为class.

修改的：

<table class="variations" cellspacing="0">
            <tbody>
                <?php foreach ( $attributes as $attribute_name => $options ) : ?>
                    <tr class="<?php echo esc_attr( sanitize_title( $attribute_name ) ); ?>">
                        <td class="label"><label for="<?php echo esc_attr( sanitize_title( $attribute_name ) ); ?>">

这给了我一些选择器来瞄准我的 CSS。这是我使用 flex 重新排序的 CSS：

.single-product.woocommerce .variations > tbody {
    display: flex;
    flex-direction: column;
}

.single-product.woocommerce .variations > tbody > tr {
    display: flex;
    justify-content: space-between;
    order: 99;
}

.single-product.woocommerce .variations > tbody .pa_isobus {
    order: 1;
}

.single-product.woocommerce .variations > tbody .pa_tractor-type {
    order: 2;
}

.single-product.woocommerce .variations > tbody .pa_mounting-brackets {
    order: 3;
}

.single-product.woocommerce .variations > tbody > tr > td {
    flex-basis: 50%;
}

如果你有一个更简单、更好的解决方案，我仍然很想知道。

推荐阅读