[Resolved] Woocommerce product page and checkout page look different

Hello There,
Thanks for contacting WPML Support. I will be glad to assist you in this matter.

After reviewing the Product page, I noticed that custom CSS has been applied to the page header in the default language. However, these CSS codes were not copied to the translated product page, which is why the page header on the translated product page does not appear the same as the default product page.

Here is the CSS code that is not working on the translated product page: hidden link

Now, this issue can be solved in two ways. Either setting up the translation preference for the custom CSS field to copy or adding language-specific CSS code. As I'm not aware of how you've added the CSS, I'm including the other approach below.

To solve the issue, please duplicate the existing CSS code and include the Language attribute selector within the parent class of the CSS. Here's an example to demonstrate the approach:

html[lang="en-US"] .background-image-page-header-overlay {
    opacity: 0.7;
    background-color: #ffffff;
}

The same thing is happening on the checkout page. The background image is added in custom CSS[Screenshot: hidden link; which is not getting copied to the Translated page. However, by following the same steps mentioned above, you should be able to fix the issue on Translated checkout page too.

It is worth noting that by including the Language attribute selector within the parent class of the CSS, you can effectively differentiate and apply specific styles based on the language. I hope it will help.

Please note that support for custom code is beyond the scope of our support. The CSS code provided above is for demonstration purposes, intended to guide you in resolving the issue.

By implementing the approach outlined above, you should be able to address the issue. However, if you encounter any difficulties or require further assistance, please feel free to let me know. I will be happy to help.

Best regards,
Prosenjit