Home › Forums › WoodMart support forum › Theme update may have broken custom CSS related to linked variations

Theme update may have broken custom CSS related to linked variations

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • March 26, 2025 at 5:57 pm #649251

    churchworks
    Participant

    Hello, you all helped me with some custom CSS (in this topic: https://xtemos.com/forums/topic/code-to-format-product-variation-dropdown/) to format the dropdown linked variations menu.

    I just noticed that some of this CSS no longer functions as expected. I’ve tried disabling all plugins (except those needed for Woodmart to function). The problem still persists. I’m guessing now that a Woodmart theme update may be to blame.

    Here is a portion of the CSS that seems to have some unresponsive elements:

    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
}

    The “display: inline” tag doesn’t seem to work, nor does the “width” of the dropdown, nor the “color” of the dropdown text. (See attached screen shot)

    Can you help me update this CSS?
    OR…can you help me roll back the theme by several versions to find out which theme update may have broken this CSS? (I’m not exactly sure when the CSS broke, but I know it was working correctly on November 3, 2024.)

    Thanks!

    Attachments:
    You must be logged in to view attached files.
    March 27, 2025 at 10:48 am #649440

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Please try to use the below custom CSS code and paste it to Theme Settings >> Custom CSS >> Global CSS section. Change the value as per your requirements.

    .single-product .variations td.iconic-wlv-variations__label,
.variations td.iconic-wlv-variations__value {
    border-bottom: none !important;
    display: table-cell !important; /* Changed from inline for better structure */
    vertical-align: middle;
    padding: 5px 10px;
    color: #282A2D !important;
}
    .single-product.iconic-wlv-terms {
    margin: -20px -5px -15px !important;
    padding: 12px;
    width: auto; /* Let it size naturally, or use min-width */
    min-width: 140px;
    color: #5d5d5d !important;
}

    Best Regards,

    March 27, 2025 at 2:15 pm #649554

    churchworks
    Participant

    Hi, thank you for the code. Unfortunately, there are still issues (see screenshot).

    No matter what I try, I can’t seem to get the label (“Format”) aligned to the left with other text, and I can’t close the gap between the label and the dropdown menu.
    The “display: table-cell” parameter seems to block this and all adjustments I try to make to margin and padding.
    When I remove “display: table-cell” the menu drops down under the label, but then margin and padding adjustments work.

    Attachments:
    You must be logged in to view attached files.
    March 27, 2025 at 4:41 pm #649620

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    To better align the label (“Format”) with the rest of your content and close the gap between the label and the dropdown, I recommend switching to a flexbox approach instead of table-cell. Try to use the below code.

    td.iconic-wlv-variations__label,
td.iconic-wlv-variations__value {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 0 !important;
    margin: 0 !important;
    }

    Best Regards,

    March 27, 2025 at 5:51 pm #649656

    churchworks
    Participant

    Hello, thanks for the code. It did help the “Format” label.

    However, the dropdown is not inline with the label, and it is not responsive to width adjustments. (screen shot)

    Here is the code behind the attached screen shot:

    td.iconic-wlv-variations__label, td.iconic-wlv-variations__value {
   border-bottom: none !important;
   display: flex !important;
   align-items: center;
   gap: 10px;
   padding: 0 !important;
   margin: 0 !important;
}
.iconic-wlv-terms {
   width: auto;
   color: #5d5d5d !important;
}
    Attachments:
    You must be logged in to view attached files.
    March 27, 2025 at 5:53 pm #649659

    churchworks
    Participant

    Update: I was able to adjust the width of the dropdown by adding the !important tag. But how do I align the dropdown menu with the label?

    March 28, 2025 at 8:51 am #649758

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Please try to use the below custom CSS code and paste it to Theme Settings >> Custom CSS >> Global CSS section. Change the value as per your requirements.

    td.iconic-wlv-variations__label, 
td.iconic-wlv-variations__value {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 0 !important;
    margin: 0 !important;
}
    td.iconic-wlv-variations__value .iconic-wlv-terms {
    width: 100% !important;
    max-width: 250px; /* Adjust this value as needed */
    color: #5d5d5d !important;
    flex: 1;
}

    Best Regards,

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)