woocommerce cart-icon position

  • Resolved olelya

    (@olelya)


    8 years, 8 months ago

    Hello!

    I’m using Virtue with WooCommerce.

    After WooCommerce installation appeared cart-icon.
    On this forum I have already found css to remove the text “Your cart”.
    .kad-cart-total {
    position: relative;
    }
    .cart-contents {
    text-indent: -9999px;
    min-width: 10px;
    }
    .cart-contents .amount {
    text-indent: 0;
    position: absolute;
    right: 10px;
    }
    .cart-contents .amount:before {
    font-family: FontAwesome;
    font-weight: 400;
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;
    line-height: 1;
    text-transform: none;
    content: “\f07a”;
    padding-right: 10px;
    }

    What is the css to move the cart icon to the right side of the topbar? (In my case next to the social-widget? and to make the size bigger.
    And probably there is a way to change the icon of the cart to another one ?

    Thank you!

Viewing 6 replies - 1 through 6 (of 6 total)

  • You can go to Appearance> Theme Optoins> Top Bar Settings and enable the “Topbar Layout Switch.”

    Does that option work for you?

    Thread Starter olelya

    (@olelya)

    @kevin , now it looks like this:

    https://aleatelier.ru/

    the complete menu moved with the cart to the right side and the social widget is in the middle of the Topbar.

    It seams that the cart icon is a part of the menu.

    Are there any setting (css?) to make the menu as long as a Topbar ? that would help, because otherwise if I add more menu items the topbar becomes higher and the cart-icon moves lower.

    Hey,
    The topbar it split into two sections left and right. The menu is in the default left section along with the cart icon. You can make one section larger the the other so you could add more menu items.

    Or you can absolute position the cart but I don’t recommend this:

    @media (min-width: 992px){
ul.kad-cart-total {
    position: absolute;
    left: 30px;
    z-index: 100;
}
.kad-topbar-left {
    position: static;
}
#topbar > .container {
    position: relative;
}
}

    Kadence Themes

    Thread Starter olelya

    (@olelya)

    Thank you! For now I fixed the cart icon at the right side with the scrip you advised.

    Can I ask you please what is the way to make one section of the topbar larger the the other? I would do so to add the additional menu item.

    Thank you!

    hannah

    (@hannahritner)

    Hey Olelya,
    This css should work for you:

    @media (min-width: 992px) {
.col-md-6.col-sm-6.kad-topbar-left {
    width: 75%;
}
.col-md-6.col-sm-6.kad-topbar-right {
    width: 25%;
}
}

    Hannah

    Thread Starter olelya

    (@olelya)

    Thank you, @hannah!

    It works perfectly!)

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘woocommerce cart-icon position’ is closed to new replies.