[Resolved] Checkout Page Header Issue with Elementor

Home Forums Support [Resolved] Checkout Page Header Issue with Elementor

Home Forums Support Checkout Page Header Issue with Elementor

Viewing 15 posts - 1 through 15 (of 28 total)
  • Author
    Posts
  • #2020334
    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

    #2020350
    Ying
    Staff
    Customer Support

    Hi there,

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

    #2020353
    GeneratePressUser

    Hey,

    Sorry, can you pls try again.

    #2020401
    Ying
    Staff
    Customer Support

    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;
    }
    #2020536
    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

    #2020641
    Elvin
    Staff
    Customer Support

    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/

    A wise man once said:
    "Have you cleared your cache?"

    #2020657
    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.

    #2020668
    Elvin
    Staff
    Customer Support

    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”?

    A wise man once said:
    "Have you cleared your cache?"

    #2034585
    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.

    #2034593
    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.

    #2034690
    Ying
    Staff
    Customer Support

    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.

    #2034765
    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.

    #2034859
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #2036097
    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?

    #2036498
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

Viewing 15 posts - 1 through 15 (of 28 total)
  • You must be logged in to reply to this topic.