Empty row added after each attribute in add_to_cart widget

  • Resolved kimu

    (@kimu)


    2 months, 3 weeks ago

    With the latest WooCommerce update, version 9.5.0 or version 9.5.1, you have changed the layout of the variation table in the add_to_cart widget.

    The change is in this file wp-content/plugins/woocommerce/templates/single-product/add-to-cart/variable.php

    In the previous version, in the same <td> element where the variation dropdown was shown you were evaluating whether the Clear button needed to be added.

    <td class="value">
        <?php
            wc_dropdown_variation_attribute_options(
                array(
                    'options'   => $options,
                    'attribute' => $attribute_name,
                    'product'   => $product,
                )
            );
            echo end( $attribute_keys ) === $attribute_name ? wp_kses_post( apply_filters( 'woocommerce_reset_variations_link', '<a class="reset_variations" href="#">' . esc_html__( 'Clear', 'woocommerce' ) . '</a>' ) ) : '';
        ?>
    </td>

    Now you have moved that evaluation in a separate row of the table, inside its own <tr><td> element. 

    <tr>
        <td colspan="2">
            <?php
            /**
             * Filters the reset variation button.
             *
             * @since 2.5.0
             *
             * @param string  $button The reset variation button HTML.
             */
            echo end( $attribute_keys ) === $attribute_name ? wp_kses_post( apply_filters( 'woocommerce_reset_variations_link', '<button class="reset_variations"  aria-label="' . esc_html__( 'Clear options', 'woocommerce' ) . '">' . esc_html__( 'Clear', 'woocommerce' ) . '</button>' ) ) : '';
            ?>
        </td>
    </tr>

    The effect of this change is that when the attribute being rendered is not the latest, an empty row is added to table below the attribute row.

    You can see the after and the before in the attached images

    View post on imgur.com
    After and Before

    I think you have broken the layout of a huge number of websites with this change.
    What it is quite annoying is is that there isn’t even a filter or something to remove that empty table row.

    What would make much more sense is that the markup, the new <tr><td> is added only when if end( $attribute_keys ) === $attribute_name is true to ensure that the Clear button row is added only at the end for the latest attribute, instead of being added for each attribute.

    You should change that code with the following

    <?php if ( end( $attribute_keys ) === $attribute_name ) : ?>
        <tr>
            <td colspan="2">
                <?php
                /**
                 * Filters the reset variation button.
                 *
                 * @since 2.5.0
                 *
                 * @param string  $button The reset variation button HTML.
                 */
                echo wp_kses_post( apply_filters( 'woocommerce_reset_variations_link', '<button class="reset_variations"  aria-label="' . esc_html__( 'Clear options', 'woocommerce' ) . '">' . esc_html__( 'Clear', 'woocommerce' ) . '</button>' ) );
                ?>
            </td>
        </tr>
    <?php endif; ?>

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter kimu

    (@kimu)

    Actually, I would argue whether if would make even more sense to give an option to remove it when woocommerce_reset_variations_link returns nothing, which gives users an option to remove the Clear button entirely.

    In that case the code should be 

    <?php 
        $reset_variation_link = wp_kses_post( apply_filters( 'woocommerce_reset_variations_link', '<button class="reset_variations"  aria-label="' . esc_html__( 'Clear options', 'woocommerce' ) . '">' . esc_html__( 'Clear', 'woocommerce' ) . '</button>' ) );
        
        if ( end( $attribute_keys ) === $attribute_name && ! empty($reset_variation_link)) : ?>
        <tr>
            <td colspan="2">
                <?php
                /**
                 * Filters the reset variation button.
                 *
                 * @since 2.5.0
                 *
                 * @param string  $button The reset variation button HTML.
                 */
                echo $reset_variation_link;
                ?>
            </td>
        </tr>
    <?php endif; ?>
    Plugin Support Zubair Zahid (woo-hc)

    (@doublezed2)

    Hello kimu,

    Thank you for contacting WooCommerce support.

    I understand your point of view.
    <span style=”box-sizing: border-box; margin: 0px; padding: 0px;”>As your suggestion involves code changes, please post it on the?WooCommerce GitHub.</span>
    <span style=”box-sizing: border-box; margin: 0px; padding: 0px;”>This way, our developers can review it and respond appropriately.</span>

    Please don’t hesitate to contact us again if you have more questions or concerns.

    Best regards.

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.