fbpx
Want To Add Extra Images Per Product Variation For Free? Download Now

Issue with selected attribute variation name beside title

Brad Christie

I need to change the layout for Variation Swatches so the title/label is above the options not to the left.

By adding </tr><tr> to a template override (Divi-child/woocommerce/single-product/add-to-cart/variable.php) I have been able to achieve the desired result. However even though I have ticked Show selected attribute, the selected attribute variation name does not show beside the title. If I remove the </tr><tr>, they show again.

Line 37 <tr>
Line 38 <th class="label"><label for="<?php echo esc_attr( sanitize_title( $attribute_name ) ); ?>"><?php echo wc_attribute_label( $attribute_name ); // WPCS: XSS ok. ?></label></th>
Line 39 </tr>
Line 40 <tr>
Line 41 <td class="value">

Thanks for the help.

Hakik Zaman

Hi Brad,

Thanks for reaching out to us. Could you please give us an exact link to check?

Hope to hear from you soon!

Thank You

Hakik Zaman

Hi Brad,

I need to change the layout for Variation Swatches so the title/label is above the options not to the left.

I think what you want can be achieved using CSS. You have no need to change the markup. Could you please revert your changes and give me an example of how you want them?

Hope to hear from you soon!

Thank You

Brad Christie

Hi Hakik

</tr><tr> removed.

I would like it from this (Hakik – images are not being saved, here is the image, just add png to the end) https://topgunmobility.com.au/wp-content/uploads/current-layout.

to this (Hakik – images are not being saved, here is the image, just add png to the end) https://topgunmobility.com.au/wp-content/uploads/layout.

https://topgunmobility.com.au/albatross/

This is the current html

<table class="variations" cellspacing="0">
<tbody>
<?php foreach ( $attributes as $attribute_name => $options ) : ?>
<tr>
<th class="label"><label for="<?php echo esc_attr( sanitize_title( $attribute_name ) ); ?>"><?php echo wc_attribute_label( $attribute_name ); // WPCS: XSS ok. ?></label></th>
<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>
</tr>
<?php endforeach; ?>
</tbody>
</table>

Hakik Zaman

Hi Brad,

Thanks for sharing the screenshots. You may use Lightshot App to share the screenshot links.

Just keep the markup as it is right now. Then paste the below CSS at Appearance > Customize > Additional CSS

#content-area .variations th {
   display: block;
}

Please let me know if it resolves your issue. Hope to hear from you soon!

Thank You