[Resolved] Bad appearance of the elements of the products (Woocommerce)

[Author]

Posts

[Francisco Ramón Molina Busquiel]

The elements for the purchase of Woocommerce products take a bad look with respect to the same elements in DIVI.
hidden link
hidden link
Look at the screenshots.
Thanks for your help.
Best regards,
Francisco R.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Francisco

I see that you are using a custom product archive, but I can't see the specifics of how you have designed the archive.

I think the quickest way for me to look into this is to look at your site directly if that's okay with you.

Can I get access credentials for the site? I will look at your set up, but if I need to test making any changes I will make a copy of the site to try it locally so as not to risk breaking anything on your own site.

I'll mark your next reply as private. Make sure you have a current backup before replying.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Francisco

I took a duplicate of your site to do some testing but I kept having problems with white screens when trying to access the back end, but in any case I think I see the problems.

Firstly, the elements such as breadcrumbs at the top of the page are added by WooCommerce itself, and to remove them you need to use WC hooks, as described in an earlier reply here: https://toolset.com/forums/topic/shop-page-customization/#post-519699

Regarding the formatting of the output such as the buttons and selectors, Toolset doesn't get very involved in styling.

I believe what is happening is that Toolset is loading Bootstrap CSS (which it uses for laying out grids etc.) and this is interfering with the styling from your theme.

To avoid that go to Toolset -> Settings and for Bootstrap loading choose "This site is not using Bootstrap CSS".

Your theme's styles should then prevail.

Any additional styling you want to add you will need to do with additional CSS that you can add to the custom CSS section of the Divi Builder you use to design the content template used by your custom product archive.

[Francisco Ramón Molina Busquiel]

If you need to duplicate my site, before duplicating it you must disable the WPBruiser plugin.
I can not disable CSS Bootstrap from Toolset, because if I disable it all the CRED forms take a very bad appearance. In addition, it is also necessary for the layouts in grid type of Toolset.
These problems you have to solve them, can not be that if I use a feature of Toolset another function work incorrectly, and if I want the other functionality to work well then I have to disable the other.
This is your problem and you must give it a solution. You can not do things and leave them unfinished. If Toolset is compatible with DIVI, it is not possible that it does not take into account the problems with the DIVI CSS.
These problems you have to solve them.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Francisco

If you are relying on Bootstrap elsewhere, e.g. with CRED forms, then, yes, disabling Bootstrap is not an option.

The issue here lies with certain themes, such as Divi, which use the same classnames as Bootstrap for their own styles.

So the incompatibility is between Divi and any other plugin which relies on Bootstrap, including Toolset.

We recently looked at providing a no-conflict mode that would avoid such issues but eventually concluded that we could not provide a solution that would not create serious complications for existing sites or when turning such a mode on or off, it is a problem that we cannot offer a generalised solution for. (If we were writing Toolset from scratch today we would be able to use an alternate solution that is not available to us now.)

In which case all we can do is provide specific CSS help for individual problems as they arise.

So I see the specific issues shown on your screenshot of the label and the select dropdown where there is a conflict between the Divi styles and Bootstrap styles which I can suggest custom CSS to fix, as well as the quantity selector and add to cart buttons appearing on separate lines.

While I am looking at this is there anything else you have identified as a problem arising from this same issue?

[Francisco Ramón Molina Busquiel]

Yes. There are many problems.
I was going crazy because I thought that the DIVI style did not work to make all the columns of a row take the same height. After many inquiries and opening a ticket in the DIVI forum, the DIVI support team has indicated that it is a incompatibility with Toolset, and they have given me a wordaround:
hidden link
The shop page of Woocommerce produces problems when you add products to the cart.
https://toolset.com/forums/topic/problem-when-adding-product-to-cart-from-the-products-page-divi/
The DIVI menu is not rendered correctly:
https://toolset.com/forums/topic/problem-displaying-the-divi-main-menu/
I also have a problem with the visibility of the metadata in new CPTs that maybe has to do with DIVI, or maybe not, but the days are passing and you do not solve it.
https://toolset.com/forums/topic/how-can-i-hide-the-cpt-metadata/

In my humble opinion, Toolset should provide a special CSS file for DIVI, so that it is not necessary to use Bootstrap, so that grid layouts are correctly rendered, CRED form fields, Woocommerce elements, etc.

Thanks for your help.

[Francisco Ramón Molina Busquiel]

Yes. There are many problems.

I was going crazy because I thought that the DIVI style did not work to make all the columns of a row take the same height. After many inquiries and opening a ticket in the DIVI forum, the DIVI support team has indicated that it is a incompatibility with Toolset, and they have given me a wordaround:
hidden link

The shop page of Woocommerce produces problems when you add products to the cart.
https://toolset.com/forums/topic/problem-when-adding-product-to-cart-from-the-products-page-divi/

The DIVI menu is not rendered correctly:
https://toolset.com/forums/topic/problem-displaying-the-divi-main-menu/

I also have a problem with the visibility of the metadata in new CPTs that maybe has to do with DIVI, or maybe not, but the days are passing and you do not solve it.
https://toolset.com/forums/topic/how-can-i-hide-the-cpt-metadata/

Next I indicate more problems with the layout of the shop page.
hidden link
Look at the screenshot.

In my humble opinion, Toolset should provide a special CSS file for DIVI, so that it is not necessary to use Bootstrap, so that grid layouts are correctly rendered, CRED form fields, Woocommerce elements, etc.

Thanks for your help.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Francisco

I think the most sensible solution is to selectively disable Bootstrap on this page (the WooCommerce products archive), rather than wrestle with the conflicts between the Bootstrap and Divi styles.

You can do that by adding the following code to your site (to the theme's functions.php file, or by using a plugin such as Code Snippets):

/**
 * Don't enqueue Bootstrap on WC Products archive
 */
function dequeue_bootstrap(){

  if ( is_post_type_archive( 'product' ) ) {


    // dequeue Bootstrap CSS
    function dequeue_bootstrap_css(){
      wp_dequeue_style( 'toolset_bootstrap_styles' );
    }
    add_action( 'wp_print_styles', 'dequeue_bootstrap_css' );

    // dequeue Bootstrap JS 
    function dequeue_bootstrap_js(){
      wp_dequeue_script( 'toolset_bootstrap' );
    }
    add_action( 'wp_print_scripts', 'dequeue_bootstrap_js' );    

  }

}
add_action( 'wp_enqueue_scripts', 'dequeue_bootstrap', 100 );

That still leaves some visual tweaking to do. (The large margin to the right is because the Divi theme has an option to disable the sidebar on the WC product archive, but because we are creating a custom archive with Toolset Divi doesn't recognise it as the WC product archive and leaves a space for the non-existent sidebar.)

I added the following CSS rules to the CSS editor section of the custom archive for products on my local copy:

body.post-type-archive-product .products ul.wpv-loop {
  padding-left: 0!important;
}

body.post-type-archive-product .products .et_pb_row {
  width: 100%;
}

.variations {
  margin-bottom: 1em;
}

.woocommerce .variations_button .quantity {
  display: inline-block;
}

That seems to have fixed most of the styling issues on this page that you described.

If I have missed something let me know and I will take another look.

I will pass on your suggestion that we make a custom stylesheet for Divi when using WooCommerce to avoid such issues in the first place.

[Francisco Ramón Molina Busquiel]

I do not like to use custom PHP code for the pages, because a posteriori it may happen that I need to use the functionalities that have been disabled, however I have to admit that now the appearance is much better, although some details are missing. -- See the screenshots.
Despite this, I reaffirm my assertion that this should be contemplated as a base in the Toolset core.
This is just a patch, since other pages of my site are being affected by these interactions between DIVI and Bootstrap, so you should look for a better solution.
Maybe you could put a selector in all the pages, posts, cpt's with which Bootstrap could be enabled or not.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Francisco

I started looking at this again, but I need to clarify the options with you before I go further.

Firstly, employing the solutions from my last reply, I don't see the issues you report in your last updates.

See the screenshot for how it looks on my local copy of your site with the above fixes added.

Now, there are two possible ways of countering the conflicts between Divi and Bootstrap CSS. (Remember, this is a conflict between Divi and Bootstrap, which Toolset uses, not a conflict between Toolset and Divi per se. If Divi didn't use the same class names as Bootstrap, which is the most widely used of all CSS frameworks, the issue wouldn't exist.)

One is to go through the CSS and try to identify each case where there is a conflict between Divi and Bootstrap, and to then add additional rules to try and enforce the required styling wherever there is a conflict. The Bootstrap stylesheet is over 6000 lines long and the Divi stylesheet is almost 20000 lines long.

The second is to not load Boostrap CSS on pages where it is not used, which is the solution I proposed above, and which to me seems the only reliable option.

You said that you don't like such a solution, in case you later need to use Bootstrap CSS where it has been disabled. But that implies mixing content on the same page where you do want the Bootstrap styles to be effective with content where you don't want the Bootstrap styles to prevail, and you will have the same issue with the first solution where you add additional CSS rules to resolve the conflicts, which you now want to be effective on some parts of the page but not others.

Given the conflict between Divi and Bootstrap which we cannot resolve, I would state that you should avoid mixing content on the same page where such conflicts arise.

And in that case, the best solution is to not load Bootstrap if it is not required.

I can recommend to our developers that they allow more granular control in the options of where Bootstrap is enqueued, but knowing the current priorities it would be some time before you might expect such a feature to be added, and in the meantime you can dequeue the stylesheet in specific circumstances as I described above.

You can add such code to your site using a plugin such as Code Snippets rather than adding it to your theme's functions.php file so that it is not lost if you switch theme.

If you need any help with the PHP code so that you can dequeue Bootstrap on other pages then please let me know.

[Francisco Ramón Molina Busquiel]

It is very strange that your browser looks correctly.
See the following screenshots of 4 different browsers.
I have put in my code exactly the code that you told me.
Maybe you have missed some other code.
You can access my site and dashboard to see if anything is missing.

Thanks for your help.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Francisco

I can see when I visit your site that bootstrap.css is still being loaded.

Looking at the code I gave you above to dequeue Bootstrap I missed the final line when I pasted it.

I've edited the reply to include the add_action call.

If you could please edit where you added the code and include that line.

Sorry about that.

[Francisco Ramón Molina Busquiel]

Now it works correctly.
Thanks for your help Nigel.