Horizontal outline for the Variable products on Mobile view

Hi,

On the product pages I would like to outline the product variables or swatches horizontal instead of vertical and place them right below the variable title. (see image)

Is there a way to do this?

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > in all the devices

.variations_form .variations tr {
        display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    margin-bottom: 10px;
}
.variations_form .variations tr:last-child {
    margin-bottom: 0;
}
body .variations_form .variations td {
    padding-bottom: 0;
    margin-bottom: 10px;
}

Best Regards

Perfect! thank you 🙂

I also would like to change the size of the Swatch/Variable titles (see image)
Any idea how to do this?

Attachments:

You must be logged in to view attached files.

Hello,

Add this code to the Theme Settings > Custom CSS > Global:

.variations_form .variations label {
    font-size:18px;
}

Set the font-size as per your needs.

Best Regards

thanks again!

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts