Code to format product variation dropdown

This topic has 14 replies, 2 voices, and was last updated 15 minutes ago by churchworks.

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts
October 3, 2024 at 6:41 pm #602318

churchworks
Participant

Hello, I’m trying out a plugin from Iconic called Woocommerce Linked Variations which creates a path to link single products together as if they were variations. Iconic promises “theme compatibility.” The plugin does seem to work well. However, the default formatting offered by the Woodmart theme is pretty bad. I’ve attached some screenshots. I’ve also added info to view the element live on our staging site.

Attachments:
You must be logged in to view attached files.

October 4, 2024 at 1:29 pm #602519
Aizaz Imtiaz Awan
Keymaster
Hello,

Add below Custom CSS code to Theme Settings > Custom CSS > Global custom CSS:
```
td.iconic-wlv-variations__label, td.iconic-wlv-variations__value {
    border-bottom: none !important;
}
.iconic-wlv-terms {
    margin: -20px 0 -10px;
    padding: 12px;
    width: 200px;
}
```
But you can use the linked variation feature without a plugin. This feature is available in the theme.
Please follow this guide:
https://xtemos.com/docs-topic/linked-variations/

Best Regards
October 4, 2024 at 6:36 pm #602614

churchworks
Participant

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.

Attachments:
You must be logged in to view attached files.

October 5, 2024 at 10:32 am #602691
Aizaz Imtiaz Awan
Keymaster
Hello,

Add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS.
```
span.iconic-wlv-variations__selection {
    display: none;
}
td.iconic-wlv-variations__label, td.iconic-wlv-variations__value {
    display: inline-block;
}
```
Best Regards
October 22, 2024 at 5:47 pm #606884

churchworks
Participant

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?

Attachments:
You must be logged in to view attached files.

October 23, 2024 at 9:01 am #606957

Aizaz Imtiaz Awan
Keymaster

Hello,

Can you please share the product page URL so I will check and give you a possible solution?

Best Regards

October 23, 2024 at 3:21 pm #607112

churchworks
Participant

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

October 24, 2024 at 11:44 am #607297
Aizaz Imtiaz Awan
Keymaster
Hello,

Add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS.
```
.variations td.iconic-wlv-variations__label, td.iconic-wlv-variations__value {
    display: inline !important;
}

table.variations {
    margin-bottom: 20px !important;
}
```
Best Regards
October 24, 2024 at 11:42 pm #607481

churchworks
Participant

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

Attachments:
You must be logged in to view attached files.

October 25, 2024 at 12:05 am #607483

churchworks
Participant

Another oddity on the variable product—there is extra space between “Format” and “:” (see attached screenshot).

Attachments:
You must be logged in to view attached files.

October 25, 2024 at 3:46 am #607494
churchworks
Participant
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;
}
```
October 25, 2024 at 10:38 am #607536
Aizaz Imtiaz Awan
Keymaster
Hello,

Add below Custom CSS code to Theme Settings > Custom CSS > Global custom CSS:
```
table.variations .label span {
    display: none;
}
 table.variations {
margin-top: 10px !important;
}
```
Best Regards
October 30, 2024 at 10:39 pm #608857

churchworks
Participant

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!

Attachments:
You must be logged in to view attached files.

October 31, 2024 at 11:15 am #608920

Aizaz Imtiaz Awan
Keymaster

Hello,

Can you please share the product page URL so I will check and give you a possible solution?

Best Regards

October 31, 2024 at 3:00 pm #609027

churchworks
Participant

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

Posts