Return to previous page

How to change the style of the filters section on the shop page

This topic has 4 replies, 2 voices, and was last updated 4 years, 6 months ago ago by Olga Barlow

  • Avatar: teolivier
    teolivier
    Participant
    November 23, 2020 at 12:22

    How can we edit/change the background image/colour, text colour? Can we add divider lines above and below this section to separate it from the rest of the page?

    Please, contact administrator
    for this information.
    #260810 Copied Theme version: 7.1.2 WooCommerce version: 5.5.3
    3 Answers
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    November 23, 2020 at 19:05

    Hello,

    Tell me what bg color or bg image do you want to use there? What text color and input color should be there? And we’ll provide you custom code to implement that.

    Regards

    #260901 Copied
    Avatar: teolivier
    teolivier
    Participant
    November 25, 2020 at 11:41

    For background the same grey as that in our footer #212121
    All text can be white (also the dropdown menu text and the price filter text
    The background of the dropdown menu boxes can be transparent (or the same color as grey background).
    The colors of the color swatches should all stay the same (do not change).

    Thanks

    #261198 Copied
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    November 25, 2020 at 19:22

    Hello,

    Add the following code to Theme Options > Custom CSS

    .shop-filters, .filter-wrap, .term-description {
    background-color: #212121;
    padding: 15px;
}
.shop-filters {
    margin-top: 0;
    margin-bottom: 15px;
}

.filter-wrap, .term-description {
    margin-bottom: 0;
}
.term-description {
    margin: 0 15px;
}
.shop-filters .widget-title {
    border-color:#393939;
}
.select2-container--default .select2-selection--single, [data-mode="dark"] .select2.select2-container--default .select2-selection--single, .select2-search.select2-search--dropdown input[type="text"] {
    background-color: #212121;
}
@media only screen and (min-width:992px){
.term-description {
    margin: 0 45px;
}
}

    Regards

    #261265 Copied
  • Viewing 4 results - 1 through 4 (of 4 total)

The issue related to '‘How to change the style of the filters section on the shop page’' has been successfully resolved, and the topic is now closed for further responses

Recent Community Activity

Helpful Topics

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Gaming – WooCommerce Theme
lazy-placeholder
Medical 02 – WordPress WooCommerce Theme
lazy-placeholder
Church – WordPress Theme
lazy-placeholder
WooPress Fullwidth
lazy-placeholder
Architecture Studio – WordPress WooCommerce Theme
lazy-placeholder
Perfume – WordPress WooCommerce Theme
lazy-placeholder
Zoo Shop – WooCommerce Theme
lazy-placeholder
SEO Agency – WordPress WooCommerce Theme
lazy-placeholder
Luxury Jewelry Store – WordPress WooCommerce Theme
lazy-placeholder
Hemp & CDB – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.