Reduce drop down size

Resolved soupboy
(@soupboy)

5 months ago

hi there,

love this plugin, just hoping to make the drop down match the variation directly above it. Is it also possible to move it above the $ value so it looks like a normal variation?

thanks!

The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

Plugin Support

rzepsen

(@rzepsen)

5 months ago

Hi @soupboy

Thank you for contacting us. To modify the select field, you need to target the appropriate selector.

Below is the recommended CSS code:

.fpf-input-field {
    max-width: 100%;
    min-width: 75%;
    display: inline-block;
    margin-right: 1em;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 3em;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hldnJvbi1kb3duIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=) no-repeat;
    background-size: 16px;
    -webkit-background-size: 16px;
    background-position: calc(100% - 12px) 50%;
    -webkit-background-position: calc(100% - 12px) 50%;
}

If you would like to move the select field above the price, this can be achieved using a different snippet. Please note, however, that this will also move the Add to cart button and the quantity field. In this case, please use the following code.

.single_variation_wrap {
    display: flex;
    flex-direction: column;
}

.single_variation_wrap .single_variation {
    order: 1;
}

Plugin Support

Tags