CODEWITHSUNDEEP
htmlcsswordpresswoocommerce
Foxtrot
Foxtrot

Reputation: 67

Align Label To Middle Off Drop Down Selector Box - Woocommerce

Thank you for taking the time to read this. I have tried everything to get the "size label" on my woocommerce product page, https://www.teamkodered.com/shop/adidas-speed-50-boxing-gloves, to line up with the drop down selector box to its right, as the colour label correctly does. See screenshot for clear illustration.

I put in CSS code that worked for the colour label, but just can't get the size label to align the same. Am at my wits end! :) The custom code I added and in place is below.

.woocommerce div.product form.cart .variations td, .woocommerce div.product form.cart .variations th {
    vertical-align: middle;
}

label {
    font-size: 1.3rem;
    color: #ccd0d1;
        padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}

td, th {
    padding: 0px 0px 0px 0px;
  vertical-align: middle !important;
}

td.value {
    vertical-align: middle !important;
}

Upvotes: 2

Views: 828

Answers (1)

Bhautik
Bhautik

Reputation: 11282

It's not aligned middle because of the clear button beside the select option that's why that element creating extra height.

You can do this in two way one is CSS and the Second is JavaScript

By CSS you can give this CSS position: absolute; to the clear button

CSS

.woocommerce div.product form.cart .reset_variations{position: absolute;}
.single_variation_wrap{margin-top: 25px;display: inline-block;}

By javascript, you can remove that element from beside select and append new tr inside table and move an element in that td. Try the below code. code will go active theme function.php file.

JavaScript

function add_custom_js(){
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function(){
        var reset_variations = jQuery('.variations').find('.reset_variations')[0].outerHTML;
        jQuery('.variations').find('.reset_variations').remove();
        jQuery('.variations tbody').append('<tr><td class="label"></td><td class="value">'+reset_variations+'</td></tr>');
        jQuery('.variations select').on('change',function(){
            var show = false;
            jQuery('.variations select').each(function(){
                if( jQuery(this).val() != '' ){
                    show = true;
                    return false;
                }
            });
            if( show ){
                jQuery('.reset_variations').css( 'visibility', 'visible' ).hide().fadeIn();
            }else{
                jQuery('.reset_variations').css( 'visibility', 'hidden' );
            }
        });
    });
    </script>
    <?php 
}

add_action( 'wp_footer', 'add_custom_js', 10, 1 );

Tested and works

enter image description here

Upvotes: 1

Related Questions