Please submit a private ticket if you need to share sensitive information, such as license details and admin credentials.

Okay
  Public Ticket #3717622
Styling WooCommerce variation dropdown - Inconsistent results
Open

Comments

  •  1
    Andrius started the conversation
    September 4, 2024 at 7:21am

    Hello,

    I'm struggling to style the WooCommerce variation dropdown. Some changes work in the browser inspector, but none persist when added to my theme's style.css file. I've attached an image of the current dropdown.

    I need to:

    1. Hide the variation label text
    2. Make the dropdown box wider
    3. Move the dropdown selector arrow to the right
    4. Hide the "Choose" text before variation names

    I've cleared cache and confirmed my CSS is loading.

    Could you please advise on:

    1. The best approach to style these elements
    2. Any known conflicts with custom CSS
    3. Recommended hooks or filters if CSS isn't sufficient

    Thank you for your assistance.

    Attached files:  IMG_5355.jpg

  •  1,222
    Dustin replied
    September 5, 2024 at 7:52am

    Hi Andrius,

    Please provide me with a product bundle link so I can check and give you the exact CSS code.

    Best regards,
    Dustin

  •   Andrius replied privately
  •  1,222
    Dustin replied
    September 9, 2024 at 8:39am

    Please add below CSS code to WP-Admin → Appearance → Customize → Additional CSS:

    .woosb-products .woosb-product .variations_form .variations .variation .label {
    display: none !important;
}
.woosb-products .woosb-product .variations_form .variations .variation select {
    padding: 10px 20px 10px 10px !important;
    background-position: right -15px center !important;
}

    And the result:

    7066074738.png

    To change or remove the "Choose" text, please use this option:

    5093570609.png

    You can fill in "%s" without "Choose".

    Best regards,
    Dustin

  •  1
    Andrius replied
    September 23, 2024 at 4:10am

    Thank you so much!