How to display two attribute selection side by side

Hi @vlohar08,

On my site that’s using the Storefront theme, I can achieve the same layout as in your sample by adding the following CSS:

.variations tr {
    display: inline-block;
}

The CSS goes to your Customizer → Additional CSS box.

* If this doesn’t work on your site, please share with us a link to one of your variable products pages to check further.

Thanks.

It’s working!
But there is no gap between the two columns like the example. And the last attribute dropdown is not displayed properly.
Image of my website – https://pasteboard.co/gbfWGvVi7q6J.png
Also, The Attribute Dropdown options are not displayed in two columns on mobile. See this image : https://ibb.co/b6ZPJLD

Theme – Shoptimizer

• This reply was modified 3 years, 5 months ago by Vishal Lohar.

Hi there,

Thanks for the screenshots.

Can you share a link to that page so that we can properly inspect the output?

Thanks!

Hi there,

We haven’t heard back from you in a while, so I’m going to mark this as resolved – we’ll be here if and/or when you are ready to continue.

This is the product link – Product

I’m not using any code right now as my site is live and the output of the given code was not perfect.

Hi there,

Please try the following CSS — it will make them display in columns, and make sure the heights and widths are the same:

div.product table.variations tr {
    min-height: 100px;
    display: inline-block;
}

div.product table.variations tr .value {
    width: 200px;
}

div.product table.variations tr:nth-of-type(1n) {
    margin-right: .4em;
}

As for the mobile view, it will display them side by side as long as there’s space on the screen to do so — once the screen is too small to display them, then it bumps them down to a new line:

Link to image: https://d.pr/i/fOvRcL

Thank You for the code!
I modified your code to get the best result. But still, long color, size, and other attribute name is a problem. Bcoz some part of the name will be cropped on mobile, but that’s ok for me.
Here is my CSS code:

@media only screen and (max-device-width: 600px)
  {
    div.product table.variations tr {
    min-height: 100px;
    display: inline-block;
}

div.product table.variations tr .value {
    width: 150px;
}

div.product table.variations tr:nth-of-type(1n) {
    margin-right: .4em;
}
}
@media only screen and (min-device-width: 800px)
  {
    div.product table.variations tr {
    min-height: 100px;
    display: inline-block;
}

div.product table.variations tr .value {
    width: 200px;
}

div.product table.variations tr:nth-of-type(1n) {
    margin-right: .4em;
}
}

I also added a snippet to change the Attribute selection label to “Select”. If anyone wants to do the same, you can use this code.

/* Change Woocommerce Default Value Text */
add_filter('gettext',  'choose_option');
add_filter('ngettext',  'choose_option');

function choose_option($translated) {
     $translated = str_ireplace('Choose an option',  'Select',  $translated);
     return $translated;
}

Result:https://ibb.co/MCqpQFg

Hi there @vlohar08!

I’m glad to hear you were able to tweak the code to get it working for you. Also, thank you for coming back to share your modified CSS, and your PHP snippet. Hopefully that helps someone else in the community as well.

I’m going to mark this thread as resolved. If you have any further questions, please start a new thread.

Have a wonderful day!