[Resolved] Checkout Page Header Issue with Elementor

[GeneratePressUser]

Hello,

After using the code to disable generatepress premium woocommerce on checkout page where elementor is used the header is messed up as it would be taking settings from generatepress premium, how can that be fixed. See the private box

[Ying]

Hi there,

The checkout-elementor link leads to a 404 page, can you check?

[GeneratePressUser]

Hey,

Sorry, can you pls try again.

[Ying]

Try to add this CSS:

#wc-mini-cart {
    background-color: #ffffff;
    color: #000000;
}

.wc-menu-item.sfHover .wc-mini-cart, .wc-menu-item:hover .wc-mini-cart {
    left: auto;
    opacity: 1;
    transition-delay: 150ms;
    pointer-events: auto;
    height: auto;
    overflow: visible;
    visibility: visible;
}
.wc-mini-cart {
    position: absolute;
    width: 300px;
    right: 0;
    box-shadow: 0 2px 2px rgb(0 0 0 / 10%);
    z-index: 99999;
    left: -99999px;
    opacity: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 80ms linear;
    transition-delay: 0s;
    visibility: hidden;
}
.wc-menu-item .wc-mini-cart .widget_shopping_cart {
    padding: 15px;
}
.woocommerce.widget_shopping_cart {
    font-size: 14px;
}
#wc-mini-cart ul.woocommerce-mini-cart {
    position: relative;
    left: auto;
    right: auto;
    opacity: 1;
    pointer-events: auto;
    height: auto;
    width: auto;
    float: none;
    background-color: transparent;
    box-shadow: 0 0 0;
    visibility: visible;
}
.woocommerce ul.cart_list, .woocommerce ul.product_list_widget {
    list-style: none outside;
    padding: 0;
    margin: 0;
}
#wc-mini-cart .total {
    text-align: center;
}
#wc-mini-cart .total {
    padding: 15px;
    margin: 15px -15px 15px;
    text-align: left;
}
.woocommerce.widget_shopping_cart .total {
    margin: 15px 0;
    padding: 15px;
    background: rgba(0,0,0,.05);
    border: 0;
    font-size: 14px;
}
.widget_shopping_cart .woocommerce-mini-cart__buttons {
    margin-bottom: 0;
    display: flex;
}
#wc-mini-cart .button {
    width: 100%;
    
}
#wc-mini-cart .button {
    background-color: #1f72bd;
    color: #ffffff;
}
.woocommerce.widget_shopping_cart .woocommerce-mini-cart__buttons a:first-child {
    margin-right: 2px;
}
.cart-contents .amount {
    display: none;
}
.cart-contents > span.number-of-items {
    display: inline-block;
}
.cart-contents > span.number-of-items {
    background-color: rgba(255,255,255,0.1);
}
.cart-contents>span.number-of-items {
    font-size: 11px;
    display: inline-block;
    background: rgba(255,255,255,.1);
    line-height: 1.7em;
    height: 1.7em;
    width: 1.7em;
    text-align: center;
    border-radius: 50%;
    margin-left: 5px;
    position: relative;
    top: -5px;
}
.cart-contents>span:not(:empty) {
    margin-left: 10px;
}

[GeneratePressUser]

Yes, that works, but isn’t there a work around to have things running along with elementor without doing these custom css work?

Or best in such case would be to make the menu also using elementor instead of generatepress options?

See private box

[Elvin]

Hi there,

Yes, that works, but isn’t there a work around to have things running along with elementor without doing these custom css work?

Unfortunately, custom CSS is the way to go.

Or best in such case would be to make the menu also using elementor instead of generatepress options?

Elementor has a feature to create Header templates for your site. This can completely override/replace the default header of the site but you’ll have to design everything on your own within Elementor’s page builder UI. 😀
https://elementor.com/blog/header-footer-builder/

[GeneratePressUser]

Hello,

Ok so is there a way to export the current CSS of woocommerce options and write it in the additional css box? like how Ying gave me up css still it had some css missing, so we can’t export generatepress css and write it manually? so that no need to use the woocommerce option in generatepress premium and things work without issue with generatepress. Let me know.

[Elvin]

Ok so is there a way to export the current CSS of woocommerce options and write it in the additional css box? like how Ying gave me up css still it had some css missing, so we can’t export generatepress css and write it manually? so that no need to use the woocommerce option in generatepress premium and things work without issue with generatepress. Let me know.

Not exactly sure what you mean. Can you explain a bit more which “woocommerce options” are you pertaining to?

The CSS Ying gave is a custom CSS based from her inspection of the site. Can you specify which things are perceived “missing”?

[GeneratePressUser]

Hello,

Sorry for the late response I missed to check the email notification, pls check the private box I have provided you the info.

[GeneratePressUser]

And yes by woocommerce options I mean in generatepress setting where there are all things on backend which we can enable there if I enable woocommerce then only I face this issue, so as your team told it looks like elementor is just overwriting some places of generatepress on that page which is causing this issue, so what should be the best fix here, is it possible to export all the css of woocommerce options and write it in custom css and disable the woocommerce options from backend after that, so that there is no issue or anything else which you can suggest.

[Ying]

The Woocommerce module includes not only CSS but also some functions, for example if you deactivate the Woocommerce module, the mini cart in navigation will not exist.

If you are ok with that, then the best option would be deactivate the Woocommerce module of GeneratePress.

[GeneratePressUser]

Hello,

I guess I can make that mini cart via elementor too right? having global header?

So, using elementors global header should solve my issue? What can u recommend in my this case where I want to design those woocommerce pages using elementor where as u saw generatepress and elementor are causing css conflicts.

[Elvin]

I guess I can make that mini cart via elementor too right? having global header?

You can but you may need elementor addons for WooCommerce if you have specific functionalities beyond Elementor’s default widgets.

So, using elementors global header should solve my issue? What can u recommend in my this case where I want to design those woocommerce pages using elementor where as u saw generatepress and elementor are causing css conflicts.

It can solve the issue by completely removing the GeneratePress header as it will be replace by the site header you’ll be making on Elementor’s Global Header.

Having a global header from Elementor means there will be no conflict with GeneratePress because the header will be 100% styled by Elementor.

[GeneratePressUser]

Hello,

I have elementor, also this: https://essential-addons.com/elementor/

So, if we want a perfect website without such issues and want to edit woocommerce pages via elementor as they have now new update which allows to edit everything on the page.

what would you recommend me to do, if I disable woocomerce option in generatepress backend then it also changes all styles done on even shop page etc, so I will need to make new shop page too using elementor in order to avoid that isn’t it?

[Elvin]

I have elementor, also this: https://essential-addons.com/elementor/

I can’t remember if this one had the mini-cart. You may want to check Ultimate addon for Elementor as well. 🙂

what would you recommend me to do, if I disable woocomerce option in generatepress backend then it also changes all styles done on even shop page etc, so I will need to make new shop page too using elementor in order to avoid that isn’t it?

That would be the case if you wish to avoid any potential conflicts going forward. But consider checking if a lot has to be changed before doing this to see if the effort is worth the changes.

[Author]

Posts