Archived topic
Help styling disabled buttons
3 replies · Started by Tim on September 21, 2021
Hi,
Take a look at this product page. It is designed using Elementor and a Single Product template.
When a color is selected in the dropdown menu (defaults to red when loading the page) the buttons are active and styled using this CSS:
selector .single_add_to_cart_button {
border-radius: 4px !important;
width: 100%;
height: 53px;
font-weight: 400;
font-size: 12px !important;
}
.elementor-add-to-cart .cart {
display: block!important;
}
selector .vipps-logo {
height: 14px !important;
width: 55px !important;
padding-left: 2px;
}
selector .vippsbuynow {
font-weight: 400;
font-size: 12px;
}
selector .vipps-buy-now {
border-radius: 4px;
width: 100%;
height: 53px;
margin-top: 10px;
display: inline-flex;
justify-content: center;
align-items: center;
}
selector a {
background-color: #fe5b24;
}
selector a:hover {
background-color: #fe5b24 !important;
}
However, if choosing the top dropdown item ("Choose color" in English), the buttons are deactivated (like they should be) but the styling and position gets totally messed up.
How can I apply the same look to the buttons? The reduced opacity is okay, but the colors and size/positioning is not.
The CSS is added through the Elementor template (hence the "selector" before the code) but other than that I don't think the problem has to do with Elementor itself?
Hi there,
you will need to address those issues with Elementor.
By default GP leaves the templates to the Woocommerce plugin. But as you have created the page with Elementor it will be there code that is responsible for its behaviour.
I see. Well, I found this snippet online to remove the top item from the dropdown as I don't need it there, so there is no need to style the buttons! :)
add_filter( 'woocommerce_dropdown_variation_attribute_options_html', 'filter_dropdown_option_html', 12, 2 );
function filter_dropdown_option_html( $html, $args ) {
$show_option_none_text = $args['show_option_none'] ? $args['show_option_none'] : __( 'Choose an option', 'woocommerce' );
$show_option_none_html = '<option value="">' . esc_html( $show_option_none_text ) . '</option>';
$html = str_replace($show_option_none_html, '', $html);
return $html;
}Glad to hear you found a solution! and thanks for sharing
