Styling issues after Divi’s performance update

The issue

After updating Divi to version 4.10+ (the performance update), some layouts have lost their styling.

What to do

Follow the steps below one by one until the issue is fixed:

1. Disable and reenable the dynamic CSS

1. Go to your admin dashboard > Divi > Theme Options > Performance > Disable the Dynamic CSS option.
2. Reload the affected page several times, does that help?
3. If it helps, re-enable the Dynamic CSS again and see if the issue is fixed.

2. Disable/Clear the static CSS

1. Go to your admin dashboard > Divi > Theme Options > Builder > Static CSS File Generation.
2. Click the Clear button or disable the option.

3. Deactivate your caching plugin

If you have a caching plugin, deactivate it temporarily. Does that help?

4. If the issue remains, use the Theme Builder

If you have tried all the previous steps and the problem remains, apply the layouts via the theme builder.

With the theme builder (under Divi > Theme Builder), you can build custom templates for the products, shop, categories, cart, checkout, login page, & my account page.

5. If the issue remains, deactivate your server-side caching.

From other clients testing and with the help of ET’s support, they found that the issue was coming from server-side caching. So, reach out to your hosting provider (or do it yourself) to deactivate the server-side caching and check again.

How to build a custom template for the login/register page via the theme builder?

The theme builder does not provide a direct way to build a template for the login page, but you can do it very easily by using the new conditions feature in Divi.

The login/register page within WooCommerce is the same My Account page, but WooCommerce displays the login/register forms when the user is logged out.

We will use the My account page’s template to add new sections for logged-out users only.

These sections will represent the layout of the login/register page.

The steps:

1. Make sure you have Divi version 4.11+
2. Go to Divi > Theme Builder > Edit the template of the My Account page.
3. Add a new section above the content of the layout.
4. Add the Woo Login/Register Module to this section.
5. Open the section’s Advanced settings > Conditions > Add Condition > Logged In Status.
6. Display Only If > User is Logged Out.

So this section or any other section with this condition will be displayed only when the user is logged out.

How to create a custom template for the empty cart page using the theme builder?

We will use the same approach as the login/register page. We will use the cart template in the theme builder, and will add the sections we want to be displayed only when the cart is empty.

The condition that will be used is “Cart Contents > Is Empty”

How to create a custom template for the thank you (order received) page using the theme builder?

This one is not as direct as the other two above, but it is easy enough for everyone. Here are the steps:

1. Apply the checkout layout using the theme builder.

2. On the same checkout layout, add your thank-you layout but give every section a class name of thankyou-section as shown in the screenshot below.

3. Add the following CSS to your child theme or under Divi > Theme Options > Custom CSS

.thankyou-section, .woocommerce-order-received .et_pb_section{     
    display: none; 
} 
.woocommerce-order-received .thankyou-section {     
    display: block; 
}