Woocommerce Cart Tab

Support
#1

Hello. I am using the X theme with a plugin called woocommerce cart tab. It adds a beautiful cart tab sitewide. The problem is, the background of the image is white, while my entire site is dark. Here is a picture. Any idea how to fix it?

www.hsa.hr

#2

Hi There @Lomtatidze

Thanks for writing in! Upon checking your site, it seems that you have enabled under construction mode. Could you please disable it temporarily, so that we can check your issue and assist you with a possible workaround.

Thanks!

#3

Hello. I have disabled the under construction mode. You can enter the site now.

#4

Hi @Lomtatidze,

I believe that CSS could help you change its background or if it is image of the background, you need to change the image.

Upon checking your setup, I could not see any cart tab. Would you mind sharing its URL and a screenshot so we could find it easily.

Thanks.

#5

Hello. You need to go to the www.hsa.hr/trgovina and add something to the cart for it to appear. Once you do that you will see the image appear with a white background.

Do you have the CSS code I could use for this?

The screenshot is in my first post. Upper right corner of the picture you can see a black cart with a white background image.

#6

Hi,

Is this the image you are referring to ?

You can change the background to black, by adding the code below in Theme Options > CSS


.woocommerce-cart-tab-container .widget_shopping_cart ul.product_list_widget li {
   background:#000;
   padding:20px;
   color:#fff;
}

.woocommerce-cart-tab-container .widget_shopping_cart ul.product_list_widget li a {
   color:#fff;
}

Hope that helps.

#7

No, it’s this one. I want the background to be see through so whenever I change the slider image, the cart automatically adjusts to that.

#8

Hi,

In that case, please change the css code I provided with this.

.woocommerce-cart-tab-container--right .woocommerce-cart-tab {
   background-color: rgba(0,0,0,0.5);
   color:#000;
}

.woocommerce-cart-tab__icon-bag {
    fill: #ffff;
}

.woocommerce-cart-tab__contents {
    background-color: #fff;
}

Hope this helps.

#9

Great, this worked. However, now when I am on th ehome screen, something with the cart is messed up and it looks different than when I am on any other page.

Please see:

This is how it looks normally on most pages:

This is how it looks messed up on the home screen:

#10

Hi,

To fix it, you can add this in Theme Options > CSS

body .widget_shopping_cart ul li a {
   font-size:16px;
}

body .widget_shopping_cart .quantity {
   font-size: 14px;
}

For future reference, I was able to came up with these css code with the help of chrome inspect element.


Hope this helps

#11

Thank you very much.

#12

Glad we were able to help :slight_smile:

If you have further questions, make sure to open a new thread.

Thanks!

1 Like
#13

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