Return to previous page

Colour changing option - by maia - on WordPress WooCommerce support

This topic has 15 replies, 3 voices, and was last updated 2 years, 11 months ago ago by Olga Barlow

maia

Participant

December 6, 2021 at 19:29

Hello, how to change colours of this elements(https://prnt.sc/221fzvu ): toggle box, text inside of toggle, lines, lines below filter headings and how to change space between filters

#311055 Copied Theme version: 8.0.11

14 Answers
Rose Tyler

Support staff

December 7, 2021 at 09:16
Hello,

Try to use the next custom CSS code:
```
.select2.select2-container--default .select2-selection--single, select,
.widget-title, .s_widgets-open-close .sidebar .sidebar-widget:not(.sidebar-slider)>.widget-title>span:after,
.etheme-product-status-filter a:before, .etheme_widget_brands_filter li a:before, .wc-layered-nav-rating a:before, .wc-layered-nav-term a:before {
    border-color: #555;
}
.sidebar-widget ul li a, .widget_product_categories.sidebar-widget ul li a {
    color: #555;
}
.sidebar-widget li.et_widget-show-more {
    color: red;
}
```
Regards
#311088 Copied
maia

Participant

December 8, 2021 at 10:42

Hi, thank you for reply. after adding css code on the mobile version, shop sidebar checkbox’s left border disappears (https://prnt.sc/22a94ef), also distance between opened toggles is big, is it possible to make it shorter (https://prnt.sc/22aa14f)? and on single product page “add to wishlist icon” and title is not inline how to fix it (https://prnt.sc/22aasd7)?

#311218 Copied
Olga Barlow

Support staff

December 8, 2021 at 12:15
Hello,

1) What mobile device do you use and what browser? Because I don’t see the mentioned issue https://prnt.sc/22angtp

2) Add the below code to Theme Options > Custom CSS
```
@media (min-width: 993px){
    .sidebar-slider, .sidebar-widget {
        margin-bottom: 20px;
    }
}
```
3) Add the below code to custom CSS
```
.single-compare a, .single-wishlist a {
    align-items: center;
}
```
Regards
#311235 Copied
maia

Participant

December 8, 2021 at 12:50

HI, i use samsung galaxy s8, google chrome and yandex browser and on both browsers is same issue. I also checked on other devices and it looks ok.

#311243 Copied

maia

Participant

December 8, 2021 at 13:05

https://prnt.sc/22aujye

#311244 Copied

Olga Barlow

Support staff

December 8, 2021 at 13:15

Hello,

I suppose it’s local problem of your phone that it hides 1 px of the left side of the blocks.

Regards

#311249 Copied

maia

Participant

December 9, 2021 at 13:02

Hello, i want to use different add to wishlist and added to wishlist icon, i did it from yith wishlist plugin, but now it shows two icons (https://prnt.sc/22gc54p) and on single product page icon is still the same (https://prnt.sc/22gc6go), how to make it correctly?

#311411 Copied

Olga Barlow

Support staff

December 9, 2021 at 14:54

Hello,

Provide us with working WP Dashboard access, please. We’ll check the problem in more detail.

Regards

#311434 Copied

maia

Participant

December 9, 2021 at 15:06

here

Please contact administrator
for this information.

#311439 Copied

Olga Barlow

Support staff

December 10, 2021 at 17:57

Hello,

Check now, please.

Regards

#311524 Copied

maia

Participant

December 10, 2021 at 18:43

Thank you, yes now it works
1) But icon is not on the center (https://prnt.sc/22mrs66).
2)also on main page same problem (https://prnt.sc/22ms3c9) and when i press add to wishlist button it does not shows full heart icon it does not shows anything (https://prnt.sc/22ms9jb).
3)i want to make on the single product page “add to wishlist button” full width like a “add to cart button” (https://prnt.sc/22mtpen).

#311540 Copied
Rose Tyler

Support staff

December 12, 2021 at 09:44
Hello,

1/ Add the next custom CSS code:
```
.footer-product .yith-wcwl-add-to-wishlist a.add_to_wishlist>img {
    margin-right: 0;
}
```
2/
```
.content-product .product-image-wrapper .footer-product .yith-wcwl-add-to-wishlist span.feedback {
    display: flex !important;
}
```
3/
```
.single-product .et-wishlist-holder .yith-wcwl-add-to-wishlist {
    width: 100% !important;
}
.single-product .et_product-block .single-wishlist .wishlist-fragment > div {
    width: 100%;
    text-align: center;
}
```
Regards
#311643 Copied
maia

Participant

December 12, 2021 at 15:08

Hi, thank you for help. one more question please, add to wishlist button on the single product page is clickable only on text and icon, how to make it like add to cart button?

#311673 Copied

Olga Barlow

Support staff

December 13, 2021 at 11:20

Hello,

We are able to make the link for whole the button for the “Add to wishlist” but it’s not possible to add link for the whole button of the “Browse wishlist” because of the HTML structure that the Browse wishlist link has. Check Add to wishlist now, please.

Regards

#311720 Copied
Tagged: colour changing, customizable, customization, option, templates, woocommerce, wordpress
Viewing 15 results - 1 through 15 (of 15 total)