[ItwebdevelopmentParticipant]

Hi, I’d like to change my woo commerence product options

https://gyazo.com/e5b076fc5b05245d87c7d4cb3a433435

That are shown above to be:

“Signup For A Free Month Of Updated Parts?”

Placed above the drop down on mobile.

Can someone help me do this?

Here is a link to the site:

https://www.dzdrones.com/product/carbon-fiber-dz-drone-with-goggles-and-remote/

Thanks!!

[LelyModerator]

Hi There,

Thank you for the complete information.
Upon checking, by default woocommerce are using tables instead div to display variables. Tables is not responsive and will not stack up on top of each other by default.
Copy variable.php from this folder: \wp-content\plugins\woocommerce\templates\single-product\add-to-cart to your child theme here: \wp-content\themes\x-child\woocommerce\single-product\add-to-cart. If the folder doesn’t exist, create it. Open the copied file.
Look for this part(starts from line 38):

						<td class="label"><label for="<?php echo sanitize_title( $attribute_name ); ?>"><?php echo wc_attribute_label( $attribute_name ); ?></label></td>
						<td class="value">
							<?php
								$selected = isset( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ? wc_clean( urldecode( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ) : $product->get_variation_default_attribute( $attribute_name );
								wc_dropdown_variation_attribute_options( array( 'options' => $options, 'attribute' => $attribute_name, 'product' => $product, 'selected' => $selected ) );
								echo end( $attribute_keys ) === $attribute_name ? apply_filters( 'woocommerce_reset_variations_link', '<a class="reset_variations" href="#">' . __( 'Clear', 'woocommerce' ) . '</a>' ) : '';
							?>
						</td>

Update to this:

						<td >
						   <div class="label"><label for="<?php echo sanitize_title( $attribute_name ); ?>"><?php echo wc_attribute_label( $attribute_name ); ?></label></div>
						   <div class="value">
							<?php
								$selected = isset( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ? wc_clean( urldecode( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ) : $product->get_variation_default_attribute( $attribute_name );
								wc_dropdown_variation_attribute_options( array( 'options' => $options, 'attribute' => $attribute_name, 'product' => $product, 'selected' => $selected ) );
								echo end( $attribute_keys ) === $attribute_name ? apply_filters( 'woocommerce_reset_variations_link', '<a class="reset_variations" href="#">' . __( 'Clear', 'woocommerce' ) . '</a>' ) : '';
							?>
						   </div>
						 </td>

Then add this CSS too on Appearance > Customize > Custom > Edit Global CSS:

@media (min-width:768px){

    .woocommerce div.product .summary .variations .label,
    .woocommerce div.product .summary .variations .value{
        display:inline-block;
        width:50%;
        float:left;
    }
}

Hope this helps.

[ItwebdevelopmentParticipant]

That looks crazy cool. But I need them to be on top of each other for mobile. It still has them side by side.

I want it to be:

Signup For A Free Month Of Updated Parts?

And have the drop down box here below it

when it’s on mobile.

Maybe I did something wrong.

Thanks!!

-Neil

[LelyModerator]

Hello Neil,

Would you mind providing us with login credentials so we can take a closer look so we check the code you have added? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[ItwebdevelopmentParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Please change the above CSS to this

    .woocommerce div.product .summary .variations .label,
    .woocommerce div.product .summary .variations .value{
        display:block;
        width:100%;
        float:none;
    }
@media (min-width:768px){

    .woocommerce div.product .summary .variations .label,
    .woocommerce div.product .summary .variations .value{
        display:inline-block;
        width:50%;
        float:left;
    }
}

Cheers!

[Author]

Posts