Cambiar estilo cesta por carrito en el header

  • marurbgil

    (@marurbgil)


    2 years, 10 months ago

    Buenas tardes,

    Estoy creando mi header con oceanwp y elementor, el caso es que al poner el [oceanwp_woo_cart] Shortcode, solo me sale la opción de poner el estilo “bolsa de compra” y yo querria cambiar el icono al de “carrito/basket”. ¿Existe alguna manera de elegir entre los dos iconos?

    Puede que este topic esté solucionado pero yo no lo he encontrado al buscar en el foro,

    Gracias de antemano,

    English below:

    Good afternoon,

I am creating my header with oceanwp and elementor, the thing is that when I put the [oceanwp_woo_cart] Shortcode, I only get the option to put the style "shopping bag" and I would like to change the icon to "cart/basket". Is there any way to choose between the two icons? 

Maybe this topic is solved but I have not found it when searching in the forum,

Thanks in advance,
Viewing 8 replies - 1 through 8 (of 8 total)
  • Shahin

    (@skalanter)

    2 years, 10 months ago

    Hello @marurbgil,

    I’m afraid that’s not possible. But you can customize it.
    What icon do you want to use instead?

    ____________

    You can use “Inspect Element” tools on the browser. Please follow the steps explained in this link: https://www.greengeeks.com/tutorials/article/use-the-inspect-element-tool-in-chrome/.

    CSS Tutorial: https://www.w3schools.com/css/
    CSS Units: https://www.w3schools.com/cssref/css_units.asp
    Responsive Sizes: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Put your CSS on custom screen size:

    @media only screen and (max-width: 480px) {
    /* put you CSS here*/
}

    Or use between sizes:

    @media (max-width: 960px) and (min-width: 481px){
    /* put you CSS here */
}

    Best Regards

    Thread Starter marurbgil

    (@marurbgil)

    2 years, 10 months ago

    I would like to put the basket option of ocean wp which is similar than this icon:

    https://www.google.com/search?q=cesta+carrito+icono+ocean+wp&tbm=isch&ved=2ahUKEwjlyMrV0tryAhWX_4UKHUI-C5EQ2-cCegQIABAA&oq=cesta+carrito+icono+ocean+wp&gs_lcp=CgNpbWcQAzoHCCMQ7wMQJ1C-I1jZJ2CHKmgAcAB4AIABTYgBqQOSAQE2mAEAoAEBqgELZ3dzLXdpei1pbWfAAQE&sclient=img&ei=4M0tYeXYLZf_lwTC_KyICQ&bih=869&biw=1644&rlz=1C1CHBF_esES932ES938#imgrc=EAsg8L7LL8Wg9M

    Shahin

    (@skalanter)

    2 years, 10 months ago

    Hello @marurbgil,

    Please put the CSS below in Customizing > Custom CSS/JS > CSS Code:

    #wrap .wcmenucart-cart-icon .wcmenucart-count {
    border: 0;
    text-align: center;
    width: 25px;
    height: 25px;
    border-radius: 25px;
    margin-bottom: 5px;
}

#wrap .bag-style:hover .wcmenucart-cart-icon .wcmenucart-count {
    background: #f1f1f1;
    color: #000;
}

#wrap .wcmenucart-cart-icon .wcmenucart-count:after {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAA/gAAAP4BT8Ki/gAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAALjSURBVFiFxddNiFZlFAfw3xklJTNozArCRYFplrVoEUGL7IMWkUYIjUEhBdJKcGMFUVCLtm4CF1G00TDIbIhyZWUrCfoYIgr6oOxLyMqoppR5Wjznbd653fedqzOjBy7n3vP/P/f+73nOc+5zo5TiXNpIRByKiJ8jYldErDsXIt5A6Tvew4NYUkqx0AcEbsNeTPYJGT8rAhpqRrEdf6eIK8+qgD4hr6eAJxZaQLStgojYgj04jokFqr2C8UECluEnLFugh/fs6OK2aCnlj4gYxxjG8UIL7Vo8g6+xo4HdiwdwELtbxm7FJhwetjw2qmn6fAB+S+IftmCPJbZ7wNiPE9/cmoG0t/ALVkfEThxr4GvTj0bE1gZ2Q/o1LdhyrFeX/JuzNYnnzWxS83kcKKUYlgFqc3o4z1/BVB92CTbgV3Wu++1qXIcv8H4D24SleBXtfaAvAyP4IRVvmGsNYFXGT2K0lGJk2OuXUqawLy/HhnE72j3p3ymlHMesU0Cdhu0Yi4hL++IXp78iIl5rjFmd/s4G1ivO/f9FOvVrvjR/xTeFy3v37pIBeBmP4yPsythaPIpv8WSDfxc242281MuGOo1HSinfnW4G1qf633H+mRSh6X3Hzn5upwyUUiYi4hNcg2cj4lNclfCKiHikMeTG9OsSC9yesf0zmB0zsAa/mfv8TzTv3bUGtuFCHFBb6JnYX3i6GWz9HM8gRCzCUbV6V2VvmDcb2ojS7sBl2DPfD6dbI7o//caIuHkOzzqpbvHePV0Bn+GE6arv2aS6eW2z5WZm95T60Vr5P2bHVbBFreKv1P+Ggr0DuCvxT4o+qBbfMZzXyu8o4JC6Oek1oX2ZgYtauDtS4K15/VBe39d27y5F2Ev3YtNTtiTf8lQL98/0Sxu+ffl2zMDd+RY/4oM8f24A9wK1aU3icIr8BovmMgUj6k72CL7HU1gxhH+TuoM6gRdx/SDurI2oaREx0rUfdOH+C2EsMlYkvL1oAAAAAElFTkSuQmCC');
    background-size: cover;
    background-position: center center;
    border: 0;
    width: 32px;
    height: 32px;
    border-radius: 0;
    left: -22px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

#wrap .bag-style:hover .wcmenucart-cart-icon .wcmenucart-count:after, .show-cart .wcmenucart-cart-icon .wcmenucart-count:after {
    height: 32px;
}

    Best Regards

    Thread Starter marurbgil

    (@marurbgil)

    2 years, 10 months ago

    Thank you very much!!!

    So, if the icon i want to show is” https://madicontrol.com/tienda/wp-content/uploads/2021/04/shopping-cart.svg ” which part of the css code you give me i should change?

    thanks in advance,

    Shahin

    (@skalanter)

    2 years, 10 months ago

    Hello @marurbgil,

    You should put your URL instead of the property for background:

    #wrap .wcmenucart-cart-icon .wcmenucart-count {
    border: 0;
    text-align: center;
    width: 25px;
    height: 25px;
    border-radius: 25px;
    margin-bottom: 5px;
}

#wrap .bag-style:hover .wcmenucart-cart-icon .wcmenucart-count {
    background: #f1f1f1;
    color: #000;
}

#wrap .wcmenucart-cart-icon .wcmenucart-count:after {
    background: url('https://madicontrol.com/tienda/wp-content/uploads/2021/04/shopping-cart.svg');
    background-size: cover;
    background-position: center center;
    border: 0;
    width: 32px;
    height: 32px;
    border-radius: 0;
    left: -22px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

#wrap .bag-style:hover .wcmenucart-cart-icon .wcmenucart-count:after, .show-cart .wcmenucart-cart-icon .wcmenucart-count:after {
    height: 32px;
}

    Result: https://i.postimg.cc/9fWmGVjh/image.png

    Best Regards

    Thread Starter marurbgil

    (@marurbgil)

    2 years, 9 months ago

    Thank you very much, it worked ver y nice!!!@Shahin

    Another thing I would like to get to finish the cart is that the counting bubble is higher than the basket.

    https://www.madicontrol.com/wp-content/uploads/2021/09/cestasubirburbuja.png
    Is anyway to high that up??

    This is my code for the basket:

    #wrap .wcmenucart-cart-icon .wcmenucart-count {
    border: 0;
    text-align: center;
    width: 25px;
    height: 25px;
    border-radius: 25px;
    margin-bottom: 10px;
	  background: #EEB601;
    color: #000;
}

#wrap .bag-style:hover .wcmenucart-cart-icon .wcmenucart-count {
    background: #F1F1F1;
    color: #000;
}

#wrap .wcmenucart-cart-icon .wcmenucart-count:after {
    background: url('https://madicontrol.com/tienda/wp-content/uploads/2021/09/shopping-cart-5.svg');
    background-size: cover;
    background-position: center center;
    border: 0;
    width: 47px;
    height: 47px;
    border-radius: 0;
    left: -35px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

#wrap .bag-style:hover .wcmenucart-cart-icon .wcmenucart-count:after, .show-cart .wcmenucart-cart-icon .wcmenucart-count:after {
    height: 47px;
}

    Thanks in advance!!

    Thread Starter marurbgil

    (@marurbgil)

    2 years, 9 months ago

    @shahin

    Thread Starter marurbgil

    (@marurbgil)

    2 years, 9 months ago

    Good Evening,

    I would like to know if there is any update about this,

    Thanks in advance

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Cambiar estilo cesta por carrito en el header’ is closed to new replies.