WooCommerce variation swatches - Support | Kriesi.at

Hi Andrea,

Please try the following in Quick CSS under Enfold->General Styling:

li.woo-variation-items-wrapper {
    width: 100% !important;
}

Best regards,
Rikard

July 20, 2022 at 11:07 pm #1358966

This reply has been marked as private.

July 21, 2022 at 11:16 am #1358997

Hi,

Thanks for the update. I’m not that I understand your last post, did you get that after adding the CSS I posted? If so, then that should not happen when adding CSS to for example Quick CSS. Where exactly did you add it? Please try adding it to Quick CSS under General Styling in the Enfold menu.

Best regards,
Rikard

July 21, 2022 at 11:51 am #1359008

HI Rikard,

yes, I get that after adding the CSS you posted also I was obliged to cancel it in order to resume the normal behavior of the website.

Now I added the following code obviously in the Quick CSS:
.woo-variation-swatches .variable-items-wrapper {
flex-wrap: nowrap;
justify-content: flex-start;
}

After this there were some improvements because now the color and size buttons are in the same row as desired, but nothing is centered unfortunately, they remain left justified. I hope this can be solved either.

Best regards
Andrea

July 21, 2022 at 1:57 pm #1359026

Hi,

Please see screenshot for what I’m seeing on my end, it looks centered on my end. What else are you looking to change?

Best regards,
Rikard

July 21, 2022 at 2:57 pm #1359034

Yes Rikard,

I added the following CSS:
.woo-variation-swatches ul.variations {
align-items: center;
}

After that now color and size buttons are in the same row and centered as desired.

Please can I obtain the same result for product name and price?

Thanks for your help
Andrea

July 21, 2022 at 7:07 pm #1359056

Hi,

Please try this CSS as well:

div.inner_product_header_cell {
  text-align: center; 
}

Best regards,
Rikard

July 22, 2022 at 11:11 am #1359159

Very well Rikard

now it si OK! The only problem left is the background color of the buttons “add to cart” and “select options” that are not very visible actually. I would like to change the background color in normal situation with #2d5c88 and on hover using a different color.

After solving this you can close the ticket successfully.
Have a nice day

best regards
Andrea

This reply was modified 2 years, 4 months ago by cuccarini.

July 22, 2022 at 12:38 pm #1359183

Hi,

I see what looks to be custom CSS added already to those buttons, but you should be able to adjust the opacity and hover colour using this CSS:

.avia_cart_buttons {
    opacity: 1;
}

.avia_cart_buttons:hover a {
    background-color: red;
}

Best regards,
Rikard

July 22, 2022 at 1:46 pm #1359190

Thanks a lot Rikard,

the buttons are now visible and “on hover” effect is OK per add to cart button.
Only the select options button do not change color “on hover”, I would like to have the same behavior “on hover” of add to cart button.
After solving this you can close the ticket.

Thanks in advance for your cooperation.
Andrea

This reply was modified 2 years, 4 months ago by cuccarini.

July 22, 2022 at 5:57 pm #1359209

Hi,

This CSS seems to be overriding the other buttons:

#top #wrap_all .single_button .button, #top #wrap_all .shop_columns_5 .avia_cart_buttons .button {
    color: #ffffff!important;
    border-color: #062857!important;
    border-radius: 160px!important;
    border-width: 1px!important;
    padding: 15px;
    font-size: 16px!important;
    font-weight: bold!important;
    background-color: #084a79!important;
}

I’m not sure exactly where that is added, but if you could try to remove the !important part, then the CSS I posted should likely apply after that.

Best regards,
Rikard

July 23, 2022 at 12:07 am #1359251