New Landing How can we help? Atelier Styling variable product option boxes?

Viewing 7 posts - 1 through 7 (of 7 total)
  • Posted in: Atelier
  • #296529
    alxndrdvl
    Member
    Post count: 18

    Hello there,

    I must be stupid but I’ve been looking into the Color Customizer for like 1 hour and I cannot find where to change the style of my select boxes on my product page. Where do I find it? Or do I have to add custom CSS code?

    Right now it’s white on white, with the same font size/color/weight so you barely see that you’re supposed to select options.
    Basically I want to highlight them with a different bg color, as I did for my custom options (e.g “Choose a Size” on the attached screenshot) using the UI elements section of the Color Customizer.

    Also, I see there’s a padding around those boxes, and I’d like to decrease it so it looks harmonized with my custom options underneath? What CSS custom style should I add?

    Thank you !

    Alex

    Attachments:
    You must be logged in to view attached files.
    #296873
    David Martin – Support
    Moderator
    Post count: 20834

    Hi Alex,

    The 3rd party plugin you are using is not using our custom styles, so you will need to use CSS.

    For standard WooCommerce variations, the colors are set via the Color Customizer => Color – Page

    Border = Section Divider Color.

    Background = Inner Page Background Color.

    To bring the extra option fields from the plugin into the same style as the theme you can test adding these to Theme Options => Custom CSS

    .tm-epo-field.tmcp-select {
        background-color: transparent;
        padding: 10px 55px 10px 20px;
        margin: 0 0 15px;
        height: 58px;
    }
    .tm-extra-product-options .tm-extra-product-options-container, 
    .tm-extra-product-options .tmcp-ul-wrap {
        margin-top: -20px;
    }
    #296916
    alxndrdvl
    Member
    Post count: 18

    Hi and thank you for CSS ! It’s almost working, except for the left part of the custom option select box that’s a bit uneven. But much better.

    I had to get rid off this part :
    .tm-extra-product-options .tm-extra-product-options-container,
    .tm-extra-product-options .tmcp-ul-wrap {
    margin-top: -20px;
    }

    As it is causing all the extra options to overlap each other.

    As for styling the regular product variations, I went to change this setting ‘Background = Inner Page Background Color’ but it doesn’t just change the background color of the select boxes, it just changes the background of the entire page :/ (see screenshot)
    So there’s no way to just change the bg of the boxes while keeping the page’s bg white?

    Thanks !

    Attachments:
    You must be logged in to view attached files.
    #297389
    David Martin – Support
    Moderator
    Post count: 20834

    To explicitly set the background color for those, please add this to Theme Options => Custom CSS:

    .woocommerce div.product form.cart .variations select {
        background-color: red!important;
    }
    #297510
    alxndrdvl
    Member
    Post count: 18

    Thank you !!

    #297512
    alxndrdvl
    Member
    Post count: 18

    sorry, forgot to mark this as Resolved 😉

    #297514
    David Martin – Support
    Moderator
    Post count: 20834

    Happy to help!

    – David.

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

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register