• Resolved alfredo1216

    (@alfredo1216)


    Hello,

    I upgraded my elementor site to the new flexbox containers, however I am having styling issues when using the woocommece shortcodes on pages with flexbox containers.

    In some cases it modifies the colors and in others the borders.

    I share the following sample images:

    1. Image of the cart page created by default in woocommerce.

      2. Image with woocommerce cart shortcode in a flexbox container.

      This same problem occurs with the other woocommerce shortcodes.

      I remain attentive to your comments.

      Greetings,

    Viewing 15 replies - 1 through 15 (of 22 total)
    • Hi @alfredo1216

      I’m really sorry, but the shortcode + Elementor scenario is unsupported because most importantly – it doesn’t make much sense. You’re basically loading Elementor’s assets for nothing on that page and fixing this would break other workflows in the process.

      In this case, you have two options – you can either restore the page to Gutenberg + shortcode, or actually create the cart/checkout pages with Elementor’s built in blocks.

      Hope this clears things up!

      Thanks.

      Thread Starter alfredo1216

      (@alfredo1216)

      Hello,

      I understand you, really my problem is related to the use of Crocoblock JetWooBuilder, which allows you to create custom templates for woocommerce through Elementor.

      I notified them of this problem, but they told me that it is something related to the theme.

      I was telling you about the shortcode because the error is replicated in the same way.

      What could you recommend to me to be able to solve these errors and continue using my woocommerce builder without problem?

      Would it be possible to make the theme compatible with this plugin?

      Stay tuned to your comments.

      Thank you.

      Hello @alfredo1216

      Seeing as this is related to another plugin and the incorrect information was provided, I would like to ask of you to submit the full report on this one, with all the relevant details.

      Otherwise, I’m afraid that we won’t be able to guess what’s happening.

      Thank you for understanding!

      Kind reminder about this one, @alfredo1216 ??

      Thread Starter alfredo1216

      (@alfredo1216)

      Hello,

      I understand you, here is a detailed summary:

      I have a website with Elementor, Woocommerce and Jetwoobuilder from Crocoblock.

      It happens that when I change the Elementor sections for Flexbox, I have problems with the styles of the Jetwoobuilder widgets that customize the different Woocommerce pages, specifically the following pages: cart, checkout, thank you and those associated with my account.

      I contact Jetwoobuilder support and they tell me it’s due to issues with the theme’s styles. Since testing with the theme “Hello Elementor” these problems did not occur.

      What are the problems presented?

      • Change of color and style of lines of the tables.
      • Absence of lines in the tables and some sections.
      • Change the width of the subpages of my account.

      Reference images:

      https://i.ibb.co/p3Vh8Rv/image.png
      https://i.ibb.co/0rG6NbQ/image.png
      https://i.ibb.co/WPytyW9/image.png
      https://i.ibb.co/0X83DvV/image.png
      https://i.ibb.co/djGYNfG/image.png

      I share the following page where you can check the problems.

      https://test-site.c.wetopi.com/my-wordpress-manager?e5f2abc888b223fce3ca01006d14db1959a40d44bca2259380c34776

      I will be attentive to your comments.

      Greetings,

      Hello @alfredo1216

      What plugins from Jet do you have installed exactly? I managed to get a hold of a JetWooBuilder license, but I cannot find any of these blocks in my install.

      Or maybe do I have to take another route? I do see that Jet has some kind of “build a template” feature. Is that it?

      Thanks.!

      Thread Starter alfredo1216

      (@alfredo1216)

      Hello,

      I share the following video where you can check the active options to reproduce the problem.

      https://app.screencast.com/dncCUF3GIMcbb

      I will be attentive to your comments.

      Greetings,

      Hello @alfredo1216

      Ok, I’ve been able to take a closer look at this and right now, I am very inclined to say that this is more of a JetBuilder issue, rather than a Blocksy one.

      In my research I have also found that the layouts are broken on the default Storefront theme, which is the one that needs testing. The “Hello” theme is something extremely basic and that’s why it probably “works” on there.

      Though, I did not have the exact same results as you so in order to have the final answer for this, we would require the exact templates that you have built. Can you please use the “export” feature from JetWoo and send the files our way? You can use wetransfer.com for those.

      Thanks!

      Thread Starter alfredo1216

      (@alfredo1216)

      Hello,

      I just checked with the following themes: Astra, OceanWP, Storefront and Hello Elementor. And all show the same styles when I use the old Elementor sections and the new FlexBox containers.

      With these themes, the problem that I am presenting where the styles are changed does not occur.

      I will share you the following link with the exported templates from JetWooBuilder.

      https://we.tl/t-RxxbLQse3N

      In this image you can see the active conditions for each template.

      Remember that the problem only occurs when the Elementor FlexBox option is active.

      I will be attentive to your comments.

      Greetings,

      • This reply was modified 1 year, 9 months ago by alfredo1216.

      Hello @alfredo1216

      Ok, I have taken a look and reported everything to the devs. The HTML/CSS structure is really wack to be honest, but I’ll see what they have to say about this.

      Be in touch!

      Hello @alfredo1216

      An update will be released shortly that fixes this. Though, this will be a two-part fix, as a bigger update is needed for more major changes.

      Until that other update will be out, you will need to use a little bit of CSS –

      :root {
      	--e-temp-border-color: var(--border-color);
      }
      
      .e-con table, 
      .e-con th, 
      .e-con td,
      .e-con .woocommerce-customer-details address,
      .e-con .woocommerce-customer-details .woocommerce-column__title,
      .e-con ul.woocommerce-order-overview.order_details {
      	--border-color: var(--e-temp-border-color);
      }

      This ensures that some variables aren’t overwritten.

      Be sure to stay up to date in order to always receive the latest fixes.

      Hope this helps!

      Thanks.

      Thread Starter alfredo1216

      (@alfredo1216)

      Hello,

      Updated and with the CSS code integrated. Checking on the website most of the errors have been fixed, so far I have seen only one error that continues to show (Addresses section in my account). But I understand that it will be part of the more complete update that they have to carry out.

      Thank you very much for your excellent attention, and I will be attentive to that future update that corrects all the errors presented and does not need additional CSS.

      Greetings,

      Hi @alfredo1216

      Could you please let me know more about the “addresses” section? I think we’ve gone through the entire setup and everything should be OK now. Though, we’d like to hear more about this.

      Thanks!

      Thread Starter alfredo1216

      (@alfredo1216)

      Hello,

      Yes, here I detail the information in the address section.

      In the previous version of the theme the section was displayed with this border style.

      In the last update this style disappeared.

      At the same time, I wanted to tell you that in the last update I am having a problem with the “P” tags since they contain a margin-botton that disproportions the content created in elementor since it cannot be modified.

      I will be attentive to your comments.

      Greetings,

      Hi @alfredo1216

      First off, I can say that the <p> tag issue will be fixed soon. It is due to an Elementor update which has changed a few things behind the scenes, but we’ll manage.

      Regarding the account error, I’m not entirely sure I follow. I still have the templates sent by you previously, but the issue seems to reproduce on all themes out there. Here’s how the page looks like with the default theme – https://ibb.co/vVJHsXc. Are you sure this isn’t a plugin problem? Maybe try to get in touch with Crockoblock for this one?

      Thanks!

    Viewing 15 replies - 1 through 15 (of 22 total)
    • The topic ‘Error with styles and Elementor FlexBox’ is closed to new replies.