Code to format product variation dropdown

Thank you, this looks much better! The format is unfortunately shown twice (see attached screenshot)—next to the “Format:” label and again in the dropdown menu (see attached screenshot). Is it possible to move the dropdown picker up next to the “Format:” label?

I did try the theme’s built-in Linked Variations, but I don’t particularly like the formatting options. If Woodmart also had the option to display linked variations as a dropdown menu, I would certainly consider that.

Thank you! So far the code works great for simple products. When I added a variable product to the dropdown list, the formatting broke (see attached screenshot). Is there an adjustment to the code that would keep the “Format” dropdown inline for variable products as well?

Yes, I’m trying this out on our staging site. URL and credentials shared privately below.

We’re so close! Just one more adjustment needed to remove the duplicate format label (see attached). Thanks!

I’ve been adjusting the CSS to get the Iconic dropdown menu looking just how I want. But I’m utterly baffled at why it behaves differently for Variable products. The only thing I can think of is that if Iconic built the plugin specifically for Simple products, there may be something in the plugin code preventing the plugin from displaying properly on Variable products.

If you guys can find a solution (or perhaps a way to separate the CSS that’s applied to Simple vs. Variable products), that would be exciting! But if the solution goes beyond the scope of theme support, I’d understand.

Here is my modified CSS…which looks great on the Simple products I’m testing:

td.iconic-wlv-variations__label, td.iconic-wlv-variations__value {
    border-bottom: none !important;
    display: inline block;
    margin-left: -12px;
    color: #282A2D;
}
span.iconic-wlv-variations__colon {
    padding-left: 2px;
    font-weight: bold;
}
.iconic-wlv-terms {
    margin: -20px -10px -15px;
    padding: 12px;
    width: 120px;
}

span.iconic-wlv-variations__selection {
    display: none;
}

.variations td.iconic-wlv-variations__label, td.iconic-wlv-variations__value {
    display: inline !important;
    color: #282A2D !important;
}
.variations td.iconic-wlv-variations__selection {
    display: none;
}
table.variations {
    margin-top: 30px;
    margin-bottom: 30px !important;
}

Hello, thank you for the code. It helped me reach a passable level of formatting for the plugin.

At last, I am trying to add space below (and above) the Iconic plugin dropdown, but only for simple products. I can’t seem to figure out the CSS to do so (see screenshot). Any ideas would be appreciated. Thanks!

Yes, please see url and login credentials in private content.

Thank you again for the code. This did the trick! I’m happy with how it looks.

In case anyone else goes looking for this, here is the CSS I used to format the Iconic Linked Variations dropdown within the Woodmart theme—particularly getting it to match the theme’s product variations dropdown:

td.iconic-wlv-variations__label, td.iconic-wlv-variations__value {
    border-bottom: none !important;
    display: inline !important;
    margin-left: -12px;
    color: #282A2D;
}
.iconic-wlv-terms {
    margin: -20px -5px -15px;
    padding: 12px;
    width: 140px;
    color: #5d5d5d
}
.variations td.iconic-wlv-variations__label, td.iconic-wlv-variations__value {
    color: #282A2D !important;
}
table.variations .label span {
    display: none;
}
table.variations {
    margin-top: 28px !important;
}
.single-product .product-type-simple .variations {
    margin-top: 35px !important;
    margin-bottom: 35px !important;
}

Note: This bit of necessary code (from above) removes the colon (:) from the dropdown label (product attribute), which looks odd, so I just added a colon to the attribute name (not ideal, but it works):

table.variations .label span {
    display: none;
}

Well, I’m back. This time, I need to adjust space around the dropdown for External/Affiliate products. (screenshot attached; product link in private content) Thanks!

Hi, that bit of code was not the solution I need, but I figured it out (using .product-type-external)!

HOWEVER, I have another request: when one or more products are External/Affiliate products, they show up in the linked variations dropdown as “Unavailable” (see attached screenshot). Is there a way to hide the “Available/Unavailable” product labels in this dropdown?

No problem. Thanks for all the help!