CSS Shopping Cart Customization

  • Resolved diegoarbelaezco

    (@diegoarbelaezco)


    5 years, 6 months ago

    Hello,

    I’m trying to customize the shopping cart box that appears in the homepage of my site. I have made the inspection with my browser inspector tool and I have found that the box name is: .cart-contents{}

    I have added the following code to the additional CSS section in Storefront CSS editor:

    .cart-contents{
    padding-top: 10px;
    padding-bottom: 0em;
    }

    However seems it is not being accepted or read, because it has not effect over the site.

    Please let me know how to customize it

    The real fact is that I need to align the Shopping Cart box with a menu.

    I really appreciatte your help

    website: [ redundant link removed ]

    The page I need help with: [log in to see the link]

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

  • Prueba poner !important detrás de cada instrucción.
    Yo lo he probado en Apariencia –> Personalizar –> CSS adicional y FUNCIONA!

    .cart-contents{
    padding-top: 10px!important;
    padding-bottom: 0em!important;
    }

    Saludos.

    RK a11n

    (@riaanknoetze)

    Hi there,

    The reason your code isn’t working is that the selectors aren’t specific enough and are therefore being overridden by the default Storefront styles. That means that you can either use !important as outlined above, or you can use the following code under **Appearance > Customize > Additional CSS** :

    
body .site-header-cart .cart-contents {
  padding-top: 10px;
  padding-bottom: 0em;
}
    Thread Starter diegoarbelaezco

    (@diegoarbelaezco)

    Rian!

    I really appreciate your help. It solved the problem.

    Thanks!

    Diego A.

    Thread Starter diegoarbelaezco

    (@diegoarbelaezco)

    @clyon Gracias! también tu manera funcionó! Slds

    DE nada! Saludos.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘CSS Shopping Cart Customization’ is closed to new replies.