Sidebar Ethos in woocommerce

Support
#1

Hi There,

I would like to make some changes in our webshop.

The URL is: iamlove.world
First i want to make the sidebar white and smaller. I tried the css aside.x-sidebar.left but this only includes the text and doesn’t change the bar itself.
second: is it also possible to have a category filter on mobile? it only sorts now on newest, price, popularity etc. but for customers it would be handy to skip to the right items.
and the last question: the product images in the cart are suddenly blurry, can i fix this with CSS?

Thanks in advance,
Joyce

#2

Hi There,

I’m stil stuck. Could you help me?

Thanks in advance!

Joyce

#3

Hi Support,

Could you please reply to my questions?

Hope you can give me some advise!

Thanks in advance

Joyce

#4

Please add the following CSS under Customizer > Custom > Global CSS:

.post-type-archive-product {
    background-color: #fff;

@media (min-width: 980px){
    .post-type-archive-product .x-main {
        width: 78%;
    }
    .post-type-archive-product .x-sidebar {
        width: 22%;
        color: #000
    }
    .post-type-archive-product.x-sidebar-content-active .x-container.main:before {
        left: 22%;
    }
}
.post-type-archive-product .x-sidebar .h-widget,
.post-type-archive-product .x-main .widget a, .x-sidebar .widget a {
    color: #000 !important;
}

The category filter is at the bottom of the product list on the mobile by default.

Try adding the following CSS also:

.woocommerce .cart.shop_table .product-thumbnail img {
    width: auto;
    height: auto;
}

Let us know how it goes!

#5

Hai Thai,

I tried the code for the sidebar but it did not make it smaller and when you click on a category it turns black again. Also there appear lines in the sidebar when it is white. Could you also include the text-color: black in the code?

Second: is it possible to get the category filter on top of the page instead of the bottom?

The last code you gave worked like a charm!

Thanks in advance

Joyce

#6

Sorry three more questions:

The tumbnails in a single product page. is it possible to place them underneath the featured image and not on top? On mobile devices it covers the compleet picture.

And also when ordering on a mobile the size and color have disappeared in the cart. You can’t see what you order.

Thanks!!

#7

Hi there,

Sorry, there was a typo error. Please change that CSS to this

.post-type-archive-product {
    background-color: #fff;
}
@media (min-width: 980px){
    .post-type-archive-product .x-main {
        width: 78%;
    }
    .post-type-archive-product .x-sidebar {
        width: 22%;
        color: #000
    }
    .post-type-archive-product.x-sidebar-content-active .x-container.main:before {
        left: 22%;
    }
}
.post-type-archive-product .x-sidebar .h-widget,
.post-type-archive-product .x-main .widget a, .x-sidebar .widget a {
    color: #000 !important;
}

For category sidebar, please add this CSS as well

@media ( max-width: 767px ) {
.post-type-archive-product .site > .x-container > .offset{
    display: flex;
    flex-direction: column;
}
.post-type-archive-product .x-main{
order: 2;
}
}

And it looks like you already fixed the thumbnails position :slight_smile:

About the color and size, you mean the product name? It’s the only field missing when I compared desktop and mobile view. You can display it with this CSS

@media (max-width: 767px) {
.woocommerce .cart.shop_table .product-name {
    display: block;
}
}

Thanks!

#8

Hi Rad!

Yes thanks a million! The only thing that is not solved are the gray stripes in the sidebar? Could i get rid of those?

Kind regards!

Joyce

#9

Sorry forgot to ask, is it also possible to get the productmenu on mobile as a filter like the excisting ones?

#10

Hi Joyce,

We can use browser developer tools to inspect element and adjust design. See this: https://screencast-o-matic.com/watch/cbX2hd2b50

.x-sidebar .widget ul li {
    border-top: none;
}

For the last question, I am not sure which product menu. Can you clarify? Better if you could give screenshot.

#11

Hi Lely,

Sorry for being not clear :slight_smile: If you look on mobile devices on our webshop you see first the product categories unfolded after that two filters sort bij newest and show 1-24 of 44 results. I would like to shorten the list by only showing the parent categories and if people click on a categorie it will unfold into subcategories.

Hope i explained it a little better :sweat_smile:

Thanks in advance

Joyce

#12

Hello Joyce,

Thank you for the clarifications. I can see that you are using the default WooCommerce Product Categories widget. Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization the default WooCommerce Product Categories widget. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

#13

Hi Ruenel,

I found a plug-in for the filter. After clicking a few items i see that the sidebar switches to a black color and not white. I think this has something to do with the code you gave me. How can i solve this?

Kind regards

Joyce

#14

Hi Joyce,

The code given will just change font color to black. That doesn’t change background color to black. The first even change background color to white. I have check your settings and the black background is coming from your Background Color settings:

It has white background on shop because of the following custom CSS:

.post-type-archive-product {
    background-color: #fff;
}

If you want it to be white sitewide, just remove that custom CSS then on Background Color option, choose white background.

Hope this helps.

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.